// Longevium — LPR spotlight + how it works + pricing + CTA + footer

// ─────────────────────────────────────────────────────────────────────
// LPR SPOTLIGHT — the first protocol
// ─────────────────────────────────────────────────────────────────────
function LVProtocolSpotlight() {
  const t = useT();
  const isMobile = useIsMobile();
  const T = getTokens({ theme: 'light', palette: 'teal' });
  // Keyed by `id` (which lives in the translation dict) so reordering or
  // adding a domain doesn't desync icon/colour from text.
  const VISUAL_BY_ID = {
    metabolic: { i: <LVIcon.Activity size={20}/>, c: '#0d9488' },
    gut:       { i: <LVIcon.Apple size={20}/>,    c: '#65a30d' },
    mito:      { i: <LVIcon.Zap size={20}/>,      c: '#ca8a04' },
    inflam:    { i: <LVIcon.Flame size={20}/>,    c: '#c2410c' },
    hormone:   { i: <LVIcon.Brain size={20}/>,    c: '#7c3aed' },
    circadian: { i: <LVIcon.Moon size={20}/>,     c: '#1d4ed8' },
    body:      { i: <LVIcon.Dumbbell size={20}/>, c: '#0e7490' },
    behavior:  { i: <LVIcon.Target size={20}/>,   c: '#be185d' },
  };
  const FALLBACK_VISUAL = { i: <LVIcon.Sparkles size={20}/>, c: LV.teal700 };
  const domains = t.protocol.domains.map((d) => ({ ...d, ...(VISUAL_BY_ID[d.id] || FALLBACK_VISUAL) }));

  return (
    <LVSection id="protocolo" bg={LV.cream} style={{ paddingTop: isMobile ? 72 : 140 }}>
      <LVContainer>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: isMobile ? '0 auto 40px' : '0 auto 64px' }}>
          <LVKicker>{t.protocol.kicker}</LVKicker>
          <LVHeading style={{ marginTop: 20 }}>
            {t.protocol.title1}<br/>
            <span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.protocol.titleEm}</span>
          </LVHeading>
          <LVLead style={{ marginTop: 20 }}>
            {t.protocol.lead}
          </LVLead>
        </div>

        {/* 8 domain ring */}
        <div style={{
          background: LV.paper,
          border: `1px solid ${LV.border}`,
          borderRadius: 24, padding: isMobile ? 20 : 40,
          marginBottom: isMobile ? 36 : 48,
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
            gap: isMobile ? 12 : 16,
          }}>
            {domains.map((d, i) => (
              <div key={d.id} style={{
                padding: 20,
                background: LV.cream,
                border: `1px solid ${LV.border}`,
                borderRadius: 14,
                position: 'relative',
              }}>
                <span style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: `${d.c}15`, color: d.c,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 12,
                }}>{d.i}</span>
                <div style={{ fontSize: 11, color: LV.textMute, fontFamily: LV.fontMono, marginBottom: 4 }}>0{i+1}</div>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: LV.ink }}>{d.l}</div>
                <div style={{ fontSize: 12.5, color: LV.textMute, marginTop: 6, lineHeight: 1.5 }}>{d.desc}</div>
              </div>
            ))}
          </div>
        </div>

        {/* cycle composition */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.25fr',
          gap: isMobile ? 32 : 48,
          alignItems: 'center',
        }}>
          <div>
            <LVHeading size="md">
              {t.protocol.cycleTitle1}<span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.protocol.cycleTitleEm}</span>{t.protocol.cycleTitle2}
            </LVHeading>
            <LVLead size="sm" style={{ marginTop: 16 }}>
              {t.protocol.cycleLead}
            </LVLead>
            <div style={{ marginTop: 28, display: 'grid', gap: 12 }}>
              {t.protocol.phases.map((f, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '14px 18px',
                  background: LV.paper, border: `1px solid ${LV.border}`, borderRadius: 12,
                }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: LV.teal50, color: LV.teal700,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, fontWeight: 700, fontFamily: LV.fontMono,
                  }}>{i + 1}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: LV.textMute, letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 600 }}>{f.p}</div>
                    <div style={{ fontSize: 15, color: LV.ink, fontWeight: 600, marginTop: 2 }}>{f.l}</div>
                  </div>
                  <span style={{ fontFamily: LV.fontMono, fontSize: 12, color: LV.textMute }}>{f.d}</span>
                </div>
              ))}
            </div>
          </div>

          {/* score chart screenshot — domains screen */}
          <div style={{
            position: 'relative',
            display: 'flex', justifyContent: 'center',
            minWidth: 0,
            transform: isMobile ? 'none' : 'rotate(0.5deg)',
            filter: 'drop-shadow(0 30px 50px rgba(15,55,55,0.12))',
          }}>
            <ScreenFrame width={1280} height={760} scale={isMobile ? 0.26 : 0.55}>
              <AppShell T={T} screen="domains" title="Domínios clínicos" breadcrumbs={['Pacientes', 'Mariana', 'Domínios']}>
                <DomainsScreen T={T}/>
              </AppShell>
            </ScreenFrame>
          </div>
        </div>

        {/* future protocols hint */}
        <div style={{
          marginTop: isMobile ? 48 : 80,
          background: LV.paper, border: `1px dashed ${LV.borderStrong}`,
          borderRadius: 16, padding: isMobile ? 20 : 28,
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'space-between',
          gap: isMobile ? 16 : 24,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{
              width: 40, height: 40, borderRadius: 10,
              background: LV.creamWarm, color: LV.inkSoft,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <LVIcon.Layers size={20}/>
            </span>
            <div>
              <div style={{ fontSize: 11, color: LV.teal700, letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 700 }}>{t.protocol.futureKicker}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: LV.ink, marginTop: 4 }}>
                {t.protocol.futureTitle}
              </div>
              <div style={{ fontSize: 13.5, color: LV.textMute, marginTop: 4 }}>
                {t.protocol.futureSub}
              </div>
            </div>
          </div>
          <a href="#contato" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            color: LV.teal700, fontSize: 14, fontWeight: 600,
          }}>
            {t.protocol.futureCta} <LVIcon.Arrow size={14}/>
          </a>
        </div>
      </LVContainer>
    </LVSection>
  );
}

