// Hi-Fi B — Bottom (Process, Differentials, Testimonials, IG, CTA, Footer, FAB)
// Reads from window.Store

function Process() {
  const steps = window.Store.getProcessSteps();
  return (
    <section id="process" style={{ padding: 'var(--section-pad-y) 0', background: 'var(--primary)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.08, color: 'var(--accent)' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-tag reveal" style={{ color: 'var(--accent)' }}>04 / Como funciona</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <h2 className="h-section reveal" style={{ color: 'var(--paper)' }}>4 <em>FASES</em><br/>DO ORÇAMENTO.</h2>
          <p className="reveal" style={{ maxWidth: 360, fontSize: 15, color: 'rgba(245,241,232,0.75)', lineHeight: 1.5 }}>
            Sem mistério, sem surpresa no preço. Você aprova cada etapa antes da gente avançar.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.max(steps.length, 1)}, 1fr)`, gap: 18 }}>
          {steps.map((s, i) => (
            <div key={s.n || i} className="reveal" style={{ background: 'var(--ink)', border: '3px solid var(--accent)', padding: 28, position: 'relative', transitionDelay: `${i * 80}ms`, boxShadow: '6px 6px 0 var(--accent)' }}>
              <div className="font-mono" style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 700, letterSpacing: '0.2em', marginBottom: 16 }}>FASE {s.n}</div>
              <div style={{ width: 56, height: 56, background: 'var(--accent)', color: 'var(--primary)', display: 'grid', placeItems: 'center', marginBottom: 18, border: '2px solid var(--paper)' }}>
                <Icon name={s.icon} size={28} />
              </div>
              <div className="font-display" style={{ fontSize: 18, color: 'var(--paper)', marginBottom: 8, letterSpacing: '0.02em' }}>{s.title}</div>
              <p style={{ fontSize: 12.5, lineHeight: 1.55, color: 'rgba(245,241,232,0.8)', marginBottom: 12 }}>{s.body}</p>
              <div style={{ borderTop: '1.5px dashed var(--accent)', paddingTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="corner-down-right" size={11} /> {s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Differentials() {
  const diffs = window.Store.getDifferentials();
  return (
    <section id="diff" style={{ padding: 'var(--section-pad-y) 0' }}>
      <div className="container">
        <div className="section-tag reveal">05 / Por que aqui</div>
        <h2 className="h-section reveal" style={{ marginBottom: 48 }}>POR QUE <em>NÓS</em>?</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {diffs.map((d, i) => (
            <div key={d.id || i} className="reveal lift" style={{ border: '3px solid var(--ink)', padding: 32, position: 'relative', background: 'var(--paper)', boxShadow: '6px 6px 0 var(--ink)', transitionDelay: `${i * 60}ms` }}>
              <div style={{ position: 'absolute', top: -3, right: -3, width: 48, height: 48, background: 'var(--accent)', color: 'var(--primary)', display: 'grid', placeItems: 'center', border: '3px solid var(--ink)' }}><Icon name={resolveIcon(d.icon)} size={24} /></div>
              <div className="font-display" style={{ fontSize: 22, marginBottom: 10, marginTop: 28, lineHeight: 0.95 }}>{d.title}</div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{d.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = window.Store.getTestimonials().filter((t) => t.published);
  if (!items.length) return null;
  return (
    <section id="testimonials" style={{ padding: 'var(--section-pad-y) 0', background: 'var(--paper-warm)' }}>
      <div className="container">
        <div className="section-tag reveal">06 / Clientes</div>
        <h2 className="h-section reveal" style={{ marginBottom: 48 }}>FÃS <em>REAIS</em>.<br/>HISTÓRIAS REAIS.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {items.map((t, i) => (
            <div key={t.id || i} className="reveal" style={{ background: 'var(--paper)', border: '3px solid var(--ink)', padding: 32, boxShadow: '6px 6px 0 var(--primary)', transitionDelay: `${i * 60}ms`, position: 'relative' }}>
              <div style={{ display: 'flex', gap: 4, color: 'var(--accent)', marginBottom: 16, fontSize: 18 }}>
                {Array.from({ length: t.rating || 5 }).map((_, j) => <Icon key={j} name="star" size={18} stroke="var(--accent)" />)}
              </div>
              <p className="font-hand" style={{ fontSize: 20, lineHeight: 1.35, margin: '0 0 20px', color: 'var(--ink)' }}>"{t.body}"</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '2px solid var(--ink)', paddingTop: 16 }}>
                <span style={{ fontWeight: 800, fontSize: 13, fontFamily: 'var(--font-display)', letterSpacing: '0.02em', textTransform: 'uppercase' }}>— {t.name}</span>
                <span className="font-mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{t.piece}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function InstagramFeed() {
  const items = window.Store.getInstagram();
  const s = window.Store.getSettings();
  if (!items.length) return null;
  return (
    <section style={{ padding: 'var(--section-pad-y) 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="section-tag reveal">07 / Bastidores</div>
            <h2 className="h-section reveal">@<em>{s.instagram || 'ALCANTARA3D'}</em></h2>
          </div>
          <a href={`https://instagram.com/${s.instagram || 'alcantara3d'}`} target="_blank" rel="noopener" className="btn reveal">
            <Icon name="instagram" size={16} /> Seguir <Icon name="arrow-up-right" size={14} />
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {items.map((it, i) => {
            const src = typeof it === 'string' ? it : (it && it.src) || '';
            const link = typeof it === 'object' && it && it.link ? it.link : '#';
            return (
            <a key={i} href={link} className="lift reveal" style={{ aspectRatio: '1/1', overflow: 'hidden', border: '2px solid var(--ink)', position: 'relative', transitionDelay: `${i * 40}ms` }}>
              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'var(--primary)', opacity: 0, transition: 'opacity 0.2s', display: 'grid', placeItems: 'center', color: 'var(--accent)' }} className="ig-overlay">
                <Icon name="instagram" size={32} />
              </div>
            </a>
            );
          })}
        </div>
        <style>{`a:hover .ig-overlay { opacity: 0.85; }`}</style>
      </div>
    </section>
  );
}

