// Longevium — Landing sections (hero + product split + audiences)

// ═════════════════════════════════════════════════════════════════════
// HERO
// ═════════════════════════════════════════════════════════════════════
function LVHero() {
  const t = useT();
  const isMobile = useIsMobile();
  const lp = t.hero.leadParts;
  return (
    <section id="top" style={{
      position: 'relative',
      paddingTop: isMobile ? 32 : 80, paddingBottom: isMobile ? 48 : 80,
      background: `linear-gradient(180deg, ${LV.cream} 0%, ${LV.cream} 60%, ${LV.creamWarm} 100%)`,
      overflow: 'hidden',
      maxWidth: '100vw',
    }}>
      {/* soft radial glow */}
      <div style={{
        position: 'absolute', top: -120, right: -200, width: 720, height: 720,
        background: `radial-gradient(circle, ${LV.teal100} 0%, transparent 65%)`,
        opacity: 0.6, pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', bottom: -240, left: -160, width: 640, height: 640,
        background: `radial-gradient(circle, ${LV.creamDeep} 0%, transparent 70%)`,
        opacity: 0.7, pointerEvents: 'none',
      }}/>

      <LVContainer style={{ position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.15fr 0.85fr',
          gap: isMobile ? 40 : 56,
          alignItems: 'center',
        }}>
          {/* left — copy */}
          <div style={{ position: 'relative', zIndex: 2 }}>
            <LVKicker>{t.hero.kicker}</LVKicker>

            <LVHeading as="h1" size="xl" style={{ marginTop: 24, fontSize: 'clamp(44px, 5vw, 76px)' }}>
              {t.hero.titlePart1}<span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.hero.titleEm1}</span>{t.hero.titlePart2}<span style={{ fontStyle: 'italic' }}>{t.hero.titleEm2}</span>{t.hero.titleTail}
            </LVHeading>

            <LVLead size="lg" style={{ marginTop: 28, maxWidth: 560 }}>
              {lp[0] ?? ''}<b style={{ color: LV.ink, fontWeight: 600 }}>{lp[1] ?? ''}</b>{lp[2] ?? ''}<b style={{ color: LV.ink, fontWeight: 600 }}>{lp[3] ?? ''}</b>{lp[4] ?? ''}<b style={{ color: LV.ink, fontWeight: 600 }}>{lp[5] ?? ''}</b>{lp[6] ?? ''}
            </LVLead>

            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <LVButton kind="dark" size="lg" iconRight={<LVIcon.Arrow/>}>{t.hero.ctaPrimary}</LVButton>
              <LVButton kind="secondary" size="lg">{t.hero.ctaSecondary}</LVButton>
            </div>

            <div style={{
              display: isMobile ? 'grid' : 'flex',
              gridTemplateColumns: isMobile ? 'repeat(3, 1fr)' : undefined,
              flexWrap: isMobile ? undefined : 'wrap',
              alignItems: 'start',
              gap: isMobile ? 12 : 32,
              marginTop: isMobile ? 40 : 56,
              paddingTop: isMobile ? 24 : 32, borderTop: `1px solid ${LV.border}`,
            }}>
              {t.hero.stats.map((s, i) => (
                <div key={i} style={{
                  minWidth: 0,
                  textAlign: isMobile ? 'center' : 'left',
                }}>
                  <div style={{
                    fontFamily: LV.fontDisplay, fontSize: isMobile ? 30 : 38,
                    color: LV.ink, lineHeight: 1, letterSpacing: -1,
                  }}>{s.v}</div>
                  <div style={{
                    fontSize: isMobile ? 11.5 : 12.5, color: LV.textMute,
                    marginTop: 6, letterSpacing: 0.2, lineHeight: 1.35,
                    whiteSpace: isMobile ? 'pre-line' : 'normal',
                    overflowWrap: 'anywhere',
                  }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* right — composition of mobile + desktop */}
          <LVHeroComposition/>
        </div>
      </LVContainer>
    </section>
  );
}

function LVHeroComposition() {
  // Layered: small mobile in front, slice of desktop dashboard behind.
  // On mobile: a single centered phone (Score) + safety chip below it.
  const t = useT();
  const isMobile = useIsMobile();
  const T = getTokens({ theme: 'light', palette: 'teal' });

  if (isMobile) {
    return (
      <div style={{
        position: 'relative',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20,
      }}>
        <div style={{
          width: 280, height: 580,
          borderRadius: 38,
          background: '#000',
          padding: 8,
          boxShadow: '0 30px 50px -10px rgba(15,55,55,0.25), 0 0 0 1px #1a1a1a',
        }}>
          <div style={{
            width: '100%', height: '100%',
            borderRadius: 30,
            overflow: 'hidden',
            background: LV.paper,
            position: 'relative',
          }}>
            <div className="lv-scaled" style={{
              width: 402, height: 840,
              transform: 'scale(0.66)', transformOrigin: 'top left',
            }}>
              <PtScoreScreen T={makeMobileT()}/>
            </div>
          </div>
        </div>

        <div style={{
          background: LV.paper,
          border: `1px solid ${LV.border}`,
          borderRadius: 14,
          padding: '12px 14px',
          boxShadow: '0 12px 24px -10px rgba(15,55,55,0.14)',
          display: 'flex', alignItems: 'center', gap: 10,
          maxWidth: 320,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 9,
            background: LV.teal50,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: LV.teal700, flexShrink: 0,
          }}>
            <LVIcon.Shield size={16}/>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: LV.ink }}>{t.hero.safetyTitle}</div>
            <div style={{ fontSize: 11, color: LV.textMute, marginTop: 1, lineHeight: 1.35 }}>
              {t.hero.safetyDesc}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ position: 'relative', minHeight: 640, overflow: 'visible' }}>
      {/* desktop slice — back */}
      <div style={{
        position: 'absolute', right: -40, top: 30,
        transform: 'rotate(-2deg)',
        filter: 'drop-shadow(0 40px 60px rgba(15,55,55,0.16))',
      }}>
        <ScreenFrame width={1280} height={760} scale={0.42} radius={12}>
          <AppShell T={T} screen="patient" title="Mariana Corrêa" breadcrumbs={['Pacientes', 'Mariana Corrêa']}>
            <PatientOverviewScreen T={T}/>
          </AppShell>
        </ScreenFrame>
      </div>

      {/* mobile — front */}
      <div style={{
        position: 'absolute', left: 0, bottom: 0,
        transform: 'rotate(-3deg)',
        filter: 'drop-shadow(0 30px 50px rgba(15,55,55,0.22))',
      }}>
        <div style={{
          width: 280, height: 580,
          borderRadius: 38,
          background: '#000',
          padding: 8,
          boxShadow: '0 0 0 2px #1a1a1a, 0 0 0 4px #2a2a2a',
        }}>
          <div style={{
            width: '100%', height: '100%',
            borderRadius: 30,
            overflow: 'hidden',
            background: LV.paper,
            position: 'relative',
          }}>
            <div className="lv-scaled" style={{
              width: 402, height: 840,
              transform: 'scale(0.66)', transformOrigin: 'top left',
            }}>
              <PtScoreScreen T={makeMobileT()}/>
            </div>
          </div>
        </div>
      </div>

      {/* floating safety chip */}
      <div style={{
        position: 'absolute', right: 40, bottom: 40,
        background: LV.paper,
        border: `1px solid ${LV.border}`,
        borderRadius: 14,
        padding: '14px 16px',
        boxShadow: '0 20px 40px -12px rgba(15,55,55,0.18)',
        display: 'flex', alignItems: 'center', gap: 12,
        maxWidth: 280,
        transform: 'rotate(2deg)',
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: 10,
          background: LV.teal50,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: LV.teal700, flexShrink: 0,
        }}>
          <LVIcon.Shield size={18}/>
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: LV.ink }}>{t.hero.safetyTitle}</div>
          <div style={{ fontSize: 11.5, color: LV.textMute, marginTop: 2, lineHeight: 1.4 }}>
            {t.hero.safetyDesc}
          </div>
        </div>
      </div>
    </div>
  );
}