// ─────────────────────────────────────────────────────────────────────
// HOW IT WORKS — flow
// ─────────────────────────────────────────────────────────────────────
function LVHowItWorks() {
  const t = useT();
  const isMobile = useIsMobile();
  const STEP_ICONS = [
    <LVIcon.Plug size={20}/>,
    <LVIcon.Activity size={20}/>,
    <LVIcon.Stethoscope size={20}/>,
    <LVIcon.Shield size={20}/>,
    <LVIcon.Sparkles size={20}/>,
  ];
  const FALLBACK_STEP_ICON = <LVIcon.Sparkles size={20}/>;
  // If dict drift adds/removes steps, missing icons fall back instead of crashing.
  const steps = t.how.steps.map((s, i) => ({ ...s, icon: STEP_ICONS[i] || FALLBACK_STEP_ICON }));

  return (
    <LVSection id="como-funciona" bg={LV.creamWarm} style={{ paddingTop: isMobile ? 64 : 120, paddingBottom: isMobile ? 64 : 120 }} divider>
      <LVContainer>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.85fr 1.15fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'flex-start',
        }}>
          <div style={isMobile ? null : { position: 'sticky', top: 100 }}>
            <LVKicker>{t.how.kicker}</LVKicker>
            <LVHeading size="lg" style={{ marginTop: 20 }}>
              {t.how.title1}<br/>
              {t.how.title2}<span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.how.titleEm}</span>
            </LVHeading>
            <LVLead style={{ marginTop: 20 }}>
              {t.how.lead}
            </LVLead>
          </div>

          <div>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
                paddingBottom: 32, marginBottom: 32,
                borderBottom: i < steps.length - 1 ? `1px solid ${LV.border}` : 'none',
                position: 'relative',
              }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                  <span style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background: LV.paper, border: `1px solid ${LV.border}`,
                    color: LV.teal700,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {s.icon}
                  </span>
                  {i < steps.length - 1 ? (
                    <div style={{ width: 1, flex: 1, background: LV.borderStrong, minHeight: 40, opacity: 0.5 }}/>
                  ) : null}
                </div>
                <div>
                  <div style={{ fontFamily: LV.fontMono, fontSize: 12, color: LV.teal700, fontWeight: 600 }}>{s.n}</div>
                  <LVHeading size="sm" style={{ marginTop: 6 }}>{s.t}</LVHeading>
                  <LVLead size="sm" style={{ marginTop: 10, color: LV.textSoft }}>{s.d}</LVLead>
                </div>
              </div>
            ))}
          </div>
        </div>
      </LVContainer>
    </LVSection>
  );
}

