/* ══════════════════════════════════════════════════
   SECTIONS — the page as a story, one idea per chapter.

     01 hero          "Sua operação não fica mais no escuro."   cream
     02 experiência   app grande, operado pela rolagem           ink
     03 fluxo         motorista → Entregga → operação            surface
     04 rastreamento  sticky scene: movimento vira informação    cream
     05 geolocalização mapa cinematográfico                      cream-2
     06 evidência     o comprovante de uma entrega               surface
     07 automático    o app em segundo plano (+ diagnóstico)     cream
     08 operação      o painel — capítulo escuro                 ink
     09 vídeo         demonstração — ainda no escuro             ink-2
     10 ecossistema   Driver / Plataforma / Operação             cream
     11 benefícios    5 palavras, linhas finas                   surface
     12 contato       uma frase, um botão                        brand
        footer                                                  ink

   RULE: one message → one interface fragment → one motion.
   Phones never appear whole in pairs; each chapter shows only
   the piece of the product its idea needs.
══════════════════════════════════════════════════ */

/* ══════════════ CH.01 — HERO ══════════════ */
const Hero = ({ onDemo }) => (
  <section id="hero" className="hero-chap">
    <div className="hero-shell">
      <div className="hero-copy">
        <span className="kicker">Entregga Driver</span>
        <h1 className="h-display">Acompanhe cada entrega,<br className="br-md"/> do início ao fim.</h1>
        <p className="sub">O Entregga registra rotas, paradas e entregas enquanto o motorista trabalha.
          Sua equipe acompanha tudo pelo painel.</p>
        <div className="hero-ctas">
          <a href="#experiencia" className="btn-brand btn-shine btn-lg">Ver o app em ação</a>
          <button className="btn-ghost btn-lg" onClick={onDemo}>Falar com especialista</button>
        </div>
      </div>
      <HeroProductVisual/>
    </div>
  </section>
);

/* ══════════════ CH.02 — O APP EM AÇÃO ══════════════
   A full-height product chapter controlled by scroll. The phone enters
   once and remains stable while pre-rendered app screens crossfade, so
   the motion demonstrates the workflow without rebuilding the UI. */
const APP_JOURNEY = [
  {
    view:'tracking', label:'Rastreio ao vivo',
    title:'A rota aparece enquanto o motorista trabalha.',
    desc:'Pontos, distância, duração e último envio ficam visíveis sem interromper a operação.'
  },
  {
    view:'paused', label:'Controle imediato',
    title:'Pause e retome sem perder o histórico.',
    desc:'O motorista controla a coleta pelo próprio aplicativo, com o status sempre claro.'
  },
  {
    view:'diagnostics', label:'Saúde do rastreamento',
    title:'O app verifica se tudo está funcionando.',
    desc:'Permissões, bateria, GPS e envio em segundo plano são conferidos em um só lugar.'
  },
  {
    view:'settings', label:'Rotina configurada',
    title:'Horários e preferências ficam organizados.',
    desc:'A jornada de trabalho é configurada para o aplicativo acompanhar a rotina correta.'
  },
];

