// sections.jsx — Landing page section components
// Rebuilt to remove generic SaaS tropes: out with the icon+card grids,
// in with editorial UI fragments (mockups.jsx) and asymmetric layouts.

const SecIcon = {
  arrowRight: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  check: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  x: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  plus: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
  ig: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>,
  li: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>,
  wa: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.52 3.48A12 12 0 003.48 20.52L2 22l1.55-1.41A12 12 0 0020.52 3.48zM12 21.5a9.5 9.5 0 01-4.85-1.32l-.35-.21-3.62.92.96-3.53-.23-.36A9.5 9.5 0 1112 21.5z"/></svg>,
};

/* ---------- Nav ---------- */
function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="nav-logo">
          <span className="mark"/>
          <span>LUE</span>
        </a>
        <nav className="nav-links">
          <a href="#dor">A dor</a>
          <a href="#funciona">Como funciona</a>
          <a href="#capacidades">Capacidades</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="login" href="https://ialue.com.br/login">Entrar</a>
          <a className="btn btn-primary" href="https://ialue.com.br/login">Ativar LUE</a>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero (unchanged — kept identical to current) ---------- */
function Hero() {
  return (
    <section className="hero">
      <div className="wrap hero-inner">
        <div className="hero-copy reveal in">
          <span className="eyebrow on-dark"><span className="dot"/> SDR com IA · WhatsApp</span>
          <h1 style={{marginTop:22}}>
            Cliente entra. <span className="accent">LUE atende no catálogo.</span> Seu vendedor só fecha.
          </h1>
          <p className="lede">
            LUE atende, qualifica e entrega na mesa do vendedor só os leads prontos pra comprar.
            24 horas por dia, direto no WhatsApp da sua loja.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-lg" href="#cta">
              Quero qualificar meus leads <span className="arrow">{SecIcon.arrowRight}</span>
            </a>
            <a className="btn btn-ghost btn-lg" href="#demo">Ver demo</a>
          </div>
          <div className="hero-meta">
            <div className="avatars">
              <div className="av"/><div className="av"/><div className="av"/><div className="av"/>
            </div>
            <span>+340 lojistas · setup em uma tarde</span>
          </div>
        </div>

        <div className="hero-visual reveal reveal-2 in">
          <div className="hero-glow"/>
          <div style={{position:'relative'}}>
            <HeroChatMockup/>
            <div className="qualified-tag">
              <div className="check">{SecIcon.check}</div>
              <div>
                Lead qualificado
                <small>Marina · Blusa Lilac · pronta pra fechar</small>
              </div>
            </div>
            <div className="handoff-tag">
              <div className="icon">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
              </div>
              <div>
                Passando pro vendedor
                <small>Tempo médio: 2min</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p className="wrap mockup-note">// mockup ilustrativo · atendimento no WhatsApp</p>
    </section>
  );
}

/* =====================================================
   2) PAIN — asymmetric: 1 big screenshot + 2 stacked
   ===================================================== */
