// KineSuite landing — section components.
// Imports nothing — relies on globals: LANDING_COPY, LANDING_SCALES,
// LANDING_CAT_LABEL, LandingMark, LandingBrandIcon, LandingWordmark, LandingPhone,
// LandingCatalogScreen.

// ─────────────────────────────────────────────────────────────
// Eyebrow — small mono label that introduces each section
// ─────────────────────────────────────────────────────────────
function Eyebrow({ children, color }) {
  return (
    <div className="eyebrow" style={color ? { color } : null}>
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Store badges — official Apple / Google marketing assets (local)
// ─────────────────────────────────────────────────────────────
const STORE_BADGES = {
  apple: {
    src: 'assets/badges/app-store-badge.svg',
    label: { es: 'Consíguelo en el App Store', en: 'Download on the App Store' },
  },
  google: {
    en: {
      src: 'assets/badges/google-play-badge.png',
      label: 'Get it on Google Play',
    },
    es: {
      src: 'assets/badges/google-play-badge-es.png',
      label: 'Disponible en Google Play',
    },
  },
};

function storeBadgeMeta(kind, lang) {
  const locale = lang === 'es' ? 'es' : 'en';
  if (kind === 'apple') {
    const b = STORE_BADGES.apple;
    return { src: b.src, label: b.label[locale] };
  }
  return STORE_BADGES.google[locale];
}

function StoreBadge({ kind, lang, comingSoon, soonLabel }) {
  const badge = storeBadgeMeta(kind, lang);
  const ariaLabel = comingSoon ? `${soonLabel} — ${badge.label}` : badge.label;
  const className = `badge-store badge-store--${kind}${comingSoon ? ' badge-store--soon' : ''}`;
  const img = <img src={badge.src} alt="" decoding="async" />;
  if (comingSoon) {
    return (
      <span className={className} role="img" aria-label={ariaLabel}>
        {img}
      </span>
    );
  }
  return (
    <a href="#" className={className} aria-label={ariaLabel}>
      {img}
    </a>
  );
}

function StoreBadges({ lang, t, comingSoon = true, onDark = false }) {
  const soonLabel = t?.storeComingSoon ?? (lang === 'es'
    ? 'Próximamente en App Store y Google Play'
    : 'Coming soon on App Store and Google Play');
  return (
    <div className={`store-badges-wrap${onDark ? ' store-badges-wrap--on-dark' : ''}`}>
      {comingSoon && (
        <p className="store-badges-soon">{soonLabel}</p>
      )}
      <div className="store-badges">
        <StoreBadge kind="apple" lang={lang} comingSoon={comingSoon} soonLabel={soonLabel} />
        <StoreBadge kind="google" lang={lang} comingSoon={comingSoon} soonLabel={soonLabel} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────
function LandingNav({ t, lang, setLang, theme, setTheme }) {
  const compareLabel = lang === 'es' ? 'Comparativa' : 'Comparison';
  return (
    <div className="nav-wrap">
      <div className="nav">
        <a href="#top" className="nav-brand" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <LandingBrandIcon size={32} />
          <LandingWordmark size={20} />
        </a>

        <div className="nav-links">
          <a href="#catalogo">{t.navScales}</a>
          <a href="#how">{t.navHow}</a>
          <a href="#comparativa">{lang === 'es' ? 'Comparativa' : 'Comparison'}</a>
          <a href="#clinicas">{t.navClinics}</a>
          <a href="#faq">{t.navFaq}</a>
        </div>

        <div className="nav-actions">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button data-active={lang === 'es'} onClick={() => setLang('es')}>ES</button>
            <button data-active={lang === 'en'} onClick={() => setLang('en')}>EN</button>
          </div>
          <button
            className="icon-btn"
            aria-label={theme === 'dark' ? 'Light mode' : 'Dark mode'}
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          >
            {theme === 'dark' ? (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6 19 19M5 19l1.4-1.4M17.6 6.4 19 5" />
              </svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
              </svg>
            )}
          </button>
          <a href="#descargar" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13.5 }}>
            {t.navDownload}
          </a>
        </div>
      </div>
      <nav className="nav-mobile" aria-label={lang === 'es' ? 'Secciones' : 'Sections'}>
        <a href="#catalogo">{t.navScales}</a>
        <a href="#how">{t.navHow}</a>
        <a href="#comparativa">{compareLabel}</a>
        <a href="#clinicas">{t.navClinics}</a>
        <a href="#faq">{t.navFaq}</a>
      </nav>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero — three variants
// ─────────────────────────────────────────────────────────────
function HeroSplit({ t, lang, animated }) {
  return (
    <section id="top" style={{ paddingTop: 88, paddingBottom: 96 }}>
      <div className="container layout-split">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Eyebrow>{t.heroEyebrow}</Eyebrow>
          <h1 className="display display-xl" style={{ margin: 0 }}>
            {t.heroTitleA}
            <br />
            <span style={{ color: 'var(--primary)' }}>{t.heroTitleB}</span>
          </h1>
          <p className="lead">{t.heroSub}</p>
          <div style={{ marginTop: 4 }}>
            <StoreBadges lang={lang} t={t} />
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 2, flexWrap: 'wrap' }}>
            <a href="#catalogo" className="btn btn-ghost">{t.heroCtaPrimary} →</a>
            <a href="#how" className="btn btn-ghost">{t.heroCtaSecondary}</a>
          </div>
        </div>
        <div className="hero-phone-col">
          <HeroPhoneStack lang={lang} width={360} animated={animated}>
            <LandingCatalogScreen lang={lang} />
          </HeroPhoneStack>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ t, lang, animated }) {
  return (
    <section id="top" style={{ paddingTop: 80, paddingBottom: 0 }}>
      <div className="container hero-centered-inner">
        <Eyebrow>{t.heroEyebrow}</Eyebrow>
        <h1 className="display display-xxl" style={{ margin: 0, maxWidth: 18 + 'ch' }}>
          {t.heroTitleA}{' '}
          <span style={{ color: 'var(--primary)' }}>{t.heroTitleB}</span>
        </h1>
        <p className="lead" style={{ textAlign: 'center', margin: '0 auto' }}>{t.heroSub}</p>
        <div>
          <StoreBadges lang={lang} t={t} />
        </div>
        <div style={{ marginTop: 32 }}>
          <HeroPhoneStack lang={lang} width={340} animated={animated}>
            <LandingCatalogScreen lang={lang} />
          </HeroPhoneStack>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ t, lang, animated }) {
  return (
    <section id="top" style={{ paddingTop: 64, paddingBottom: 64, position: 'relative' }}>
      <div className="container" style={{ position: 'relative' }}>
        <Eyebrow>{t.heroEyebrow}</Eyebrow>
        <div className="layout-editorial-top">
          <h1 className="display display-xxl" style={{ margin: 0 }}>
            {t.heroTitleA}
            <br />
            <span style={{ color: 'var(--primary)' }}>{t.heroTitleB}</span>
          </h1>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <HeroPhoneStack lang={lang} width={320} animated={animated}>
              <LandingCatalogScreen lang={lang} />
            </HeroPhoneStack>
          </div>
        </div>
        <div className="layout-editorial-bottom">
          <p className="lead" style={{ maxWidth: '46ch' }}>{t.heroSub}</p>
          <StoreBadges lang={lang} t={t} />
        </div>
      </div>
    </section>
  );
}

function HeroSection({ variant, t, lang, animated }) {
  if (variant === 'centered') return <HeroCentered t={t} lang={lang} animated={animated} />;
  if (variant === 'editorial') return <HeroEditorial t={t} lang={lang} animated={animated} />;
  return <HeroSplit t={t} lang={lang} animated={animated} />;
}

// ─────────────────────────────────────────────────────────────
// Marquee strip
// ─────────────────────────────────────────────────────────────
function StripSection({ t }) {
  const items = [
    t.stripScales, t.stripDoi, t.stripOffline, t.stripFree, t.stripPro, t.stripI18n,
  ];
  // Duplicate items so the loop is seamless
  const doubled = [...items, ...items];
  return (
    <div className="strip">
      <div className="strip-track">
        {doubled.map((it, i) => (
          <span key={i} className="strip-item">{it}</span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Catalog grid
// ─────────────────────────────────────────────────────────────
function CatalogSection({ t, lang }) {
  return (
    <section id="catalogo">
      <div className="container">
        <div className="section-intro">
          <Eyebrow>{t.catalogEyebrow}</Eyebrow>
          <h2 className="section-title">{t.catalogTitle}</h2>
          <p className="lead">{t.catalogSub}</p>
        </div>
        <div className="card-grid card-grid--catalog">
          {LANDING_SCALES.map((s) => (
            <CatalogCard key={s.id} scale={s} t={t} lang={lang} />
          ))}
        </div>
        <p style={{ marginTop: 32, fontSize: 14, color: 'var(--gray-500)' }}>
          {t.catalogFooterNote}
        </p>
      </div>
    </section>
  );
}

function CatalogCard({ scale, t, lang }) {
  const catVar = `var(--cat-${scale.cat})`;
  const name = lang === 'es' ? scale.name_es : scale.name_en;
  const tags = lang === 'es' ? scale.tags_es : scale.tags_en;
  const cat = LANDING_CAT_LABEL[scale.cat][lang];
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="eyebrow" style={{ color: catVar }}>{cat}</div>
        <div style={{ display: 'flex', gap: 6 }}>
          {scale.timed && (
            <span style={{
              fontFamily: 'JetBrains Mono', fontSize: 9.5,
              padding: '3px 7px', borderRadius: 4,
              background: 'var(--gray-100)', color: 'var(--gray-700)',
              letterSpacing: '0.08em', textTransform: 'uppercase',
              fontWeight: 600,
            }}>
              {t.catalogTimed}
            </span>
          )}
          {scale.isNew && (
            <span style={{
              fontFamily: 'JetBrains Mono', fontSize: 9.5,
              padding: '3px 7px', borderRadius: 4,
              background: 'var(--primary-100)', color: 'var(--primary)',
              letterSpacing: '0.08em', textTransform: 'uppercase',
              fontWeight: 700,
            }}>
              {t.catalogNew}
            </span>
          )}
        </div>
      </div>
      <h3 style={{ fontSize: 22, lineHeight: 1.15, textWrap: 'balance' }}>
        {name}
      </h3>
      <div style={{
        fontFamily: 'JetBrains Mono', fontSize: 11,
        color: 'var(--gray-500)', letterSpacing: '0.04em',
      }}>
        {scale.items} {t.catalogItemsLabel}
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 'auto' }}>
        {tags.map((tg, i) => (
          <span key={i} style={{
            fontSize: 12, fontWeight: 500,
            padding: '4px 10px', borderRadius: 999,
            background: 'var(--gray-100)', color: 'var(--gray-700)',
          }}>
            {tg}
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// How it works
// ─────────────────────────────────────────────────────────────
function HowSection({ t }) {
  const steps = [
    { num: '01', title: t.howStep1Title, desc: t.howStep1Desc },
    { num: '02', title: t.howStep2Title, desc: t.howStep2Desc },
    { num: '03', title: t.howStep3Title, desc: t.howStep3Desc },
  ];
  return (
    <section id="how" style={{ background: 'var(--bone)' }}>
      <div className="container">
        <div className="section-intro">
          <Eyebrow>{t.howEyebrow}</Eyebrow>
          <h2 className="section-title">{t.howTitle}</h2>
        </div>
        <div className="card-grid">
          {steps.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600,
                letterSpacing: '0.08em', color: 'var(--primary)',
              }}>
                {s.num}
              </div>
              <div style={{
                height: 1, background: 'var(--gray-300)',
              }} />
              <h3 className="display display-md" style={{ fontSize: 'clamp(28px, 3vw, 38px)' }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 16 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Clinical categories
// ─────────────────────────────────────────────────────────────
function CategoryIcon({ catKey }) {
  const common = {
    width: 26,
    height: 26,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 1.75,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    'aria-hidden': true,
  };
  switch (catKey) {
    case 'neuro':
      return (
        <svg {...common}>
          <path d="M9.5 2A5.5 5.5 0 0 0 4 7.5c0 2.2 1.2 4.1 3 5.2V16h8v-3.3c1.8-1.1 3-3 3-5.2A5.5 5.5 0 0 0 14.5 2" />
          <path d="M12 18v2" />
        </svg>
      );
    case 'geriatrics':
      return (
        <svg {...common}>
          <circle cx="12" cy="7" r="3" />
          <path d="M6 21v-1a5 5 0 0 1 10 0v1" />
          <path d="M4 12h2M18 12h2" />
        </svg>
      );
    case 'msk':
      return (
        <svg {...common}>
          <path d="M8 4l-2 16M16 4l2 16M6 10h12M7 16h10" />
        </svg>
      );
    case 'cardio':
      return (
        <svg {...common}>
          <path d="M12 21s-6-4.35-6-10a4 4 0 0 1 7-2.5A4 4 0 0 1 18 11c0 5.65-6 10-6 10z" />
        </svg>
      );
    case 'pain':
      return (
        <svg {...common}>
          <path d="M13 2L4 14h7l-1 8 10-14H11l2-6z" />
        </svg>
      );
    case 'rehab':
      return (
        <svg {...common}>
          <path d="M4 12h4l2-5 4 10 2-5h4" />
        </svg>
      );
    case 'pediatrics':
      return (
        <svg {...common}>
          <circle cx="12" cy="8" r="2.5" />
          <path d="M8 21v-1a4 4 0 0 1 8 0v1" />
        </svg>
      );
    case 'sports_medicine':
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3 2" />
        </svg>
      );
    case 'rheumatology':
      return (
        <svg {...common}>
          <path d="M8 8h8M8 16h8M12 8v8" />
          <circle cx="8" cy="8" r="2" />
          <circle cx="16" cy="16" r="2" />
        </svg>
      );
    case 'general':
      return (
        <svg {...common}>
          <rect x="4" y="4" width="7" height="7" rx="1.5" />
          <rect x="13" y="4" width="7" height="7" rx="1.5" />
          <rect x="4" y="13" width="7" height="7" rx="1.5" />
          <rect x="13" y="13" width="7" height="7" rx="1.5" />
        </svg>
      );
    default:
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
        </svg>
      );
  }
}

function CategoryCard({ cat, lang, compact }) {
  const label = LANDING_CAT_LABEL[cat.key][lang];
  const className = compact ? 'cat-card cat-card--compact' : 'cat-card';
  return (
    <article
      className={className}
      role="listitem"
      style={{ '--cat-color': cat.color }}
    >
      <div className="cat-card-top">
        <div className="cat-card-icon" aria-hidden="true">
          <CategoryIcon catKey={cat.key} />
        </div>
        <div className="cat-card-heading">
          <span className="cat-card-label">{label}</span>
          <h3 className="cat-card-title">{cat.title}</h3>
        </div>
      </div>
      <p className="cat-card-desc">{cat.desc}</p>
      <div className="cat-card-scales">
        {cat.items.map((it) => (
          <span key={it} className="cat-scale-pill">{it}</span>
        ))}
      </div>
    </article>
  );
}

function CategoriesSection({ t, lang }) {
  const catsFeatured = [
    { key: 'neuro',       color: 'var(--cat-neuro)',       title: t.catNeuroTitle,       desc: t.catNeuroDesc,       items: t.catNeuroList },
    { key: 'geriatrics',  color: 'var(--cat-geriatrics)',  title: t.catGeriatricsTitle,  desc: t.catGeriatricsDesc,  items: t.catGeriatricsList },
    { key: 'msk',         color: 'var(--cat-msk)',         title: t.catMskTitle,         desc: t.catMskDesc,         items: t.catMskList },
    { key: 'cardio',      color: 'var(--cat-cardio)',      title: t.catCardioTitle,      desc: t.catCardioDesc,      items: t.catCardioList },
    { key: 'pain',        color: 'var(--cat-pain)',        title: t.catPainTitle,        desc: t.catPainDesc,        items: t.catPainList },
    { key: 'rehab',       color: 'var(--cat-rehab)',       title: t.catRehabTitle,       desc: t.catRehabDesc,       items: t.catRehabList },
  ];
  const catsMore = [
    { key: 'pediatrics',      color: 'var(--cat-pediatrics)',      title: t.catPediatricsTitle, desc: t.catPediatricsDesc, items: t.catPediatricsList },
    { key: 'sports_medicine', color: 'var(--cat-sports_medicine)', title: t.catSportsTitle,     desc: t.catSportsDesc,     items: t.catSportsList },
    { key: 'rheumatology',    color: 'var(--cat-rheumatology)',    title: t.catRheumTitle,      desc: t.catRheumDesc,      items: t.catRheumList },
    { key: 'general',         color: 'var(--cat-general)',         title: t.catGeneralTitle,  desc: t.catGeneralDesc,  items: t.catGeneralList },
  ];
  return (
    <section id="areas" className="cats-section" aria-labelledby="cats-heading">
      <div className="container">
        <header className="cats-header">
          <div className="cats-header-copy">
            <Eyebrow>{t.catsEyebrow}</Eyebrow>
            <h2 id="cats-heading" className="section-title">{t.catsTitle}</h2>
            <p>{t.catsSub}</p>
          </div>
          <div className="cats-stats" aria-hidden="true">
            <span className="cats-stat">
              <span className="cats-stat-dot" />
              {t.catsStatTotal}
            </span>
            <span className="cats-stat cats-stat--muted">
              <span className="cats-stat-dot" />
              {t.catsStatFeatured}
            </span>
          </div>
        </header>
        <div className="cats-grid" role="list" aria-label={lang === 'es' ? 'Áreas destacadas' : 'Featured areas'}>
          {catsFeatured.map((c) => (
            <CategoryCard key={c.key} cat={c} lang={lang} compact={false} />
          ))}
        </div>
        <div className="cats-more">
          <p className="cats-more-title">{t.catsMoreTitle}</p>
          <div className="cats-more-grid" role="list" aria-label={lang === 'es' ? 'Otras áreas del catálogo' : 'Other library areas'}>
            {catsMore.map((c) => (
              <CategoryCard key={c.key} cat={c} lang={lang} compact />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PDF section — copy + mocked PDF page
// ─────────────────────────────────────────────────────────────
function PdfMockSheet({ lang }) {
  // A simplified PDF report mockup, matches the spirit of pdf-reports.jsx.
  const isEs = lang === 'es';
  return (
    <div className="pdf-sheet">
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '1px solid #E5E7EB', paddingBottom: 14 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <LandingBrandIcon size={22} />
            <span style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-0.025em' }}>
              <span style={{ color: '#1A1D23' }}>Kine</span><span style={{ color: '#1A6BCC', fontWeight: 500 }}>Suite</span>
            </span>
          </div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8.5, color: '#6B7280', marginTop: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {isEs ? 'Reporte de evaluación · v1.0' : 'Assessment report · v1.0'}
          </div>
        </div>
        <div style={{ textAlign: 'right', fontSize: 9, color: '#6B7280', lineHeight: 1.5 }}>
          <div style={{ fontWeight: 700, color: '#1A1D23', fontSize: 11 }}>
            {isEs ? 'Lic. Camila Reyes' : 'Lic. Camila Reyes'}
          </div>
          <div>{isEs ? 'Matrícula 28.451 · Kinesióloga' : 'License 28.451 · Kinesiologist'}</div>
          <div>{isEs ? 'Centro de Rehabilitación CRS' : 'CRS Rehabilitation Center'}</div>
        </div>
      </div>

      {/* Patient block */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 10 }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8, color: '#6B7280', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            {isEs ? 'Paciente' : 'Patient'}
          </div>
          <div style={{ fontWeight: 700, fontSize: 13, marginTop: 2 }}>P. Morales · 72 a</div>
          <div style={{ color: '#6B7280', marginTop: 2 }}>
            {isEs ? 'Ficha 4729 · ACV isquémico (3 sem.)' : 'File 4729 · Ischemic stroke (3 wk)'}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8, color: '#6B7280', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            {isEs ? 'Evaluación' : 'Assessment'}
          </div>
          <div style={{ fontWeight: 700, fontSize: 13, marginTop: 2 }}>
            {isEs ? 'Escala de Berg' : 'Berg Balance Scale'}
          </div>
          <div style={{ color: '#6B7280', marginTop: 2 }}>14 ítems · 12 abr 2026 · 11:23</div>
        </div>
      </div>

      {/* Score */}
      <div style={{
        background: '#FEF3C7', border: '1px solid #FBD589',
        borderRadius: 8, padding: '14px 18px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8, color: '#92400E', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700 }}>
            {isEs ? 'Bandera clínica' : 'Clinical flag'}
          </div>
          <div style={{ fontSize: 16, fontWeight: 800, color: '#92400E', marginTop: 2, letterSpacing: '-0.02em' }}>
            {isEs ? 'Precaución · riesgo moderado' : 'Caution · moderate risk'}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 28, fontWeight: 800, color: '#92400E', letterSpacing: '-0.04em', lineHeight: 1 }}>34<span style={{ fontSize: 16, opacity: 0.6 }}>/56</span></div>
          <div style={{ fontSize: 9, color: '#92400E', marginTop: 2 }}>{isEs ? 'puntaje total' : 'total score'}</div>
        </div>
      </div>

      {/* Items list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 10 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8, color: '#6B7280', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          {isEs ? 'Ítems · resumen' : 'Items · summary'}
        </div>
        {[
          { n: 1, l: isEs ? 'Sentado a de pie' : 'Sitting to standing',          v: 3 },
          { n: 2, l: isEs ? 'De pie sin apoyo' : 'Standing unsupported',         v: 4 },
          { n: 3, l: isEs ? 'Sentado sin apoyo' : 'Sitting unsupported',         v: 4 },
          { n: 4, l: isEs ? 'De pie a sentado' : 'Standing to sitting',          v: 3 },
          { n: 5, l: isEs ? 'Transferencias' : 'Transfers',                      v: 2 },
        ].map((row) => (
          <div key={row.n} style={{ display: 'grid', gridTemplateColumns: '20px 1fr 36px', gap: 8, alignItems: 'center', borderBottom: '1px solid #F3F4F6', paddingBottom: 4 }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: '#9CA3AF' }}>{String(row.n).padStart(2,'0')}</span>
            <span style={{ color: '#1A1D23' }}>{row.l}</span>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textAlign: 'right' }}>{row.v}/4</span>
          </div>
        ))}
        <div style={{ fontSize: 9, color: '#9CA3AF', marginTop: 2, fontStyle: 'italic' }}>
          {isEs ? '+ 9 ítems más · ver detalle abajo' : '+ 9 more items · see detail below'}
        </div>
      </div>

      {/* Footer */}
      <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid #E5E7EB', display: 'flex', justifyContent: 'space-between', fontSize: 8, color: '#9CA3AF', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em' }}>
        <span>DOI: 10.1093/ptj/72.6.420</span>
        <span>KineSuite v0.1 · 17/05/2026 · pág. 1 / 2</span>
      </div>
    </div>
  );
}

function PdfSection({ t, lang }) {
  return (
    <section style={{ background: 'var(--bone)' }}>
      <div className="container layout-pdf">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Eyebrow>{t.pdfEyebrow}</Eyebrow>
          <h2 className="section-title">{t.pdfTitle}</h2>
          <p className="lead">{t.pdfSub}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
            {t.pdfFeatures.map((f, i) => (
              <li key={i} style={{ display: 'flex', gap: 14 }}>
                <div style={{
                  flexShrink: 0,
                  width: 26, height: 26, borderRadius: 7,
                  background: 'var(--primary-100)', color: 'var(--primary)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 12,
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--ink)' }}>{f.t}</div>
                  <div style={{ color: 'var(--gray-500)', fontSize: 14, marginTop: 2 }}>{f.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <PdfMockSheet lang={lang} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Privacy section
// ─────────────────────────────────────────────────────────────
function PrivacySection({ t }) {
  return (
    <section id="privacidad-section">
      <div className="container">
        <div className="layout-privacy">
          <div className="layout-sticky-side">
            <Eyebrow>{t.privEyebrow}</Eyebrow>
            <h2 className="section-title">{t.privTitle}</h2>
            <p className="lead">{t.privSub}</p>
          </div>
          <div className="priv-grid">
            {t.privPoints.map((p, i) => (
              <div key={i} style={{
                padding: '28px 28px 28px 0',
                paddingLeft: 28,
                borderRight: '1px solid var(--gray-200)',
                borderBottom: '1px solid var(--gray-200)',
                marginRight: -1, marginBottom: -1,
                background: 'var(--paper)',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  color: 'var(--primary)', fontWeight: 700,
                  letterSpacing: '0.1em',
                }}>
                  ·{String(i + 1).padStart(2,'0')}
                </div>
                <div style={{ fontWeight: 700, fontSize: 18, color: 'var(--ink)', letterSpacing: '-0.02em' }}>
                  {p.t}
                </div>
                <p style={{ fontSize: 14 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Team
// ─────────────────────────────────────────────────────────────
function TeamSection({ t }) {
  return (
    <section id="equipo" style={{ background: 'var(--bone)' }}>
      <div className="container">
        <div className="section-intro">
          <Eyebrow>{t.teamEyebrow}</Eyebrow>
          <h2 className="section-title">{t.teamTitle}</h2>
          <p className="lead">{t.teamSub}</p>
        </div>
        <div className="card-grid" style={{ marginBottom: 48 }}>
          {t.teamRoles.map((r, i) => (
            <div key={i} className="card" style={{ background: 'var(--paper)' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 999,
                background: `linear-gradient(135deg, var(--primary) 0%, var(--cat-trauma) 100%)`,
                marginBottom: 18,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontFamily: 'Manrope', fontWeight: 700, fontSize: 20,
                letterSpacing: '-0.02em',
              }}>
                {r.name.split(' ').slice(-2).map(w => w[0]).join('').slice(0,2)}
              </div>
              <div style={{ fontWeight: 700, fontSize: 18, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{r.name}</div>
              <div className="eyebrow" style={{ marginTop: 6, color: 'var(--primary)' }}>{r.role}</div>
              <div style={{ fontSize: 13, color: 'var(--gray-500)', marginTop: 8 }}>{r.meta}</div>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 28,
          flexWrap: 'wrap',
          paddingTop: 32,
          borderTop: '1px solid var(--gray-200)',
        }}>
          <div className="eyebrow">{t.teamPartnersTitle}</div>
          {t.teamPartners.map((p, i) => (
            <div key={i} style={{
              fontFamily: 'Manrope', fontWeight: 700, fontSize: 18,
              color: 'var(--gray-500)', letterSpacing: '-0.02em',
            }}>
              {p}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
function FaqSection({ t }) {
  return (
    <section id="faq">
      <div className="container">
        <div className="layout-faq">
          <div className="layout-sticky-side">
            <Eyebrow>{t.faqEyebrow}</Eyebrow>
            <h2 className="section-title">{t.faqTitle}</h2>
          </div>
          <div>
            {t.faqItems.map((it, i) => (
              <details key={i} className="faq" open={i === 0}>
                <summary>{it.q}</summary>
                <p>{it.a}</p>
              </details>
            ))}
            {t.pricingLocalizedNote && (
              <p style={{ marginTop: 20, fontSize: 12, lineHeight: 1.5, color: 'var(--gray-500)' }}>
                {t.pricingLocalizedNote}
              </p>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Final CTA + Footer
// ─────────────────────────────────────────────────────────────
function FinalCtaSection({ t, lang }) {
  return (
    <section id="descargar" style={{
      background: 'var(--primary)',
      color: '#fff',
    }}>
      <div className="container" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center', gap: 28,
      }}>
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>
          {t.finalEyebrow}
        </div>
        <h2 className="display display-xl" style={{ color: '#fff', maxWidth: '20ch' }}>
          {t.finalTitle}
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 18, maxWidth: '52ch' }}>
          {t.finalSub}
        </p>
        <div style={{ marginTop: 14 }}>
          <StoreBadges lang={lang} t={t} onDark />
        </div>
      </div>
    </section>
  );
}

function FooterSection({ t, lang, setLang }) {
  const legalHrefs = lang === 'es'
    ? ['legal/terminos.html', 'legal/privacidad.html']
    : ['legal/terms.html', 'legal/privacy.html'];
  const productHrefs = lang === 'es'
    ? ['#catalogo', '#how', 'legal/privacidad.html', '#changelog']
    : ['#catalogo', '#how', 'legal/privacy.html', '#changelog'];
  const companyHrefs = ['#equipo', '#', '#', `mailto:${t.footerContact}`];
  return (
    <footer className="foot">
      <div className="container">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <LandingBrandIcon size={32} />
            <LandingWordmark size={20} light />
          </div>
          <p style={{
            color: 'rgba(255,255,255,0.7)',
            marginTop: 18, fontSize: 14, maxWidth: '32ch',
          }}>
            {t.footerTagline}
          </p>
          <a href={`mailto:${t.footerContact}`} style={{ marginTop: 18, display: 'inline-block', fontFamily: 'JetBrains Mono, monospace', fontSize: 13 }}>
            {t.footerContact}
          </a>
        </div>
        <div>
          <h4>{t.footerProduct}</h4>
          <ul>{t.footerProductLinks.map((l, i) => <li key={i}><a href={productHrefs[i] || '#'}>{l}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.footerCompany}</h4>
          <ul>{t.footerCompanyLinks.map((l, i) => <li key={i}><a href={companyHrefs[i] || '#'}>{l}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.footerLegal}</h4>
          <ul>{t.footerLegalLinks.map((l, i) => <li key={i}><a href={legalHrefs[i] || '#'}>{l}</a></li>)}</ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>{t.footerCopy}</span>
        <span>kinesuite.app</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Eyebrow, StoreBadges, StoreBadge,
  LandingNav,
  HeroSection, StripSection,
  CatalogSection, HowSection, CategoriesSection,
  PdfSection, PrivacySection, TeamSection, FaqSection,
  FinalCtaSection, FooterSection,
});