function CTAFinal() {
  const s = window.Store.getSettings();
  return (
    <section id="cta" style={{ padding: '48px 0', background: 'var(--accent)', color: 'var(--primary)', position: 'relative', overflow: 'hidden' }}>
      <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.18, color: 'var(--primary)' }}></div>
      <div className="glow-ring" style={{ width: 700, height: 700, top: -200, right: -200, background: 'radial-gradient(circle, rgba(60,19,97,0.4) 0%, transparent 60%)' }}></div>
      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="section-tag reveal" style={{ color: 'var(--primary)' }}>08 / Bora começar</div>
        <h2 className="reveal font-display" style={{ fontSize: 'clamp(42px, 6.5vw, 140px)', lineHeight: 0.85, margin: '20px 0 28px', letterSpacing: '-0.03em' }}
          dangerouslySetInnerHTML={{ __html: s.ctaTitle || 'BORA TRAZER<br/>SUA IDEIA<br/>P/ VIDA?' }} />
        <p className="reveal" style={{ fontSize: 16, maxWidth: 500, margin: '0 auto 32px', lineHeight: 1.55, fontWeight: 500 }}
          dangerouslySetInnerHTML={{ __html: s.ctaBody || 'Orçamento gratuito · resposta em até 2h · sem compromisso. Manda foto, link ou só descreve a ideia — a gente desenrola.' }} />
        <div className="reveal" style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
          <a href={`https://wa.me/${s.whatsapp}`} target="_blank" rel="noopener" className="btn btn-wa btn-lg">
            <Icon name="whatsapp" size={20} /> Chamar no WhatsApp
          </a>
          <a href={`mailto:${s.email}`} className="btn btn-lg">
            <Icon name="mail" size={18} /> Enviar email
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const s = window.Store.getSettings();
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '60px 0 24px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src="logo.png" alt="Alcantara Studio 3D" style={{ height: 44, width: 44, objectFit: 'contain', display: 'block', borderRadius: 8 }} />
              <div>
                <div className="font-display" style={{ fontSize: 22, lineHeight: 1 }}>{s.brand}</div>
                <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)' }}>{s.brandSub} · 2026</div>
              </div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: 'rgba(245,241,232,0.7)', maxWidth: 320 }}>
              {s.footerBio || 'Impressão 3D personalizada. Bustos, action figures e objetos sob medida — cada peça uma edição de 1.'}
            </p>
          </div>
          <div>
            <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 16 }}>NAVEGAR</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <li><a href="#catalog">Catálogo</a></li>
              <li><a href="#process">Como funciona</a></li>
              <li><a href="#diff">Diferenciais</a></li>
              <li><a href="#testimonials">Depoimentos</a></li>
            </ul>
          </div>
          <div>
            <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 16 }}>CONTATO</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <li><a href={`https://wa.me/${s.whatsapp}`}>WhatsApp</a></li>
              <li><a href={`mailto:${s.email}`}>{s.email}</a></li>
              <li><a href={`https://instagram.com/${s.instagram}`}>Instagram @{s.instagram}</a></li>
            </ul>
          </div>
          <div>
            <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 16 }}>HORÁRIO</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, color: 'rgba(245,241,232,0.7)' }}>
              <li>{s.hours}</li>
              <li>Resposta WA em 2h</li>
            </ul>
          </div>
        </div>
        <div style={{ borderTop: '1.5px solid rgba(245,241,232,0.15)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'rgba(245,241,232,0.5)', textTransform: 'uppercase' }}>
          <span>© 2026 {s.brand} · TODOS OS DIREITOS RESERVADOS</span>
          <span>FEITO À MÃO · IMPRESSO COM AMOR</span>
        </div>
      </div>
    </footer>
  );
}

function FabWA() {
  const s = window.Store.getSettings();
  return (
    <a href={`https://wa.me/${s.whatsapp}`} target="_blank" rel="noopener" className="fab-wa" aria-label="WhatsApp">
      <Icon name="whatsapp" size={32} stroke="white" />
    </a>
  );
}

window.Process = Process;
window.Differentials = Differentials;
window.Testimonials = Testimonials;
window.InstagramFeed = InstagramFeed;
window.CTAFinal = CTAFinal;
window.Footer = Footer;
window.FabWA = FabWA;