// helper — mobile theme (matches patient-mobile-system)
function makeMobileT() {
  return PM; // PM is the mobile design system tokens object exported by patient-mobile-system.jsx
}

// ═════════════════════════════════════════════════════════════════════
// Logo strip / trust band
// ═════════════════════════════════════════════════════════════════════
function LVTrustBand() {
  const t = useT();
  const items = ['Albert Einstein', 'HCor', 'Sírio-Libanês', 'Oswaldo Cruz', 'BP — A Beneficência', 'Dasa', 'Fleury', 'Apple Health', 'Oura', 'Libre 3', 'Withings', 'Apple Health'];
  return (
    <div style={{
      padding: '40px 0',
      borderTop: `1px solid ${LV.border}`,
      borderBottom: `1px solid ${LV.border}`,
      background: LV.paper,
      overflow: 'hidden',
    }}>
      <LVContainer narrow>
        <div style={{
          fontSize: 12, color: LV.textMute, textAlign: 'center', letterSpacing: 1.4,
          textTransform: 'uppercase', fontWeight: 600, marginBottom: 24,
        }}>
          {t.trust.caption}
        </div>
      </LVContainer>
      <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 8%, black 92%, transparent)' }}>
        <div className="lv-marquee" style={{ display: 'flex', gap: 64, whiteSpace: 'nowrap', width: 'max-content' }}>
          {[...items, ...items].map((t, i) => (
            <span key={i} style={{
              fontFamily: LV.fontDisplay,
              fontSize: 26, color: LV.textMute, letterSpacing: -0.5,
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════
// PRODUTO — Care + Protocols (split)
// ═════════════════════════════════════════════════════════════════════
function LVProduct() {
  const t = useT();
  const isMobile = useIsMobile();
  const T = getTokens({ theme: 'light', palette: 'teal' });
  return (
    <LVSection id="produto" bg={LV.cream}>
      <LVContainer>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: isMobile ? '0 auto 40px' : '0 auto 64px' }}>
          <LVKicker>{t.product.kicker}</LVKicker>
          <LVHeading style={{ marginTop: 20 }}>
            {t.product.title1}<br/>
            <span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.product.titleEm}</span>
          </LVHeading>
          <LVLead style={{ marginTop: 20 }}>
            {t.product.lead}
          </LVLead>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 16 : 24,
          alignItems: 'stretch',
        }}>
          {/* CARE */}
          <ProductCard
            badge="Longevium Care"
            kind="open"
            title={t.product.care.title}
            desc={t.product.care.desc}
            features={t.product.care.features}
            screen={
              <ScreenFrame width={1280} height={760} scale={isMobile ? 0.20 : 0.46} radius={10}>
                <AppShell T={T} screen="exams" title="Exames" breadcrumbs={['Pacientes', 'Mariana', 'Exames']}>
                  <ExamsScreen T={T}/>
                </AppShell>
              </ScreenFrame>
            }
            cta={t.product.care.cta}
          />

          {/* PROTOCOLS */}
          <ProductCard
            badge="Longevium Protocols"
            kind="closed"
            title={t.product.protocols.title}
            desc={t.product.protocols.desc}
            features={t.product.protocols.features}
            screen={
              <ScreenFrame width={1280} height={760} scale={isMobile ? 0.20 : 0.46} radius={10}>
                <AppShell T={T} screen="safety" title="Safety Engine" breadcrumbs={['Pacientes', 'Mariana', 'Safety Engine']}>
                  <SafetyEngineScreen T={T}/>
                </AppShell>
              </ScreenFrame>
            }
            cta={t.product.protocols.cta}
          />
        </div>
      </LVContainer>
    </LVSection>
  );
}

function ProductCard({ badge, kind, title, desc, features, screen, cta }) {
  const accent = kind === 'closed' ? LV.teal700 : LV.inkSoft;
  return (
    <div style={{
      background: LV.paper,
      border: `1px solid ${LV.border}`,
      borderRadius: 20,
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 24,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%', background: accent,
        }}/>
        <span style={{
          fontSize: 12.5, fontWeight: 700, letterSpacing: 1.2,
          textTransform: 'uppercase', color: accent,
        }}>
          {badge}
        </span>
      </div>

      <LVHeading size="md">{title}</LVHeading>

      <LVLead size="sm" style={{ color: LV.textSoft }}>{desc}</LVLead>

      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 12 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14, color: LV.text }}>
            <span style={{
              flexShrink: 0, width: 18, height: 18, borderRadius: '50%',
              background: LV.teal50, color: LV.teal700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginTop: 1,
            }}>
              <LVIcon.Check size={11}/>
            </span>
            {f}
          </li>
        ))}
      </ul>

      <div style={{
        marginTop: 'auto', padding: 16,
        background: LV.cream, borderRadius: 14,
        border: `1px solid ${LV.border}`,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
        minHeight: 380, position: 'relative', overflow: 'hidden',
        minWidth: 0,
      }}>
        {screen}
      </div>

      <a href="#protocolo" style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontSize: 14, fontWeight: 600, color: accent,
      }}>
        {cta} <LVIcon.Arrow size={14}/>
      </a>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════