// ─────────────────────────────────────────────────────────────────────
// PRICING / PLANS
// ─────────────────────────────────────────────────────────────────────
function LVPricing() {
  const t = useT();
  const isMobile = useIsMobile();
  // Featured/style flags are presentation-only; merge with translated content.
  // Default flag for any extra plan added in the dict (no crash on drift).
  const FLAGS = [
    { kindCta: 'secondary' },
    { featured: true, kindCta: 'dark' },
    { kindCta: 'secondary' },
  ];
  const FALLBACK_FLAG = { kindCta: 'secondary' };
  const plans = t.pricing.plans.map((p, i) => ({ ...p, ...(FLAGS[i] || FALLBACK_FLAG) }));

  return (
    <LVSection id="planos" bg={LV.cream} style={{ paddingTop: isMobile ? 64 : 120, paddingBottom: isMobile ? 64 : 120 }}>
      <LVContainer>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: isMobile ? '0 auto 40px' : '0 auto 64px' }}>
          <LVKicker>{t.pricing.kicker}</LVKicker>
          <LVHeading style={{ marginTop: 20 }}>
            {t.pricing.title1}<br/>
            <span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.pricing.titleEm}</span>
          </LVHeading>
          <LVLead style={{ marginTop: 20 }}>
            {t.pricing.lead}
          </LVLead>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 16 : 16,
        }}>
          {plans.map((p, i) => (
            <div key={p.kind} style={{
              background: p.featured ? LV.ink : LV.paper,
              color: p.featured ? LV.cream : LV.text,
              border: `1px solid ${p.featured ? LV.ink : LV.border}`,
              borderRadius: 20, padding: isMobile ? 24 : 32,
              display: 'flex', flexDirection: 'column', gap: 20,
              transform: !isMobile && p.featured ? 'translateY(-12px)' : 'none',
              boxShadow: p.featured ? '0 30px 60px -20px rgba(15,55,55,0.4)' : 'none',
              position: 'relative',
            }}>
              {p.featured ? (
                <span style={{
                  position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                  padding: '5px 14px', borderRadius: 999,
                  background: LV.teal500, color: LV.ink,
                  fontSize: 10.5, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                  boxShadow: '0 4px 12px rgba(15,55,55,0.25)',
                  whiteSpace: 'nowrap',
                }}>{t.pricing.featured}</span>
              ) : null}
              <div>
                <div style={{
                  fontSize: 11.5, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 700,
                  color: p.featured ? LV.teal300 : LV.teal700,
                }}>Longevium {p.kind}</div>
                <div style={{ fontSize: 12.5, color: p.featured ? 'rgba(250,248,243,0.55)' : LV.textMute, marginTop: 4 }}>{p.audience}</div>
              </div>

              <div style={{ paddingBottom: 16, borderBottom: `1px solid ${p.featured ? 'rgba(255,255,255,0.10)' : LV.border}` }}>
                <div style={{
                  fontFamily: LV.fontDisplay, fontSize: 56,
                  color: p.featured ? LV.cream : LV.ink,
                  lineHeight: 1, letterSpacing: -2,
                }}>{p.price}</div>
                <div style={{ fontSize: 12, color: p.featured ? 'rgba(250,248,243,0.55)' : LV.textMute, marginTop: 8 }}>{p.sub}</div>
              </div>

              <p style={{
                margin: 0, fontSize: 14, lineHeight: 1.55,
                color: p.featured ? 'rgba(250,248,243,0.78)' : LV.textSoft,
              }}>{p.desc}</p>

              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
                {p.features.map((f, idx) => (
                  <li key={idx} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13.5 }}>
                    <LVIcon.Check size={14} style={{ color: p.featured ? LV.teal300 : LV.teal600, flexShrink: 0, marginTop: 3 }}/>
                    <span style={{ color: p.featured ? 'rgba(250,248,243,0.92)' : LV.text }}>{f}</span>
                  </li>
                ))}
              </ul>

              <div style={{ marginTop: 'auto' }}>
                <LVButton
                  kind={p.featured ? 'primary' : p.kindCta}
                  size="md" full
                  style={p.featured ? { background: LV.teal500, borderColor: LV.teal500, color: LV.ink } : {}}
                  iconRight={<LVIcon.Arrow size={14}/>}
                >{p.cta}</LVButton>
              </div>
            </div>
          ))}
        </div>
      </LVContainer>
    </LVSection>
  );
}