function PainSection() {
  return (
    <section className="section section-pain" id="dor">
      <div className="wrap">
        <div className="pain-intro reveal">
          <p className="overline">— Por que sua loja perde venda todo dia</p>
          <h2>
            Seu vendedor gasta o dia respondendo.<br/>
            Quase nada vira venda. <span className="hl-yes">Isso a LUE muda!</span>
          </h2>
          <p className="lede pain-lede">
            Não é falta de produto, nem de preço. É <em>triagem</em>. Toda
            mensagem repetida que o vendedor responde é tempo que ele não está
            fechando — e toda venda que chega depois das 18h volta como
            concorrente no dia seguinte.
          </p>
        </div>

        <div className="pain-evidence">
          <div className="pain-cell pain-cell--lead reveal reveal-1">
            <div className="pain-cell__caption">
              <span className="pain-cell__num">01</span>
              <h3>Bia manda mensagem às 23h47. Você só vê de manhã.</h3>
              <p>Bia viu a blusa no story da loja. Mandou no Instagram às 23h47.
              Recebeu a notificação às 9h12 do dia seguinte — depois de já ter
              comprado no concorrente.</p>
            </div>
            <UnreadChat/>
          </div>

          <div className="pain-cell pain-cell--repeat reveal reveal-2">
            <div className="pain-cell__caption">
              <span className="pain-cell__num">02</span>
              <h3>"Qual o preço?", 40 vezes por dia.</h3>
              <p>Mesma pergunta, novo nome. Seu vendedor digita a mesma resposta
              até virar piloto automático — e perde a conversa que vale.</p>
            </div>
            <RepeatedAsks/>
          </div>

          <div className="pain-cell pain-cell--inbox reveal reveal-3">
            <div className="pain-cell__caption">
              <span className="pain-cell__num">03</span>
              <h3>7 em cada 10 mensagens não viram nada.</h3>
              <p>Sua caixa de entrada parece movimentada, mas a maioria são
              curiosos, perguntas soltas, gente que nunca volta.</p>
            </div>
            <AbandonedInbox/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   3) SOLUTION — flooded inbox → LUE → lead sheet
   ===================================================== */
function SolutionSection() {
  return (
    <section className="section section-solution" id="solucao">
      <div className="wrap">
        <div className="solution-head reveal">
          <p className="overline">O que entra. O que sai.</p>
          <h2>
            LUE filtra os <em>curiosos</em>.<br/>
            Seu vendedor só abre conversa com quem <span className="hl-yes">já quer comprar</span>.
          </h2>
          <p className="lede">
            LUE responde a primeira mensagem, mostra produto, captura nome, número e email.
            Você abre a conversa quando o cliente já tá pronto pra fechar.
          </p>
        </div>

        <div className="solution-flow reveal reveal-2">
          <div className="solution-flow__col solution-flow__col--before">
            <span className="solution-flow__hint">o que entra</span>
            <FloodedInbox/>
          </div>

          <div className="solution-flow__pipe">
            <div className="solution-flow__pipe-line"/>
            <div className="solution-flow__pipe-badge">
              <span className="dot"/>
              103 descartados · 21 prontos
            </div>
            <div className="solution-flow__pipe-line"/>
          </div>

          <div className="solution-flow__col solution-flow__col--after">
            <span className="solution-flow__hint">o que sai</span>
            <LeadSheet/>
          </div>
        </div>

        <p className="solution-foot reveal reveal-3">
          124 conversas viram <b>21 fichas prontas</b>. Fechamento triplica.
        </p>
      </div>
    </section>
  );
}

/* =====================================================
   4) HOW IT WORKS — 3 narrative steps with real UI per step
   ===================================================== */
function HowSection() {
  const steps = [
    {
      kicker: 'Passo 1 · 4 min',
      title: 'Cadastre seu catálogo.',
      body: 'Conecte via FácilZap ou importe um arquivo JSON com seus produtos. Cada peça, preço, tamanho e cor fica disponível pra IA responder na hora.',
      visual: <CatalogConfigured/>,
    },
    {
      kicker: 'Passo 2 · automático',
      title: 'Cliente chama a LUE no WhatsApp da loja.',
      body: 'Você divulga o WhatsApp da loja no Instagram, na bio e no story. O cliente manda mensagem e a LUE responde na hora — no app que ele já usa todo dia. (Também dá pra atender pelo link do chat no navegador.)',
      visual: <WhatsAppScreen/>,
    },
    {
      kicker: 'Passo 3 · automático',
      title: 'Mostra a peça e dispara a foto na hora.',
      body: 'O cliente pediu pra ver? A LUE acha o produto no catálogo e manda a foto, o preço e os tamanhos — e ainda responde as perguntas de sempre (Pix, troca, prazo de entrega). Igual a um bom vendedor faria.',
      visual: <ShowcaseVideo/>,
    },
    {
      kicker: 'Passo 4 · automático',
      title: 'Qualifica o interesse e captura o contato.',
      body: 'Quando o cliente demonstra que quer comprar, a LUE captura nome, número e email antes de encerrar. Só o lead pronto pra fechar passa pra frente.',
      visual: <CaptureConvo/>,
    },
    {
      kicker: 'Passo 5 · automático',
      title: 'Lead entra na fila do painel.',
      body: 'Assim que a IA registra o contato, o lead aparece automaticamente em ialue.com.br/leads — com nome, número, email e o resumo do que o cliente quer. Sem copiar, sem colar.',
      visual: <LeadPanelArrived/>,
    },
    {
      kicker: 'Passo 6 · você fecha',
      title: 'Vendedor lê o resumo e contacta para fechar.',
      body: 'O vendedor abre o painel, vê o resumo de interesse de cada lead e copia o número. Já sabe o que o cliente quer — é só entrar em contato e fechar.',
      visual: <LeadQueue/>,
    },
  ];
  return (
    <section className="section section-how" id="funciona">
      <div className="wrap">
        <div className="how-head reveal">
          <h2>Conecta de manhã. Recebe lead à noite.</h2>
          <p className="lede">
            Sem código, sem servidor, sem técnico pra contratar. Você mesmo faz, entre um atendimento e outro.
          </p>
        </div>

        <div className="how-steps">
          {steps.map((s, i) => (
            <article className={`how-step reveal reveal-${i+1}`} key={i} data-side={i%2===0?'l':'r'}>
              <div className="how-step__body">
                <span className="how-step__kicker">{s.kicker}</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <div className="how-step__visual">
                {s.visual}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   5) FEATURES — bento, mockup per feature, mixed sizes
   ===================================================== */
function FeaturesSection() {
  return (
    <section className="section section-features" id="capacidades">
      <div className="wrap">
        <div className="features-head reveal">
          <h2>Treinada para qualificar lead de moda.</h2>
          <p className="lede">
            Pergunta sobre seu produto, seu preço, seu prazo: ela responde. Pergunta fora disso: ela manda chamar uma pessoa. Sem inventar.
          </p>
        </div>

        <div className="bento">
          <div className="bento-cell bento-cell--xl reveal reveal-1">
            <div className="bento-cell__caption">
              <h3>Se não tem no seu catálogo, LUE diz que não tem.</h3>
              <p>Não inventa preço, tamanho ou prazo. Se a peça saiu de linha, ela oferece uma similar — sempre do <em>seu</em> estoque, nunca de fora.</p>
            </div>
            <FNoStock/>
          </div>

          <div className="bento-cell bento-cell--wide reveal reveal-2">
            <div className="bento-cell__caption">
              <h3>Do jeito que cliente fala. Ela entende.</h3>
              <p>Gíria, abreviação, frase quebrada — a LUE interpreta a intenção e encontra o produto certo.</p>
            </div>
            <FMulti/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-3">
            <div className="bento-cell__caption">
              <h3>Atende às 3 da madrugada com a mesma paciência.</h3>
            </div>
            <FClock/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-4">
            <div className="bento-cell__caption">
              <h3>Também atende no chat do navegador.</h3>
              <p>Cada loja ganha um link — o cliente clica e conversa com a LUE sem sair do navegador. Mesma IA, mesmo catálogo.</p>
            </div>
            <FBrowserChat/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-5">
            <div className="bento-cell__caption">
              <h3>Pergunta nome, número e email na hora certa da conversa.</h3>
            </div>
            <FName/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-6">
            <div className="bento-cell__caption">
              <h3>Plugada no FácilZap. Bling e Tray no roadmap.</h3>
            </div>
            <FFacilZap/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-1">
            <div className="bento-cell__caption">
              <h3>Manda a foto da peça na conversa.</h3>
              <p>Cliente pediu pra ver? A LUE dispara a foto do produto na hora, sem o vendedor procurar no computador.</p>
            </div>
            <FPhotos/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-2">
            <div className="bento-cell__caption">
              <h3>Responde as perguntas de sempre.</h3>
              <p>Pix, troca, prazo de entrega, parcelamento — a LUE resolve as dúvidas que o cliente sempre manda pro vendedor.</p>
            </div>
            <FFaq/>
          </div>

          <div className="bento-cell bento-cell--md reveal reveal-3">
            <div className="bento-cell__caption">
              <h3>"Blusinha estampada P pra trabalho" vira o produto certo.</h3>
            </div>
            <FSearch/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   6) BEFORE / AFTER — replaced by a "day-in-the-life" timeline
   ===================================================== */
function CompareSection() {
  return (
    <section className="section-lg dark section-day">
      <div className="wrap">
        <div className="day-head reveal">
          <p className="overline on-dark">O antes e o depois</p>
          <h2>
            Sua loja <span className="day-head__faded">sem LUE.</span>{' '}
            <span className="day-head__on">Com LUE.</span>
          </h2>
        </div>
        <div className="cmp reveal reveal-2">
          <div className="cmp-row cmp-head">
            <div className="cmp-c cmp-c--before">Sem LUE</div>
            <div className="cmp-c cmp-c--after">Com LUE</div>
          </div>
          {[
            ['Vendedor atende curiosos o dia inteiro', 'Vendedor abre só conversa qualificada'],
            ['Cliente manda às 23h, resposta só de manhã', 'LUE responde em segundos, qualquer hora'],
            ['Caixa cheia, vendas paradas', 'Menos mensagens, mais fechamento'],
          ].map((r, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-c cmp-c--before"><span className="cmp-x">×</span>{r[0]}</div>
              <div className="cmp-c cmp-c--after"><span className="cmp-v">✓</span>{r[1]}</div>
            </div>
          ))}
        </div>
        <p className="cmp-foot reveal reveal-3">
          Mesma equipe. Mesmo catálogo. A diferença é quem abre a primeira mensagem.
        </p>
      </div>
    </section>
  );
}

/* =====================================================
   7) FAQ — kept structurally, copy revised
   ===================================================== */
const FAQ_DATA = [
  { q: 'LUE substitui meu vendedor?', a: 'Não — e a gente nem quer que substitua. LUE faz a parte chata: responde pergunta repetida, mostra peça, coleta nome, número e email. Quando o cliente está pronto pra fechar, o lead entra na fila do seu painel. Quem fecha continua sendo gente.' },
  { q: 'Preciso saber programar?', a: 'Não. Você conecta o catálogo (FácilZap ou importação de JSON) numa tela, ativa o WhatsApp da loja e o link do chat, e divulga onde quiser. A maioria dos lojistas faz sozinho — quem precisa, tem onboarding ao vivo no primeiro dia.' },
  { q: 'Em quanto tempo vai pro ar?', a: 'Depende do tamanho do catálogo, mas a média é uma tarde. Conectou de manhã, está recebendo lead qualificado à noite.' },
  { q: 'E se LUE não souber responder?', a: 'Ela avisa que vai chamar uma pessoa e passa a conversa pro vendedor de plantão — com o histórico já carregado. LUE prefere passar a bola a inventar.' },
  { q: 'Funciona pra qual tipo de loja?', a: 'Hoje, lojas de moda (atacado e varejo) que vendem por chat e têm equipe comercial pequena. Outros segmentos chegam ao longo do ano. Se você vende outra coisa, manda mensagem — a gente avisa quando der pra atender.' },
  { q: 'Como vocês cobram?', a: 'Plano fixo mensal por loja, sem cobrança por mensagem nem por lead. Os primeiros 14 dias são grátis, sem cartão.' },
];
function FAQItem({ q, a, open, onClick }) {
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={onClick} aria-expanded={open}>
        <span>{q}</span>
        <span className="plus">{SecIcon.plus}</span>
      </button>
      <div className="faq-a">
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
}
function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section-faq" id="faq">
      <div className="wrap faq-wrap">
        <aside className="faq-aside reveal">
          <p className="overline">Dúvidas</p>
          <h2>Tem 30 segundos? <br/>Pergunta primeiro.</h2>
          <p className="lede">
            Se a resposta não tiver aqui, manda direto pro nosso WhatsApp.
            Quem responde é o time, não bot.
          </p>
          <a className="btn btn-ghost dark" href="#cta">
            Falar com a gente <span className="arrow">{SecIcon.arrowRight}</span>
          </a>
        </aside>
        <div className="faq reveal reveal-2">
          {FAQ_DATA.map((it, i) => (
            <FAQItem key={i} {...it} open={open === i} onClick={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   8) FINAL CTA — tightened copy, simpler chrome
   ===================================================== */
function FinalCTA() {
  return (
    <section className="cta-final" id="cta">
      <div className="wrap">
        <h2 className="reveal">
          Enquanto seu time dorme,<br/>
          tem cliente comprando do concorrente.
        </h2>
        <p className="sub reveal reveal-1">Conecta o catálogo. Cola o link. Recebe lead pronto.</p>
        <div className="cta-row reveal reveal-2">
          <a className="btn btn-white btn-lg" href="https://ialue.com.br/login" style={{minWidth:260}}>
            Ativar LUE agora <span className="arrow">{SecIcon.arrowRight}</span>
          </a>
          <span style={{color:'rgba(255,255,255,.75)',fontSize:14}}>ou <a href="#" style={{color:'#C4B5FD'}}>marca uma demo de 15min →</a></span>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="#" className="nav-logo" style={{color:'#fff'}}>
              <span className="mark"/>
              <span>LUE</span>
            </a>
            <p className="blurb">
              SDR com IA para lojas de moda que vendem por chat. Atende, qualifica
              e entrega lead pronto no seu painel.
            </p>
            <div className="socials">
              <a href="#" aria-label="Instagram">{SecIcon.ig}</a>
              <a href="#" aria-label="LinkedIn">{SecIcon.li}</a>
              <a href="#" aria-label="WhatsApp">{SecIcon.wa}</a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Produto</h4>
            <ul>
              <li><a href="#capacidades">Capacidades</a></li>
              <li><a href="#funciona">Como funciona</a></li>
              <li><a href="#">Preços</a></li>
              <li><a href="#">Integrações</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Empresa</h4>
            <ul>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contato</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="#">Privacidade</a></li>
              <li><a href="#">Termos</a></li>
              <li><a href="#">LGPD</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 LUE Labs · Feito em São Paulo</span>
          <span>contato@lue.ai</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, PainSection, SolutionSection, HowSection,
  FeaturesSection, CompareSection, FAQSection, FinalCTA, Footer, SecIcon,
});