// AUDIENCE — segmented (Pacientes | Médicos | Empresas)
// ═════════════════════════════════════════════════════════════════════
function LVAudienceSwitch() {
  const t = useT();
  const isMobile = useIsMobile();
  const T = getTokens({ theme: 'light', palette: 'teal' });
  const [tab, setTab] = React.useState('pacientes');

  const ICONS = { pacientes: <LVIcon.User size={14}/>, medicos: <LVIcon.Stethoscope size={14}/>, empresas: <LVIcon.Building size={14}/> };
  const TABS = t.audience.tabs.map((entry) => ({ ...entry, icon: ICONS[entry.id] }));

  return (
    <LVSection id="pacientes" style={{ paddingTop: isMobile ? 56 : 100, paddingBottom: isMobile ? 32 : 60 }}>
      <LVContainer>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: isMobile ? '0 auto 28px' : '0 auto 40px' }}>
          <LVKicker>{t.audience.kicker}</LVKicker>
          <LVHeading style={{ marginTop: 20 }}>
            {t.audience.title1}<br/>
            <span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.audience.titleEm}</span>
          </LVHeading>
        </div>

        {/* tab strip — centered when fits, horizontally scrollable when it overflows */}
        <div style={{
          display: 'flex', justifyContent: 'safe center',
          margin: isMobile ? '0 -20px 32px' : '0 -20px 56px',
          overflowX: 'auto',
          WebkitOverflowScrolling: 'touch',
          padding: '0 20px',
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
        }}>
          <div style={{
            display: 'inline-flex', gap: 6,
            padding: 6,
            background: LV.creamWarm,
            border: `1px solid ${LV.border}`,
            borderRadius: 999,
            flexShrink: 0,
          }}>
            {TABS.map((entry) => {
              const active = tab === entry.id;
              return (
                <button key={entry.id} onClick={() => {
                  setTab(entry.id);
                  const el = document.getElementById(entry.id);
                  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: isMobile ? '8px 16px' : '10px 22px', borderRadius: 999,
                  border: 'none', cursor: 'pointer',
                  fontSize: isMobile ? 13 : 14, fontWeight: 600,
                  background: active ? LV.ink : 'transparent',
                  color: active ? LV.cream : LV.textSoft,
                  whiteSpace: 'nowrap',
                  transition: 'background .15s, color .15s',
                }}>
                  {entry.icon}{entry.label}
                </button>
              );
            })}
          </div>
        </div>
      </LVContainer>

      {/* AUDIENCES — only AudienceDoctors needs the design tokens (T) for embedded LPR screens */}
      <AudiencePatients/>
      <AudienceDoctors T={T}/>
      <AudienceCompanies/>
    </LVSection>
  );
}

// expose
Object.assign(window, { LVHero, LVTrustBand, LVProduct, LVAudienceSwitch });