// ─────────────────────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────────────────────
function LVFinalCTA() {
  const t = useT();
  const isMobile = useIsMobile();
  const BADGE_ICONS = [<LVIcon.Lock size={12}/>, <LVIcon.Shield size={12}/>, <LVIcon.Globe size={12}/>];
  return (
    <section id="contato" style={{
      padding: isMobile ? '64px 0' : '120px 0',
      background: `linear-gradient(180deg, ${LV.cream} 0%, ${LV.creamWarm} 100%)`,
      position: 'relative', overflow: 'hidden',
      maxWidth: '100vw',
    }}>
      {/* big serif background word */}
      <div style={{
        position: 'absolute', bottom: isMobile ? -20 : -40, left: '50%', transform: 'translateX(-50%)',
        fontFamily: LV.fontDisplay, fontSize: isMobile ? 140 : 380, color: LV.creamDeep,
        letterSpacing: isMobile ? -6 : -16, lineHeight: 0.8, fontStyle: 'italic',
        pointerEvents: 'none', whiteSpace: 'nowrap', opacity: 0.5,
      }}>
        longevium
      </div>

      <LVContainer style={{ position: 'relative', textAlign: 'center' }}>
        <LVKicker>{t.finalCta.kicker}</LVKicker>
        <LVHeading size="xl" style={{ marginTop: 24, maxWidth: 900, margin: '24px auto 0' }}>
          {t.finalCta.title1}<br/>
          {t.finalCta.title2}
        </LVHeading>
        <LVLead style={{ marginTop: 24, maxWidth: 560, margin: '24px auto 0' }}>
          {t.finalCta.lead}
        </LVLead>

        <div style={{
          display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12,
          marginTop: isMobile ? 32 : 40,
        }}>
          <LVButton kind="dark" size={isMobile ? 'md' : 'lg'} iconRight={<LVIcon.Arrow size={14}/>}>{t.finalCta.ctaPrimary}</LVButton>
          <LVButton kind="secondary" size={isMobile ? 'md' : 'lg'}>{t.finalCta.ctaSecondary}</LVButton>
        </div>

        <div style={{
          marginTop: isMobile ? 40 : 56,
          display: 'flex', justifyContent: 'center', flexWrap: 'wrap',
          gap: isMobile ? 16 : 32,
          fontSize: 12.5, color: LV.textMute,
        }}>
          {t.finalCta.badges.map((b, i) => (
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              {BADGE_ICONS[i] || null} {b}
            </span>
          ))}
        </div>
      </LVContainer>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────────────
function LVFooter() {
  const t = useT();
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: LV.ink, color: LV.cream, padding: isMobile ? '56px 0 28px' : '80px 0 32px',
    }}>
      <LVContainer>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : '1.4fr repeat(5, 1fr)',
          gap: isMobile ? 32 : 40,
          marginBottom: isMobile ? 40 : 64,
        }}>
          <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
            <LVBrand size={26} color={LV.cream}/>
            <p style={{
              marginTop: 18, fontSize: 13.5, color: 'rgba(250,248,243,0.6)',
              lineHeight: 1.6, maxWidth: 280,
            }}>
              {t.footer.tagline}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              {['LinkedIn', 'Instagram', 'YouTube'].map((s) => (
                <a key={s} href="#" style={{
                  padding: '8px 14px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.06)',
                  fontSize: 12, color: 'rgba(250,248,243,0.78)',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {t.footer.cols.map((c) => (
            <div key={c.t}>
              <div style={{
                fontSize: 11, letterSpacing: 1.3, textTransform: 'uppercase', fontWeight: 700,
                color: 'rgba(250,248,243,0.5)', marginBottom: 18,
              }}>{c.t}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 12 }}>
                {c.items.map((i) => (
                  <li key={i}><a href="#" style={{ fontSize: 13.5, color: 'rgba(250,248,243,0.82)' }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          alignItems: isMobile ? 'flex-start' : 'center',
          gap: isMobile ? 8 : 0,
          fontSize: 12, color: 'rgba(250,248,243,0.5)',
        }}>
          <span>{t.footer.copyright}</span>
          <span>{t.footer.made}</span>
        </div>
      </LVContainer>
    </footer>
  );
}

// expose
Object.assign(window, { LVProtocolSpotlight, LVHowItWorks, LVPricing, LVFinalCTA, LVFooter });