const PhoneExperienceSection = () => {
  const [ref, step] = useScene(APP_JOURNEY.length, { keepStepsInReducedMotion:true });
  const item = APP_JOURNEY[step];
  const stats = usePhoneSim(item.view === 'tracking');

  return (
    <section id="experiencia" ref={ref} className="phone-demo-scene" data-step={step}>
      <div className="phone-demo-stage">
        <div className="phone-demo-copy">
          <span className="kicker">O aplicativo em campo</span>
          <div key={step} className="phone-demo-copy-state" aria-live="polite">
            <span className="phone-demo-step">{item.label}</span>
            <h2 className="h-chap">{item.title}</h2>
            <p>{item.desc}</p>
          </div>
          <div className="phone-demo-progress" aria-label={`Etapa ${step + 1} de ${APP_JOURNEY.length}`}>
            {APP_JOURNEY.map((journey, i) => (
              <span key={journey.label} className={i === step ? 'on' : ''} aria-hidden="true"/>
            ))}
          </div>
          <span className="phone-demo-hint">Role para explorar o aplicativo</span>
        </div>

        <span className="phone-demo-mobile-hint" role="note"
              aria-label="Role para baixo para explorar o aplicativo">
          <span aria-hidden="true">Role</span>
          <i aria-hidden="true">↓</i>
        </span>

        <div className="phone-demo-device-wrap" aria-hidden="true">
          <div className="phone-demo-orbit"/>
          <div className="phone-demo-device">
            <PhoneFrame>
              {APP_JOURNEY.map((journey, i) => {
                const JourneyScreen = SCREENS[journey.view];
                return (
                  <div key={journey.view} className={`phone-demo-screen-state ${i === step ? 'is-active' : ''}`}>
                    <JourneyScreen stats={stats} setView={() => {}}/>
                  </div>
                );
              })}
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.03 — O FLUXO ══════════════ */
const FlowSection = () => {
  const [ref, vis] = useInView();
  return (
    <section id="fluxo" ref={ref} className="chap" style={{ background:T.surface }}>
      <div className="chap-inner">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">Como funciona</span>
          <h2 className="h-chap">O motorista segue a rota.<br className="br-md"/> O Entregga faz o registro.</h2>
          <p className="sub">As informações chegam ao painel automaticamente.</p>
        </div>
        <div className={`flow-grid rv ${vis?'in':''} s2`}>
          <div className="flow-item"><FragTrack/><div className="flow-cap">Motorista em rota</div></div>
          <div className="flow-conn" aria-hidden="true"/>
          <div className="flow-item">
            <div className="flow-node"><PPin sz={22} sw={2.4}/></div>
            <div className="flow-cap">Entregga registra</div>
          </div>
          <div className="flow-conn" aria-hidden="true"/>
          <div className="flow-item"><FragPanel/><div className="flow-cap">Equipe acompanha</div></div>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.03 — RASTREAMENTO (sticky scene) ══════════════
   The chapter is 300vh tall; the stage is sticky. Scroll scrubs
   through four reveals on a zoomed map: position → trail → times →
   the day's numbers. The trail literally draws with --p. */
const MV_STEPS = [
  { t:'Localização em tempo real', d:'A posição do motorista aparece no mapa durante a rota.' },
  { t:'Histórico do trajeto',      d:'O sistema guarda todo o caminho percorrido.' },
  { t:'Horário de cada atividade', d:'Chegadas, paradas e saídas ficam registradas com horário.' },
  { t:'Resumo do dia',             d:'Veja quilômetros rodados, pontos coletados e tempo de rota.' },
];

const MovementProductArt = ({ step }) => (
  <div className="movement-product-art" data-step={step}>
    <div className="movement-product-shot">
      <img src={IMAGES.trackingArt} alt="Entregador em motocicleta percorrendo uma avenida durante uma rota monitorada"/>
    </div>
    <div className="movement-product-label">
      <span className="live-dot"/><strong>{MV_STEPS[step].t}</strong>
    </div>
    <div className="movement-product-metrics">
      <span><strong>18,4</strong> km</span><i/>
      <span><strong>1.800</strong> pontos</span><i/>
      <span><strong>3h12</strong> de rota</span>
    </div>
  </div>
);

const MovementScene = () => {
  const [ref, step] = useScene(4);
  return (
    <section id="rastreamento" ref={ref} className="scene">
      <div className="scene-stage">
        <div className="mv-grid">
          <div className="mv-copy">
            <span className="kicker">Rastreamento</span>
            <h2 className="h-chap">Veja a rota enquanto<br className="br-md"/> ela acontece.</h2>
            <div className="mv-steps">
              {MV_STEPS.map((s, i) => (
                <div key={i} className={`step-line ${i<=step?'on':''} ${i===step?'cur':''}`}>
                  <div className="step-t">{s.t}</div>
                  <div className="step-d">{s.d}</div>
                </div>
              ))}
            </div>
          </div>
          <MovementProductArt step={step}/>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.04 — GEOLOCALIZAÇÃO ══════════════ */
const GeoSection = () => {
  const [ref, vis] = useInView(.15);
  const [mapRef, onScreen] = useOnScreen();
  return (
    <section id="geolocalizacao" ref={ref} className="chap" style={{ background:T.cream2 }}>
      <div className="chap-inner">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">Geolocalização</span>
          <h2 className="h-chap">Saiba onde o motorista esteve.</h2>
          <p className="sub">Cada ponto mostra localização e horário. Consulte o percurso completo quando precisar.</p>
        </div>
        <div ref={mapRef} className={`rv ${vis?'in':''} s2`}>
          <ProductRouteMap active={onScreen}/>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.05 — EVIDÊNCIA ══════════════ */
const EVID = [
  ['Foto do local',            'registrada no momento da entrega'],
  ['Geolocalização e horário', 'capturados automaticamente'],
  ['AR digital',               'assinatura de quem recebeu'],
  ['Protocolo no painel',      'disponível para consulta e auditoria'],
];

const EvidenceSection = () => {
  const [ref, vis] = useInView();
  return (
    <section id="evidencia" ref={ref} className="chap" style={{ background:T.surface }}>
      <div className="chap-inner chap-split">
        <div>
          <div className={`rv ${vis?'in':''}`}>
            <span className="kicker">Comprovação</span>
            <h2 className="h-chap">Comprove cada entrega.</h2>
            <p className="sub">Foto, localização, horário e assinatura ficam disponíveis no painel.</p>
          </div>
          <div className="evid-list">
            {EVID.map(([t, d], i) => (
              <div key={t} className={`evid-item rv ${vis?'in':''} s${i+1}`}>
                <span className="evid-check"><ICheck sz={13}/></span>
                <div><strong>{t}</strong><em>{d}</em></div>
              </div>
            ))}
          </div>
        </div>
        <div className={`chap-visual rv ${vis?'in':''} s2`}><EvidenceCard/></div>
      </div>
    </section>
  );
};

/* ══════════════ CH.06 — AUTOMÁTICO ══════════════
   Also where the Diagnóstico screen's story lives now, reduced
   to its point: if anything threatens the tracking, the app
   warns before it costs a delivery. */
const BackgroundSection = () => {
  const [ref, vis] = useInView();
  return (
    <section id="automatico" ref={ref} className="chap" style={{ background:T.cream }}>
      <div className="chap-inner chap-split chap-split-rev">
        <div className={`chap-visual rv ${vis?'in':''} s2`}><NotificationPhone/></div>
        <div>
          <div className={`rv ${vis?'in':''}`}>
            <span className="kicker">Automático</span>
            <h2 className="h-chap">O registro acontece em segundo plano.</h2>
            <p className="sub">O motorista segue a rota normalmente. O Entregga coleta as informações
              sem exigir atualizações manuais.</p>
          </div>
          <div className={`diag-note rv ${vis?'in':''} s3`}>
            <div className="diag-note-head">Se o rastreamento parar, o app avisa na hora.</div>
            {[['Permissão de localização', PPin], ['Otimização de bateria', PBattChg], ['Inicialização automática', PAlarm]].map(([t, I]) => (
              <div key={t} className="diag-note-row">
                <span className="diag-note-ic"><I sz={13}/></span>{t}
                <span className="diag-note-ok"><PCheck sz={9}/></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.07 — A OPERAÇÃO (dark) ══════════════ */
const OperationSection = () => {
  const [ref, vis] = useInView(.1);
  const [tab, setTab] = useState(0);
  const screens = [
    { label:'Visão Geral', src:IMAGES.dash,     cap:'90 motoristas em campo e 4.546 entregas em um único painel' },
    { label:'Rotas',       src:IMAGES.rotas,    cap:'8.560 pontos capturados em um dia de rota, disponíveis para consulta' },
    { label:'Evidências',  src:IMAGES.detail2,  cap:'fotos, assinaturas, AR digital e protocolos organizados por entrega' },
    { label:'Confirmação', src:IMAGES.confirm,  cap:'GPS comparado ao endereço, com registro feito a 94 metros do local' },
    { label:'Histórico',   src:IMAGES.timeline, cap:'histórico completo de cada entrega' },
  ];
  return (
    <section id="operacao" ref={ref} className="chap chap-dark">
      <div className="chap-inner">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">A operação</span>
          <h2 className="h-chap">Tudo o que acontece na rua chega ao painel.</h2>
          <p className="sub">Rotas, entregas, evidências e indicadores ficam organizados em um só lugar.
            Ninguém precisa preencher tudo à mão.</p>
        </div>
        <div className={`op-tabs tab-scroller rv ${vis?'in':''} s1`}>
          {screens.map((s, i) => (
            <button key={s.label} className={i===tab?'on':''} onClick={() => setTab(i)}>{s.label}</button>
          ))}
        </div>
        <div className={`op-frame rv ${vis?'in':''} s2`}>
          <div className="op-bar" aria-hidden="true"><span/><span/><span/></div>
          <div key={tab} className="dash-viewport" style={{ animation:'tabIn .4s cubic-bezier(.16,1,.3,1) both' }}>
            <img src={screens[tab].src} alt={screens[tab].label}/>
          </div>
        </div>
        <div className="dash-hint"><span aria-hidden="true">↔</span> Arraste para explorar o painel</div>
        <div className="op-cap"><strong>{screens[tab].label}:</strong> {screens[tab].cap}</div>
      </div>
    </section>
  );
};

/* ══════════════ CH.08 — VÍDEO (dark) ══════════════
   The player is a stage, not an embed dropped into the page.
   With VIDEO_URL unset the play button opens an invitation to a
   live demo instead of a dead end. */
const VideoSection = ({ onDemo }) => {
  const [ref, vis] = useInView(.15);
  const [open, setOpen] = useState(false);
  const has = typeof VIDEO_URL === 'string' && VIDEO_URL.length > 0;
  return (
    <section id="video" ref={ref} className="chap chap-dark chap-dark-2">
      <div className="chap-inner">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">Demonstração</span>
          <h2 className="h-chap">Veja como o Entregga funciona.</h2>
        </div>
        <div className={`video-stage rv ${vis?'in':''} s1`}>
          {open && has
            ? <iframe className="video-embed" src={VIDEO_URL} title="Apresentação do Entregga"
                      allow="autoplay; fullscreen; picture-in-picture" allowFullScreen/>
            : <>
                <img className="video-poster" src={IMAGES.dash} alt="" aria-hidden="true"/>
                <div className="video-shade" aria-hidden="true"/>
                {!open && (
                  <button className="play-btn" onClick={() => setOpen(true)} aria-label="Assistir à apresentação">
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5z"/></svg>
                  </button>
                )}
                <div className="video-caption">Apresentação · Entregga Driver</div>
              </>}
          {open && !has && (
            <div className="video-soon">
              <div className="video-soon-t">O vídeo ainda não está disponível.</div>
              <button className="btn-on-brand btn-lg" onClick={onDemo}>Ver uma demonstração ao vivo</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.09 — ECOSSISTEMA ══════════════ */
const ECO = [
  ['Entregga Driver',     'Registra rotas, paradas e entregas durante o trabalho.'],
  ['Plataforma Entregga', 'Organiza rotas, evidências, histórico e indicadores em um só lugar.'],
  ['Sua operação',        'Acompanha o campo e consulta os registros quando precisar.'],
];

const EcosystemSection = () => {
  const [ref, vis] = useInView();
  return (
    <section id="ecossistema" ref={ref} className="chap" style={{ background:T.cream }}>
      <div className="chap-inner">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">Aplicativo e painel</span>
          <h2 className="h-chap">O aplicativo registra. O painel organiza.</h2>
        </div>
        <div className={`eco-grid rv ${vis?'in':''} s1`}>
          {ECO.map(([t, d], i) => (
            <div key={t} className="eco-col">
              <span className="eco-num">{String(i+1).padStart(2,'0')}</span>
              <div className="eco-name">{t}</div>
              <p className="eco-desc">{d}</p>
            </div>
          ))}
        </div>
        <p className={`eco-note rv ${vis?'in':''} s3`}>
          Integração via API REST, gestão de várias filiais e recursos para atender à LGPD.
        </p>
      </div>
    </section>
  );
};

/* ══════════════ CH.10 — BENEFÍCIOS ══════════════ */
const BENS = [
  ['Visibilidade',    'Acompanhe o que está acontecendo em campo em tempo real.'],
  ['Rastreabilidade', 'Consulte o trajeto e as atividades de cada motorista.'],
  ['Comprovação',     'Tenha foto, localização, horário e assinatura de cada entrega.'],
  ['Automação',       'O app registra a rota sem exigir atualizações do motorista.'],
  ['Controle',        'Encontre as informações que precisa para decidir com segurança.'],
];

const BenefitsSection = () => {
  const [ref, vis] = useInView(.08);
  return (
    <section id="beneficios" ref={ref} className="chap" style={{ background:T.surface }}>
      <div className="chap-inner chap-inner-narrow">
        <div className={`chap-head rv ${vis?'in':''}`}>
          <span className="kicker">Na prática</span>
          <h2 className="h-chap">Mais controle para a sua equipe.</h2>
        </div>
        <div className="ben-list">
          {BENS.map(([t, d], i) => (
            <div key={t} className={`ben-row rv ${vis?'in':''} s${i+1}`}>
              <div className="ben-word"><span className="ben-num">{String(i+1).padStart(2,'0')}</span>{t}</div>
              <p className="ben-copy">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ══════════════ CH.11 — CTA FINAL ══════════════ */
const StoreBtn = ({ store }) => (
  <button className="btn-ghost-on-brand" style={{ padding:'13px 26px', borderRadius:T.rBtn, fontSize:15,
                                                  display:'flex', alignItems:'center', gap:12, fontFamily:'inherit' }}>
    {store==='apple'
      ? <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
      : <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m3 20.5.01-17c0-.83.93-1.3 1.6-.8l14 8.5c.6.37.6 1.23 0 1.6l-14 8.5c-.67.5-1.61.03-1.61-.8z"/></svg>}
    <div style={{ textAlign:'left' }}>
      <div style={{ fontSize:10, opacity:.75, letterSpacing:'.05em', textTransform:'uppercase' }}>{store==='apple'?'Disponível na':'Disponível no'}</div>
      <div style={{ fontWeight:700 }}>{store==='apple'?'App Store':'Google Play'}</div>
    </div>
  </button>
);

const FinalCTA = ({ onDemo }) => {
  const [ref, vis] = useInView();
  return (
    <section id="contato" ref={ref} className="chap" style={{ background:T.brand }}>
      <div className={`chap-inner rv ${vis?'in':''}`} style={{ maxWidth:760, textAlign:'center' }}>
        <h2 className="h-chap" style={{ color:'#fff' }}>Quer acompanhar sua operação com mais clareza?</h2>
        <p className="sub" style={{ color:'rgba(255,255,255,.88)', margin:'18px auto 34px' }}>
          Fale com nossa equipe e veja como o Entregga pode funcionar na sua rotina.
        </p>
        <div className="hero-ctas" style={{ justifyContent:'center', marginBottom:34 }}>
          <button className="btn-on-brand btn-lg" onClick={onDemo}>Agendar uma demonstração</button>
        </div>
        <div className="store-btns" style={{ display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap' }}>
          <StoreBtn store="apple"/><StoreBtn store="google"/>
        </div>
      </div>
    </section>
  );
};

/* ══════════════ FOOTER ══════════════
   The dark footer is also where the original white logo artwork
   works as-is, with no recoloring. */
const Footer = () => (
  <footer id="footer" style={{ background:T.ink, padding:'64px 32px 30px' }}>
    <div style={{ maxWidth:1180, margin:'0 auto' }}>
      <div className="foot-grid" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start',
                                          gap:48, marginBottom:44, flexWrap:'wrap' }}>
        <div style={{ maxWidth:380 }}>
          <img src={IMAGES.logo} alt="entregga" style={{ height:32, marginBottom:18, display:'block' }}/>
          <p style={{ fontSize:14, color:'rgba(255,255,255,.62)', lineHeight:1.7 }}>
            Rastreamento, comprovantes e informações organizadas para operações de entrega.
          </p>
        </div>
        <div className="foot-support" style={{ textAlign:'right' }}>
          <div style={{ fontSize:11, fontWeight:700, color:'#fff', marginBottom:10, textTransform:'uppercase', letterSpacing:'.1em' }}>Suporte</div>
          <a href={WA_URL} target="_blank" rel="noopener noreferrer" className="wa-link"
             style={{ fontSize:15, color:T.wa, textDecoration:'none', fontWeight:700,
                      display:'inline-flex', alignItems:'center', gap:7, minHeight:44, transition:'opacity .18s' }}>
            <WAIco sz={16}/> Fale Conosco
          </a>
        </div>
      </div>
      <div className="foot-bar" style={{ borderTop:'1px solid rgba(255,255,255,.13)', paddingTop:22, display:'flex',
                    justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:8 }}>
        <span style={{ fontSize:13, color:'rgba(255,255,255,.45)' }}>© 2026 entregga. Todos os direitos reservados.</span>
        <span style={{ fontSize:13, color:'rgba(255,255,255,.45)' }}>Tecnologia para operações de entrega.</span>
      </div>
    </div>
  </footer>
);