// Variant B — Light renewal (white base + #146ef5 blue accent, matching the extension UI)
// Single, product-forward look that mirrors Chroma AI's own sidebar: a clean white
// canvas with one confident blue accent — replacing the previous dark-glass aurora.

(function () {
  const { useState, useEffect } = React;
  const { COLOR_PRESETS, BRAND, I18N, ChromaLogo, PlatformIcon, ChatGPTMockup, LangSwitch, Kbd, PresetSwatch, Reveal, detectInitialLang } = window;

  // Pro upgrade flow. Clicking either Pro CTA sends the user to /upgrade.html,
  // which gates the Lemon Squeezy checkout behind a Supabase login so the license
  // is issued to the same email the user signs into the extension with.
  const UPGRADE_PAGE_URL = '/upgrade.html';

  const CHROME_WEB_STORE_URL = 'https://chromewebstore.google.com/detail/chroma-ai-customize-your/ajmmlbgiflfmkbemdngoafijappelmgp';

  // ── Design tokens — light, white-based, single blue accent (#146ef5) ──────
  // Pulled to harmonise with the extension's BRAND palette (editor-sidebar.js).
  const UI = {
    blue:   '#146ef5',  // primary
    blue2:  '#3b89ff',  // light blue (gradient top)
    blueDk: '#0c5ad4',  // pressed / deep
    tint:   '#eef5ff',  // light blue surface
    tintBg: '#f3f8ff',  // tinted section bg
    ink:    '#0c1322',  // headings
    body:   '#54607a',  // body copy
    dim:    '#97a1b2',  // captions / hints
    border: '#e7eaf0',  // card border
    hair:   '#eef1f5',  // hairline divider
    card:   '#ffffff',
    soft:   '#f6f8fc',  // alternating section bg
    white:  '#ffffff',
  };

  // New custom-theme accents (shown in the hero + Custom Themes section).
  const THEME_MSG   = { name: 'Messenger', accent: '#6264a7', tint: '#eceafb' };
  const THEME_SHEET = { name: 'Sheet',     accent: '#217346', tint: '#e6f4ec' };

  // Track viewport width so the page can adapt layout when the window resizes.
  function useViewportWidth() {
    const [vw, setVW] = useState(
      typeof window !== 'undefined' ? window.innerWidth : 1280
    );
    useEffect(() => {
      const onResize = () => setVW(window.innerWidth);
      window.addEventListener('resize', onResize, { passive: true });
      return () => window.removeEventListener('resize', onResize);
    }, []);
    return vw;
  }

  // Smooth-scroll for in-page nav anchors (e.g. #features → section id="features").
  function scrollToId(id) {
    return (e) => {
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
  }

  // Store-assigned extension ID + ChatGPT entry point for the "Apply theme" CTA.
  const EXTENSION_ID = 'ajmmlbgiflfmkbemdngoafijappelmgp';
  const CHATGPT_URL = 'https://chatgpt.com';

  // "Apply theme" secondary CTA. If Chroma AI is installed, jump straight to
  // ChatGPT (where the sidebar lives); otherwise send the user to the Web Store
  // to install it first.
  //
  // Detection relies on manifest externally_connectable (aichroma.shop is listed):
  //   • Not installed → Chrome doesn't inject chrome.runtime for this page
  //     (no extension connects it) → guard falls through to the store.
  //   • Installed → ping the extension; it answers synchronously (unknown_type)
  //     with no lastError → ChatGPT. A leftover chrome.runtime from some other
  //     extension yields lastError on our ID → store. Timeout is a safety net.
  function handleApplyTheme(e) {
    e.preventDefault();
    const go = (url) => { window.location.href = url; };
    if (!window.chrome || !chrome.runtime || !chrome.runtime.sendMessage) {
      go(CHROME_WEB_STORE_URL);
      return;
    }
    let settled = false;
    const decide = (installed) => {
      if (settled) return;
      settled = true;
      go(installed ? CHATGPT_URL : CHROME_WEB_STORE_URL);
    };
    try {
      chrome.runtime.sendMessage(EXTENSION_ID, { type: 'PING' }, () => {
        decide(!chrome.runtime.lastError);
      });
    } catch (_) {
      decide(false);
    }
    setTimeout(() => decide(false), 800);
  }

  // White card surface (replaces the old dark glass()). `elevated` lifts the shadow.
  const card = (elevated = false) => ({
    background: UI.card,
    border: `1px solid ${UI.border}`,
    boxShadow: elevated
      ? '0 1px 2px rgba(16,28,52,0.04), 0 14px 36px rgba(16,28,52,0.08)'
      : '0 1px 2px rgba(16,28,52,0.03), 0 6px 18px rgba(16,28,52,0.05)',
  });

  function VariantGlass() {
    const [lang, setLang] = useState(detectInitialLang);
    // Persist the language choice so it carries over to the legal / upgrade pages.
    useEffect(() => {
      try { localStorage.setItem('chroma-lang', lang); } catch {/* storage unavailable */}
    }, [lang]);
    const t = I18N[lang];

    // 로그인 상태 감지 — chromaAuth 로딩 후 세션 조회. null=미확인, false=미로그인, true=로그인.
    const [signedIn, setSignedIn] = useState(null);
    // Pro 라이센스 보유 여부 — true 일 때 "Pro로 업그레이드" CTA 숨김.
    const [isProUser, setIsProUser] = useState(null);
    useEffect(() => {
      let cancelled = false;
      (async () => {
        for (let i = 0; i < 30; i++) {
          if (window.chromaAuth) break;
          await new Promise(r => setTimeout(r, 50));
        }
        if (cancelled) return;
        if (!window.chromaAuth || window.chromaAuth._error) {
          setSignedIn(false);
          setIsProUser(false);
          return;
        }
        const session = await window.chromaAuth.getSession();
        if (cancelled) return;
        const signed = !!session?.user?.email;
        setSignedIn(signed);
        if (!signed) { setIsProUser(false); return; }
        try {
          const pro = await window.chromaAuth.hasActiveLicense();
          if (!cancelled) setIsProUser(pro === true);
        } catch {
          if (!cancelled) setIsProUser(false);
        }
      })();
      return () => { cancelled = true; };
    }, []);

    const isKo = lang === 'ko';
    const headlineFamily = isKo
      ? "'Pretendard', system-ui, sans-serif"
      : "'Inter', 'Pretendard', system-ui, sans-serif";

    // Responsive strategy: discrete layout tiers + fluid clamp() sizing.
    const vw = useViewportWidth();
    const isNarrow = vw < 1024;
    const isMobile = vw < 640;
    const [menuOpen, setMenuOpen] = useState(false);
    // 뷰포트가 데스크톱으로 넓어지면 열려 있던 모바일 메뉴는 닫는다.
    useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);

    const heroH1Size  = isKo
      ? 'clamp(40px, 6.5vw + 4px, 96px)'
      : 'clamp(36px, 5.5vw + 4px, 80px)';
    const heroSubMax  = isKo ? 620 : 680;
    const heroSubSize = `clamp(15px, 0.6vw + 11px, ${isKo ? 18 : 17}px)`;

    const sectionPad =
      'clamp(40px, 3vw + 20px, 60px) ' +
      'clamp(20px, 4vw + 4px, 56px) ' +
      'clamp(48px, 4vw + 20px, 80px)';
    const sectionPadHero =
      'clamp(24px, 2vw + 12px, 32px) ' +
      'clamp(20px, 4vw + 4px, 56px)';

    // ── shared style objects ────────────────────────────────────────────────
    const navLink = {
      fontSize: 13, color: UI.body, fontWeight: 500, cursor: 'pointer',
      textDecoration: 'none', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
    };
    const navProBtn = {
      display: 'inline-flex', alignItems: 'center', gap: 5, padding: '7px 13px',
      background: `linear-gradient(135deg, ${UI.blue2} 0%, ${UI.blue} 100%)`,
      color: '#fff', border: 'none', borderRadius: 9,
      fontSize: 12, fontWeight: 600, fontFamily: 'Pretendard,system-ui,sans-serif',
      letterSpacing: '-0.01em', whiteSpace: 'nowrap',
      boxShadow: '0 4px 12px rgba(20,110,245,0.30)',
      textDecoration: 'none', cursor: 'pointer',
    };
    const primaryBtn = {
      display: 'inline-flex', alignItems: 'center', gap: 4, padding: '12px 22px',
      background: `linear-gradient(135deg, ${UI.blue2} 0%, ${UI.blue} 100%)`,
      color: '#fff', border: 'none', borderRadius: 11,
      fontSize: 14, fontWeight: 600, fontFamily: 'Pretendard,system-ui,sans-serif',
      cursor: 'pointer', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
      boxShadow: '0 8px 22px rgba(20,110,245,0.28)',
    };
    const secondaryBtn = {
      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '12px 18px',
      background: '#fff', color: UI.ink,
      border: `1px solid ${UI.border}`, borderRadius: 11,
      fontSize: 14, fontWeight: 600, fontFamily: 'Pretendard,system-ui,sans-serif',
      cursor: 'pointer', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
      boxShadow: '0 2px 8px rgba(16,28,52,0.05)',
    };
    const footerLink = {
      fontSize: 12, color: UI.body, fontWeight: 500,
      textDecoration: 'none', whiteSpace: 'nowrap',
    };
    // 모바일 햄버거 드롭다운 안의 링크 스타일 (넉넉한 탭 타깃).
    const mobileMenuLink = {
      display: 'block', padding: '12px 14px', borderRadius: 9,
      fontSize: 15, fontWeight: 600, color: UI.ink,
      textDecoration: 'none', letterSpacing: '-0.01em',
    };

    return (
      <div className="ate-art" style={{
        width: '100%', minHeight: '100%',
        color: UI.ink, position: 'relative',
        fontFamily: 'Pretendard,system-ui,sans-serif',
        background: UI.white,
      }}>
        {/* Soft blue wash behind the hero — one gentle bloom, no neon orbs. */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: '92vh',
          pointerEvents: 'none', zIndex: 0,
          background: `
            radial-gradient(ellipse 70% 55% at 50% -8%, rgba(20,110,245,0.10) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 88% 6%, rgba(59,137,255,0.07) 0%, transparent 55%),
            linear-gradient(180deg, #f3f8ff 0%, rgba(243,248,255,0) 70%)
          `,
        }} />

        <div style={{ position: 'relative', zIndex: 1 }}>
        {/* ── Promo Banner ─────────────────────────────────────── */}
        <div style={{
          background: 'linear-gradient(135deg, #146ef5 0%, #3b89ff 100%)',
          color: '#fff', textAlign: 'center', padding: '10px 16px',
          fontSize: isMobile ? 12.5 : 14, fontWeight: 600, letterSpacing: '-0.01em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: isMobile ? 8 : 12,
          position: 'relative', zIndex: 21,
          flexWrap: 'wrap'
        }}>
          <span>🎉 {lang === 'ko' ? 'Chroma AI Pro 플랜 기간 한정 전면 무료 배포 중!' : 'Chroma AI Pro is currently 100% FREE!'}</span>
          <a href={UPGRADE_PAGE_URL} style={{
            background: '#fff', color: '#146ef5', padding: '4px 10px', borderRadius: 8,
            fontSize: 12, fontWeight: 700, textDecoration: 'none', boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
          }}>
            {lang === 'ko' ? '무료 혜택 받기' : 'Get Pro Now'}
          </a>
        </div>

        {/* ── Top Nav (floating white pill) ──────────────────────── */}
        <div style={{ position: 'sticky', top: 16, zIndex: 20, padding: isMobile ? '0 16px' : '0 32px' }}>
          <nav style={{
            background: 'rgba(255,255,255,0.82)',
            backdropFilter: 'blur(16px) saturate(140%)',
            WebkitBackdropFilter: 'blur(16px) saturate(140%)',
            border: `1px solid ${UI.border}`,
            padding: isMobile ? '10px 14px' : '11px 18px',
            borderRadius: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            boxShadow: '0 6px 24px rgba(16,28,52,0.07)',
            gap: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <ChromaLogo size={24} />
              <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap', color: UI.ink }}>{t.brand_name}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: isNarrow ? 12 : 20 }}>
              {!isMobile && (
                <>
                  <a href="#features" onClick={scrollToId('features')} style={navLink}>{t.nav_features}</a>
                  <a href="#presets" onClick={scrollToId('presets')} style={navLink}>{t.nav_presets}</a>
                  <a href="#plans" onClick={scrollToId('plans')} style={navLink}>{t.nav_pricing}</a>
                  <a href="/faq" style={navLink}>{t.nav_faq}</a>
                  {signedIn === true && (
                    <a href="/mypage" style={navLink}>{t.nav_mypage}</a>
                  )}
                  {signedIn === false && (
                    <a href="/login" style={navLink}>{t.nav_login}</a>
                  )}
                  {/* 프로모션 기간 임시 숨김
                  {isProUser !== true && (
                    <a href={UPGRADE_PAGE_URL} style={navProBtn}>
                      <svg width={11} height={11} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M13 2 L4 14 L11 14 L11 22 L20 10 L13 10 Z" />
                      </svg>
                      {t.nav_upgrade}
                    </a>
                  )}
                  */}
                </>
              )}
              <LangSwitch value={lang} onChange={setLang} theme="light" />
              {isMobile && (
                <button aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)} style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 34, height: 34, padding: 0, borderRadius: 9, flexShrink: 0,
                  background: menuOpen ? UI.tint : '#fff', border: `1px solid ${UI.border}`,
                  cursor: 'pointer', color: UI.ink,
                }}>
                  <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
                    {menuOpen
                      ? <React.Fragment><path d="M6 6l12 12"/><path d="M18 6L6 18"/></React.Fragment>
                      : <React.Fragment><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></React.Fragment>}
                  </svg>
                </button>
              )}
            </div>
          </nav>
          {isMobile && menuOpen && (
            <div style={{
              margin: '8px 0 0', padding: 8,
              background: 'rgba(255,255,255,0.98)',
              backdropFilter: 'blur(16px) saturate(140%)',
              WebkitBackdropFilter: 'blur(16px) saturate(140%)',
              border: `1px solid ${UI.border}`, borderRadius: 14,
              boxShadow: '0 14px 34px rgba(16,28,52,0.14)',
              display: 'flex', flexDirection: 'column', gap: 2,
            }}>
              <a href="#features" onClick={(e) => { scrollToId('features')(e); setMenuOpen(false); }} style={mobileMenuLink}>{t.nav_features}</a>
              <a href="#presets" onClick={(e) => { scrollToId('presets')(e); setMenuOpen(false); }} style={mobileMenuLink}>{t.nav_presets}</a>
              <a href="#plans" onClick={(e) => { scrollToId('plans')(e); setMenuOpen(false); }} style={mobileMenuLink}>{t.nav_pricing}</a>
              <a href="/faq" style={mobileMenuLink}>{t.nav_faq}</a>
              <div style={{ height: 1, background: UI.hair, margin: '6px 6px' }} />
              {signedIn === true && (<a href="/mypage" style={mobileMenuLink}>{t.nav_mypage}</a>)}
              {signedIn === false && (<a href="/login" style={mobileMenuLink}>{t.nav_login}</a>)}
              {/* 프로모션 기간 임시 숨김
              {isProUser !== true && (
                <a href={UPGRADE_PAGE_URL} style={{
                  ...navProBtn, justifyContent: 'center', padding: '12px 14px',
                  fontSize: 14, borderRadius: 10, margin: '4px 2px 2px',
                }}>
                  <svg width={12} height={12} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M13 2 L4 14 L11 14 L11 22 L20 10 L13 10 Z" />
                  </svg>
                  {t.nav_upgrade}
                </a>
              )}
              */}
            </div>
          )}
        </div>

        {/* ── Hero (centered splash + browser-framed theme screenshots) ── */}
        <section style={{
          minHeight: isMobile ? 'auto' : '96vh',
          padding: sectionPadHero,
          position: 'relative', display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            maxWidth: 900, margin: '0 auto', width: '100%',
            position: 'relative', zIndex: 1, textAlign: 'center',
            paddingTop: isMobile ? 24 : 8,
          }}>
            {/* NEW badge — announces the custom theme presets (B). */}
            <Reveal delay={60} duration={700} y={18}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 13px 6px 10px', marginBottom: isMobile ? 18 : 22,
                background: UI.tint, border: `1px solid rgba(20,110,245,0.18)`,
                borderRadius: 999,
              }}>
                <span style={{
                  display: 'inline-flex', width: 16, height: 16, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${UI.blue2}, ${UI.blue})`,
                  alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 2px 6px rgba(20,110,245,0.35)',
                }}>
                  <svg width={9} height={9} viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
                    <path d="M12 2l2.4 6.9L21 9.2l-5.2 4.2 1.8 6.9L12 16.8 6.4 20.3l1.8-6.9L3 9.2l6.6-.3z"/>
                  </svg>
                </span>
                <span style={{ fontSize: 12.5, fontWeight: 700, color: UI.blue, letterSpacing: '-0.01em' }}>{t.hero_badge}</span>
              </div>
            </Reveal>

            <Reveal delay={120} duration={800} y={28}>
              <h1 style={{
                fontFamily: headlineFamily,
                fontSize: heroH1Size,
                fontWeight: 700, lineHeight: 1.02,
                letterSpacing: isKo ? '-0.045em' : '-0.035em', margin: 0,
                whiteSpace: 'pre-line', color: UI.ink,
                maxWidth: '100%',
              }}>
                {t.hero_h1_b.split('\n').map((line, i) => (
                  <span key={i} style={{ display: 'block' }}>
                    {i === 1
                      ? <span style={{
                          background: `linear-gradient(115deg, ${UI.blue} 0%, ${UI.blue2} 60%, #66a6ff 100%)`,
                          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                        }}>{line}</span>
                      : line}
                  </span>
                ))}
              </h1>
            </Reveal>

            <Reveal delay={260} duration={700}>
              <p style={{
                marginTop: isMobile ? 20 : 26,
                marginBottom: isMobile ? 28 : 34,
                fontSize: heroSubSize, lineHeight: 1.55,
                color: UI.body,
                maxWidth: heroSubMax,
                marginLeft: 'auto', marginRight: 'auto',
                whiteSpace: 'pre-line', fontWeight: 400,
              }}>{t.hero_sub}</p>
            </Reveal>

            <Reveal delay={380} duration={700}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                gap: 12, flexWrap: 'wrap',
              }}>
                {CHROME_WEB_STORE_URL ? (
                  <a href={CHROME_WEB_STORE_URL} target="_blank" rel="noopener noreferrer"
                    style={{ ...primaryBtn, textDecoration: 'none' }}>
                    {t.cta_primary}
                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" style={{ marginLeft: 4 }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </a>
                ) : (
                  <button style={primaryBtn}>
                    {t.cta_primary}
                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" style={{ marginLeft: 4 }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                )}
                <a href="https://chatgpt.com" onClick={handleApplyTheme} target="_blank" rel="noopener noreferrer"
                  style={{ ...secondaryBtn, textDecoration: 'none' }}>
                  <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                    <circle cx="13.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
                    <circle cx="17.5" cy="10.5" r="1.5" fill="currentColor" stroke="none"/>
                    <circle cx="8.5" cy="7.5" r="1.5" fill="currentColor" stroke="none"/>
                    <circle cx="6.5" cy="12.5" r="1.5" fill="currentColor" stroke="none"/>
                    <path d="M12 22a10 10 0 1 1 10-10c0 2-1.5 3.5-3.5 3.5H16a2 2 0 0 0-1.4 3.4c.4.4.6.9.6 1.5 0 1-.8 1.6-1.7 1.6-.5 0-1 0-1.5 0z"/>
                  </svg>
                  {t.cta_secondary}
                  <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" style={{ marginLeft: 4 }} aria-hidden="true">
                    <path d="M5 12h14M13 5l7 7-7 7"/>
                  </svg>
                </a>
              </div>
            </Reveal>
          </div>

          {/* Real theme-applied screenshots in a browser frame (4 looks). */}
          <Reveal delay={520} duration={900} y={30} style={{
            width: '100%', marginTop: isMobile ? 40 : 56,
            padding: isMobile ? '0 4px' : '0 8px',
          }}>
            <HeroShot t={t} isMobile={isMobile} />
          </Reveal>

          {!isMobile && <ScrollHint />}
        </section>

        {/* ── Before / After — tilted, gently floating composition ── */}
        <section id="features" style={{ padding: sectionPad, scrollMarginTop: 96, background: UI.soft }}>
          <div style={{ maxWidth: 1168, margin: '0 auto' }}>
            <Reveal>
              <SectionHeader title={t.section_compare} sub={t.section_compare_sub} family={headlineFamily} />
            </Reveal>

            <style>{`
              @keyframes compare-float-before {
                0%, 100% { transform: rotate(-2deg) scale(0.82) translateY(0); }
                50%      { transform: rotate(-2deg) scale(0.82) translateY(-8px); }
              }
              @keyframes compare-float-after {
                0%, 100% { transform: rotate(1.5deg) scale(0.92) translateY(0); }
                50%      { transform: rotate(1.5deg) scale(0.92) translateY(-12px); }
              }
            `}</style>

            {isMobile ? (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 20, marginTop: 40 }}>
                <Reveal delay={120}>
                  <GlassCompare label={t.before} caption={t.compare_cap_before} subdued>
                    <ScreenImage src="assets/compare-before.png" alt="ChatGPT default" />
                  </GlassCompare>
                </Reveal>
                <Reveal delay={280}>
                  <GlassCompare label={t.after} caption={t.compare_cap_after} highlight>
                    <ScreenImage src="assets/compare-after.png" alt="ChatGPT with Chroma AI" highlight />
                  </GlassCompare>
                </Reveal>
              </div>
            ) : (
              <div style={{ position: 'relative', marginTop: 40, aspectRatio: '1168 / 480' }}>
                <div style={{
                  position: 'absolute', inset: '20% 25% 20% 25%',
                  background: 'radial-gradient(ellipse 60% 50% at 70% 50%, rgba(20,110,245,0.14) 0%, transparent 70%)',
                  filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0,
                }} />
                <div style={{
                  position: 'absolute', left: '0%', top: '8%', width: '50%',
                  animation: 'compare-float-before 6s ease-in-out infinite',
                  transformOrigin: 'center', zIndex: 1, willChange: 'transform',
                }}>
                  <Reveal delay={120} y={20}>
                    <GlassCompare label={t.before} caption={t.compare_cap_before} subdued>
                      <ScreenImage src="assets/compare-before.png" alt="ChatGPT default" />
                    </GlassCompare>
                  </Reveal>
                </div>
                <div style={{
                  position: 'absolute', right: '0%', top: '0%', width: '54%',
                  animation: 'compare-float-after 7.5s ease-in-out infinite',
                  animationDelay: '0.4s', transformOrigin: 'center', zIndex: 2, willChange: 'transform',
                }}>
                  <Reveal delay={280} y={20}>
                    <GlassCompare label={t.after} caption={t.compare_cap_after} highlight>
                      <ScreenImage src="assets/compare-after.png" alt="ChatGPT with Chroma AI" highlight />
                    </GlassCompare>
                  </Reveal>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* ── Supported Platforms ─────────────────────────────────── */}
        <section style={{ padding: sectionPad, background: UI.white }}>
          <div style={{ maxWidth: 1168, margin: '0 auto' }}>
            <Reveal>
              <SectionHeader eyebrow="02" title={t.section_platforms} sub={t.section_platforms_sub} family={headlineFamily} size={44} />
            </Reveal>

            <div style={{
              marginTop: 40, ...card(), borderRadius: 20, padding: isMobile ? 16 : 28,
              display: 'grid',
              gridTemplateColumns: isNarrow ? '1fr' : 'repeat(3, 1fr)',
              gap: isMobile ? 12 : 16,
            }}>
              {[
                { id: 'chatgpt', name: 'ChatGPT', host: 'chatgpt.com' },
                { id: 'claude',  name: 'Claude',  host: 'claude.ai' },
                { id: 'gemini',  name: 'Gemini',  host: 'gemini.google.com' },
              ].map((p, i) => (
                <Reveal key={p.id} delay={120 + i * 120}>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: isMobile ? '16px 18px' : '20px 24px',
                    background: UI.soft, borderRadius: 14, border: `1px solid ${UI.border}`,
                    minWidth: 0,
                  }}>
                    <div style={{
                      width: isMobile ? 44 : 52, height: isMobile ? 44 : 52, flexShrink: 0,
                      borderRadius: 12, background: '#fff', border: `1px solid ${UI.border}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <PlatformIcon name={p.id} size={isMobile ? 26 : 30} />
                    </div>
                    <div style={{ minWidth: 0, overflow: 'hidden' }}>
                      <div style={{ fontSize: isMobile ? 16 : 17, fontWeight: 700, color: UI.ink, whiteSpace: 'nowrap', letterSpacing: '-0.01em' }}>{p.name}</div>
                      <div style={{ fontSize: 12, color: UI.dim, whiteSpace: 'nowrap', marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', letterSpacing: '-0.01em' }}>{p.host}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* ── Color Presets ───────────────────────────────────────── */}
        <section id="presets" style={{ padding: sectionPad, scrollMarginTop: 96, background: UI.soft }}>
          <div style={{ maxWidth: 1168, margin: '0 auto' }}>
            <Reveal>
              <SectionHeader eyebrow="03" title={t.section_presets} sub={t.section_presets_sub} family={headlineFamily} size={44} />
            </Reveal>

            <div style={{
              marginTop: 40, ...card(), borderRadius: 20, padding: isMobile ? 20 : 32,
              display: 'grid',
              gridTemplateColumns: `repeat(${isMobile ? 3 : isNarrow ? 4 : 6}, 1fr)`,
              gap: isMobile ? 14 : 20,
            }}>
              {COLOR_PRESETS.map((p, i) => (
                <Reveal key={p.id} delay={i * 50} duration={600} y={16}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
                    <div style={{
                      width: '100%', aspectRatio: '1 / 1', maxWidth: 120, borderRadius: 22,
                      background: p.bg,
                      boxShadow: `0 10px 26px ${p.accent}33, 0 0 0 1px rgba(16,28,52,0.04)`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      position: 'relative', overflow: 'hidden',
                    }}>
                      <div style={{
                        position: 'absolute', inset: 0,
                        background: `radial-gradient(circle at 30% 30%, ${p.accent}50 0%, transparent 60%)`,
                      }} />
                      <span style={{ color: p.text, fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', position: 'relative', zIndex: 1 }}>Aa</span>
                      <span style={{ position: 'absolute', left: 12, right: 12, bottom: 10, height: 4, borderRadius: 2, background: p.accent }} />
                    </div>
                    <span style={{ fontSize: 12, color: UI.body, fontWeight: 500 }}>{p.name}</span>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* ── Custom Theme Presets (NEW · BETA) ───────────────────── */}
        <section id="custom" style={{ padding: sectionPad, scrollMarginTop: 96, background: UI.tintBg }}>
          <div style={{ maxWidth: 1168, margin: '0 auto' }}>
            <Reveal>
              <SectionHeader
                eyebrow="04"
                title={t.section_custom}
                sub={t.section_custom_sub}
                family={headlineFamily}
                size={44}
                badge={t.badge_beta}
              />
            </Reveal>

            <div style={{
              marginTop: 40, display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 16 : 24,
            }}>
              <Reveal delay={120}>
                <CustomThemeCard theme={THEME_MSG} name={t.custom_msg_name} desc={t.custom_msg_desc} beta={t.badge_beta}>
                  <ThemeShot src="assets/theme-messenger.png" alt="Messenger theme on ChatGPT" fallback={<MessengerMock />} />
                </CustomThemeCard>
              </Reveal>
              <Reveal delay={260}>
                <CustomThemeCard theme={THEME_SHEET} name={t.custom_sheet_name} desc={t.custom_sheet_desc} beta={t.badge_beta}>
                  <ThemeShot src="assets/theme-sheet.png" alt="Sheet theme on Gemini" fallback={<SheetMock />} />
                </CustomThemeCard>
              </Reveal>
            </div>
          </div>
        </section>

        {/* ── Free vs Pro ─────────────────────────────────────────── */}
        <section id="plans" style={{ padding: sectionPad, scrollMarginTop: 96, background: UI.soft }}>
          <div style={{ maxWidth: 1168, margin: '0 auto' }}>
            <Reveal>
              <SectionHeader eyebrow="05" title={t.section_plan} family={headlineFamily} size={44} />
            </Reveal>

            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 16 : 20, marginTop: 40,
            }}>
              <Reveal delay={120}>
                <GlassPlan kind="free" title={t.plan_free} price={t.plan_free_price} desc={t.plan_free_desc}
                  features={[t.f_presets, t.f_overlay, t.f_glass, t.f_media5]} cta={t.plan_current} />
              </Reveal>
              <Reveal delay={280}>
                <GlassPlan kind="pro" title={t.plan_pro} price={t.plan_pro_price}
                  regularPrice={t.plan_pro_regular_price} promoBadge={t.plan_promo_badge}
                  promoOff={t.plan_promo_off} promoNote={t.plan_promo_note} desc={t.plan_pro_desc}
                  features={[t.f_media_unlimited, t.f_fonts, t.f_pro_editor, t.f_support]}
                  cta={isProUser === true ? t.plan_pro_active : t.plan_upgrade}
                  href={isProUser === true ? undefined : UPGRADE_PAGE_URL} />
              </Reveal>
            </div>
          </div>
        </section>

        {/* ── Footer CTA — confident blue band ────────────────────── */}
        <section style={{
          padding: isMobile ? '40px 20px 60px' : isNarrow ? '48px 32px 80px' : '60px 56px 100px',
          background: UI.white,
        }}>
          <Reveal y={32} duration={800}>
            <div style={{
              maxWidth: 920, margin: '0 auto',
              padding: isMobile ? '44px 24px' : isNarrow ? '56px 36px' : '68px 48px',
              borderRadius: 28,
              background: `linear-gradient(135deg, ${UI.blue2} 0%, ${UI.blue} 55%, ${UI.blueDk} 100%)`,
              textAlign: 'center', position: 'relative', overflow: 'hidden',
              boxShadow: '0 24px 60px rgba(20,110,245,0.30)',
            }}>
              <div style={{
                position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
                background: 'radial-gradient(circle at 50% -20%, rgba(255,255,255,0.45) 0%, transparent 55%)',
              }} />
              <h2 style={{
                fontFamily: headlineFamily,
                fontSize: 'clamp(32px, 4vw + 8px, 56px)',
                fontWeight: 700, lineHeight: 1.05,
                letterSpacing: '-0.035em', margin: '0 0 16px',
                position: 'relative', color: '#fff',
              }}>
                {t.footer_cta_a}<br />
                <span style={{ color: '#fff', opacity: 0.96 }}>{t.footer_cta_b}</span>{t.footer_cta_c}
              </h2>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.88)', marginBottom: 32, position: 'relative' }}>{t.open_sidebar_hint}</p>
              {CHROME_WEB_STORE_URL ? (
                <a href={CHROME_WEB_STORE_URL} target="_blank" rel="noopener noreferrer"
                  style={{ ...ctaInverse, position: 'relative' }}>
                  {t.cta_primary}
                  <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" style={{ marginLeft: 4 }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
              ) : (
                <button style={{ ...ctaInverse, position: 'relative' }}>
                  {t.cta_primary}
                  <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" style={{ marginLeft: 4 }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              )}
            </div>
          </Reveal>
        </section>

        {/* ── Footer ──────────────────────────────────────────────── */}
        <footer style={{
          padding: isMobile ? '24px 20px' : isNarrow ? '28px 32px' : '28px 56px',
          borderTop: `1px solid ${UI.border}`,
          fontSize: 12, color: UI.dim, background: UI.white,
        }}>
          <div style={{
            display: 'flex', flexDirection: isMobile ? 'column' : 'row',
            justifyContent: 'space-between', alignItems: 'center',
            gap: isMobile ? 10 : 0, textAlign: isMobile ? 'center' : 'left',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <ChromaLogo size={18} />
              <span style={{ color: UI.body }}>{t.footer_made}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <a href="/privacy.html" style={footerLink}>{t.footer_privacy}</a>
              <span style={{ color: UI.dim }}>·</span>
              <a href="/terms.html" style={footerLink}>{t.footer_terms}</a>
              <span style={{ color: UI.dim }}>·</span>
              <a href="/support.html" style={footerLink}>{t.footer_support}</a>
            </div>
          </div>
          <div style={{
            marginTop: 14, paddingTop: 14, borderTop: `1px solid ${UI.hair}`,
            fontSize: 11, color: UI.dim, lineHeight: 1.6, textAlign: 'center',
          }}>
            {t.footer_trademark}
          </div>
        </footer>
        </div>
      </div>
    );
  }

  // ─── Subcomponents ─────────────────────────────────────────────
  const ctaInverse = {
    display: 'inline-flex', alignItems: 'center', gap: 4, padding: '14px 28px',
    background: '#fff', color: UI.blue, border: 'none', borderRadius: 12,
    fontSize: 16, fontWeight: 700, fontFamily: 'Pretendard,system-ui,sans-serif',
    cursor: 'pointer', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
    boxShadow: '0 10px 28px rgba(0,0,0,0.18)', textDecoration: 'none',
  };

  function SectionHeader({ title, sub, family, size = 52, badge }) {
    const min = Math.round(size * 0.54);
    const offset = Math.round(size * 0.35);
    const fluid = `${(size / 20).toFixed(2)}vw + ${offset}px`;
    return (
      <div>
        <h2 style={{
          fontFamily: family,
          fontSize: `clamp(${min}px, ${fluid}, ${size}px)`,
          fontWeight: 700, lineHeight: 1.05,
          letterSpacing: '-0.035em', margin: '0 0 14px',
          whiteSpace: 'pre-line', color: UI.ink,
          display: 'inline-flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        }}>
          {title}
          {badge && (
            <span style={{
              fontSize: 12, fontWeight: 800, color: UI.blue,
              background: UI.tint, border: `1px solid rgba(20,110,245,0.22)`,
              borderRadius: 999, padding: '4px 11px', letterSpacing: '.06em',
              alignSelf: 'center',
            }}>{badge}</span>
          )}
        </h2>
        {sub && <p style={{ fontSize: 16, color: UI.body, margin: 0, lineHeight: 1.55 }}>{sub}</p>}
      </div>
    );
  }

  // ─── ScreenImage — actual capture wrapped in a light bezel ──────
  // Fade an image in once it has actually decoded — and cover the cached case
  // (the load event can fire before React attaches onLoad, which would otherwise
  // leave the image stuck at opacity 0 → a blank flash / blink on load).
  function FadeImg({ src, alt, style, ...rest }) {
    const ref = React.useRef(null);
    const [loaded, setLoaded] = useState(false);
    React.useEffect(() => {
      const el = ref.current;
      if (el && el.complete && el.naturalWidth > 0) setLoaded(true);
    }, [src]);
    return (
      <img ref={ref} {...rest} src={src} alt={alt} decoding="async"
        onLoad={() => setLoaded(true)}
        style={{ ...style, opacity: loaded ? 1 : 0, transition: 'opacity 420ms ease-out' }} />
    );
  }

  function ScreenImage({ src, alt, highlight }) {
    return (
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '16 / 10',
        borderRadius: 16, overflow: 'hidden', padding: 1,
        background: 'linear-gradient(135deg, #ffffff 0%, #eef1f7 60%, #e3e8f0 100%)',
        boxShadow: highlight
          ? `0 24px 60px rgba(16,28,52,0.18), 0 8px 20px rgba(20,110,245,0.18), 0 0 0 1px rgba(16,28,52,0.05)`
          : `0 16px 44px rgba(16,28,52,0.12), 0 0 0 1px rgba(16,28,52,0.05)`,
      }}>
        <div style={{ position: 'relative', width: '100%', height: '100%', borderRadius: 15, overflow: 'hidden', background: UI.soft }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 22,
            display: 'flex', alignItems: 'center', gap: 6, padding: '0 10px',
            background: 'linear-gradient(180deg, #f3f5f9 0%, #e9edf3 100%)',
            borderBottom: '1px solid rgba(16,28,52,0.08)', zIndex: 3, pointerEvents: 'none',
          }}>
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }} />
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }} />
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }} />
            <span style={{
              marginLeft: 'auto', marginRight: 'auto', paddingRight: 33,
              fontSize: 10, color: '#8a93a3', fontWeight: 600,
              fontFamily: 'ui-monospace, Menlo, monospace', letterSpacing: '.02em',
            }}>chatgpt.com</span>
          </div>
          <FadeImg src={src} alt={alt} loading="eager" fetchPriority="high"
            style={{
              width: '100%', height: 'calc(100% - 22px)', marginTop: 22,
              objectFit: 'cover', objectPosition: 'top', display: 'block',
            }} />
        </div>
      </div>
    );
  }

  function GlassCompare({ label, caption, children, highlight }) {
    return (
      <div style={{
        padding: 24, borderRadius: 18,
        background: '#fff',
        border: highlight ? `1px solid rgba(20,110,245,0.35)` : `1px solid ${UI.border}`,
        boxShadow: highlight
          ? '0 20px 50px rgba(20,110,245,0.16), 0 2px 8px rgba(16,28,52,0.05)'
          : '0 10px 32px rgba(16,28,52,0.08)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{
            fontSize: 11, fontWeight: 700,
            color: highlight ? UI.blue : UI.dim,
            letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>{label}</div>
          <div style={{ fontSize: 11, color: UI.dim }}>{caption}</div>
        </div>
        {children}
      </div>
    );
  }

  function GlassPlan({ kind, title, price, regularPrice, promoBadge, promoOff, promoNote, desc, features, cta, href }) {
    const isPro = kind === 'pro';
    const hasPromo = !!(isPro && regularPrice);
    const vw = useViewportWidth();
    const isTight = vw < 900;
    const isMobile = vw < 640;

    const cardPad = isMobile ? 24 : isTight ? 24 : 36;
    const priceSize = isMobile ? 40 : isTight ? 36 : 48;
    const featureGap = isTight ? 10 : 12;
    const sectionGap = isTight ? 22 : 28;

    // Pro card is a bold blue surface (white text); Free is a clean white card.
    const ctaStyle = {
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: '100%', padding: '13px', boxSizing: 'border-box',
      background: isPro ? '#fff' : '#fff',
      color: isPro ? UI.blue : UI.ink,
      border: isPro ? 'none' : `1px solid ${UI.border}`,
      borderRadius: 11,
      fontSize: 14, fontWeight: 700, fontFamily: 'Pretendard,system-ui,sans-serif',
      cursor: href ? 'pointer' : 'default', textDecoration: 'none',
      boxShadow: isPro ? '0 8px 20px rgba(0,0,0,0.16)' : 'none',
    };
    const txt = isPro ? '#fff' : UI.ink;
    const sub = isPro ? 'rgba(255,255,255,0.82)' : UI.body;
    return (
      <div style={{
        padding: cardPad, borderRadius: 22,
        background: isPro
          ? `linear-gradient(150deg, ${UI.blue2} 0%, ${UI.blue} 55%, ${UI.blueDk} 100%)`
          : '#fff',
        border: isPro ? 'none' : `1px solid ${UI.border}`,
        boxShadow: isPro
          ? '0 24px 56px rgba(20,110,245,0.32)'
          : '0 10px 32px rgba(16,28,52,0.06)',
        position: 'relative', minWidth: 0, overflow: 'hidden',
      }}>
        {isPro && (
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
            background: 'radial-gradient(circle at 80% -10%, rgba(255,255,255,0.4) 0%, transparent 50%)',
          }} />
        )}
        {isPro && (
          <div style={{
            position: 'absolute', top: isTight ? 16 : 24, right: isTight ? 16 : 24, zIndex: 1,
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px',
            background: hasPromo ? 'linear-gradient(135deg, #fbbf24, #f59e0b)' : 'rgba(255,255,255,0.22)',
            color: hasPromo ? '#3a2400' : '#fff', fontSize: 10.5, fontWeight: 700,
            fontFamily: 'Pretendard,system-ui,sans-serif',
            letterSpacing: hasPromo ? '0' : '.08em',
            textTransform: hasPromo ? 'none' : 'uppercase',
            borderRadius: 999,
            border: hasPromo ? 'none' : '1px solid rgba(255,255,255,0.35)',
            boxShadow: hasPromo ? '0 4px 12px rgba(245,158,11,0.4)' : 'none',
            whiteSpace: 'nowrap',
          }}>
            {hasPromo ? (
              <>
                <span>{promoBadge}</span>
                <span style={{ opacity: 0.5 }}>·</span>
                <span style={{ letterSpacing: '.02em' }}>{promoOff}</span>
              </>
            ) : 'RECOMMENDED'}
          </div>
        )}
        <div style={{ fontSize: 14, fontWeight: 600, color: sub, marginBottom: 12, position: 'relative' }}>{title}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 10, marginBottom: hasPromo ? 4 : 8, color: txt, position: 'relative' }}>
          <span style={{ fontSize: priceSize, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>{price}</span>
          {hasPromo && (
            <span style={{
              fontSize: isMobile ? 16 : 18, color: 'rgba(255,255,255,0.7)',
              textDecoration: 'line-through', textDecorationThickness: '1.5px',
              letterSpacing: '-0.02em', fontWeight: 600,
            }}>{regularPrice}</span>
          )}
        </div>
        {hasPromo && promoNote && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', marginBottom: 12,
            background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.3)',
            borderRadius: 7, fontSize: 11.5, fontWeight: 600, color: '#fff',
            fontFamily: 'Pretendard,system-ui,sans-serif', letterSpacing: '-0.01em', position: 'relative',
          }}>
            <svg width={11} height={11} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M13 2 L4 14 L11 14 L11 22 L20 10 L13 10 Z" />
            </svg>
            {promoNote}
          </div>
        )}
        <div style={{ fontSize: 13, color: sub, marginBottom: sectionGap, position: 'relative' }}>{desc}</div>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: featureGap,
          paddingBottom: sectionGap, marginBottom: sectionGap,
          borderBottom: isPro ? '1px solid rgba(255,255,255,0.22)' : `1px solid ${UI.hair}`,
          position: 'relative',
        }}>
          {features.map((f, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: txt, lineHeight: 1.45 }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: isPro ? 'rgba(255,255,255,0.25)' : UI.tint,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1,
              }}>
                <svg width={10} height={10} viewBox="0 0 24 24" fill="none" stroke={isPro ? '#fff' : UI.blue} strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
              </span>
              <span>{f}</span>
            </div>
          ))}
        </div>
        {href ? (
          <a href={href} style={{ ...ctaStyle, position: 'relative' }}>{cta}</a>
        ) : (
          <button style={{ ...ctaStyle, position: 'relative' }}>{cta}</button>
        )}
      </div>
    );
  }

  // ─── Custom theme card (C) + mini layout mockups ───────────────
  function CustomThemeCard({ theme, name, desc, beta, children }) {
    return (
      <div style={{ ...card(true), borderRadius: 22, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{
          padding: '24px 24px 0', position: 'relative',
          background: `linear-gradient(180deg, ${theme.tint} 0%, rgba(255,255,255,0) 100%)`,
        }}>
          {children}
        </div>
        <div style={{ padding: '20px 24px 26px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ fontSize: 19, fontWeight: 700, color: UI.ink, letterSpacing: '-0.02em' }}>{name}</span>
            <span style={{
              fontSize: 9.5, fontWeight: 800, color: theme.accent,
              background: theme.tint, borderRadius: 999, padding: '3px 8px', letterSpacing: '.06em',
            }}>{beta}</span>
          </div>
          <p style={{ margin: '9px 0 0', fontSize: 13.5, color: UI.body, lineHeight: 1.55 }}>{desc}</p>
        </div>
      </div>
    );
  }

  // Real theme screenshot with a graceful fallback to the code mockup
  // (so the section never shows a broken image before the PNGs are added).
  function ThemeShot({ src, alt, fallback }) {
    const [failed, setFailed] = useState(false);
    if (failed) return fallback;
    return (
      <div style={{
        height: 196, borderRadius: '14px 14px 0 0', overflow: 'hidden',
        border: `1px solid ${UI.border}`, borderBottom: 'none', background: UI.soft,
        boxShadow: 'inset 0 -8px 20px rgba(16,28,52,0.04)',
      }}>
        <FadeImg src={src} alt={alt} loading="lazy"
          onError={() => setFailed(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
      </div>
    );
  }

  // Messenger-style mini mock: side rail of avatars + chat bubbles.
  function MessengerMock() {
    const a = THEME_MSG.accent;
    return (
      <div style={{
        height: 168, borderRadius: '14px 14px 0 0', overflow: 'hidden',
        border: `1px solid ${UI.border}`, borderBottom: 'none',
        background: '#fafafe', display: 'flex',
        boxShadow: '0 -1px 0 rgba(16,28,52,0.02)',
      }}>
        <div style={{ width: 46, background: '#fff', borderRight: `1px solid ${UI.border}`, padding: '12px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9 }}>
          <div style={{ width: 24, height: 24, borderRadius: 8, background: a, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width={13} height={13} viewBox="0 0 24 24" fill="#fff"><path d="M12 3C7 3 3 6.4 3 10.6c0 2.4 1.3 4.5 3.4 5.9L6 20l3.7-1.6c.7.2 1.5.3 2.3.3 5 0 9-3.4 9-7.6S17 3 12 3z"/></svg>
          </div>
          {['#cfd2e6', '#d7dae9', '#dfe1ee'].map((c, i) => (
            <div key={i} style={{ width: 22, height: 22, borderRadius: '50%', background: c }} />
          ))}
        </div>
        <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ alignSelf: 'flex-start', maxWidth: '74%', height: 13, borderRadius: 8, background: '#e9eaf3' }} />
          <div style={{ alignSelf: 'flex-start', width: '52%', height: 13, borderRadius: 8, background: '#e9eaf3' }} />
          <div style={{ alignSelf: 'flex-end', maxWidth: '70%', height: 14, borderRadius: 8, background: a, boxShadow: `0 4px 10px ${a}40` }} />
          <div style={{ alignSelf: 'flex-end', width: '40%', height: 14, borderRadius: 8, background: a, opacity: 0.9 }} />
          <div style={{ marginTop: 'auto', height: 22, borderRadius: 11, background: '#fff', border: `1px solid ${UI.border}` }} />
        </div>
      </div>
    );
  }

  // Sheet-style mini mock: green header row + grid cells + one highlighted cell.
  function SheetMock() {
    const a = THEME_SHEET.accent;
    const rows = 4, cols = 4;
    return (
      <div style={{
        height: 168, borderRadius: '14px 14px 0 0', overflow: 'hidden',
        border: `1px solid ${UI.border}`, borderBottom: 'none', background: '#fff',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ height: 26, background: a, display: 'flex', alignItems: 'center', gap: 6, padding: '0 10px' }}>
          <div style={{ width: 12, height: 12, borderRadius: 3, background: 'rgba(255,255,255,0.9)' }} />
          <div style={{ width: 60, height: 7, borderRadius: 4, background: 'rgba(255,255,255,0.7)' }} />
        </div>
        <div style={{ flex: 1, display: 'grid', gridTemplateRows: `repeat(${rows}, 1fr)`, gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
          {Array.from({ length: rows * cols }).map((_, i) => {
            const r = Math.floor(i / cols), c = i % cols;
            const highlight = r === 1 && c === 2;
            return (
              <div key={i} style={{
                borderRight: c < cols - 1 ? `1px solid ${UI.hair}` : 'none',
                borderBottom: r < rows - 1 ? `1px solid ${UI.hair}` : 'none',
                background: highlight ? `${a}16` : (r === 0 ? '#f7faf8' : '#fff'),
                outline: highlight ? `1.5px solid ${a}` : 'none', outlineOffset: -1.5,
                display: 'flex', alignItems: 'center', padding: '0 7px',
              }}>
                <div style={{ width: c === 0 ? '40%' : '64%', height: 5, borderRadius: 3, background: r === 0 ? a : '#dfe3e0', opacity: r === 0 ? 0.8 : 1 }} />
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // ─── Scroll-down hint ──────────────────────────────────────────
  function ScrollHint() {
    const [opacity, setOpacity] = useState(0);
    React.useEffect(() => {
      const prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const fadeInTimer = setTimeout(() => setOpacity(prefersReduce ? 0.9 : 1), 1500);
      const onScroll = () => {
        const y = window.scrollY;
        const next = Math.max(0, 1 - y / 320);
        setOpacity(prev => Math.min(prev || 0, next));
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => {
        clearTimeout(fadeInTimer);
        window.removeEventListener('scroll', onScroll);
      };
    }, []);

    return (
      <>
        <style>{`
          @keyframes ate-bounce-chevron {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(8px); }
          }
        `}</style>
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 28,
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          pointerEvents: 'none', opacity,
          transition: 'opacity 700ms cubic-bezier(0.16,1,0.3,1)', zIndex: 5,
        }}>
          <svg width={28} height={18} viewBox="0 0 28 18" fill="none"
            style={{ animation: 'ate-bounce-chevron 1.4s ease-in-out infinite' }}>
            <path d="M2 3 L14 14 L26 3" stroke={UI.dim} strokeWidth="2.5"
              strokeLinecap="round" strokeLinejoin="round" fill="none" />
          </svg>
        </div>
      </>
    );
  }

  // ─── Hero product shot — real theme screenshots in a browser frame ──
  // Four real looks the extension produces, crossfading inside one window:
  // the two custom presets (Messenger on ChatGPT, Sheet on Gemini) plus two
  // media-wallpaper examples on ChatGPT. Load-gated so it never flashes black.
  function HeroShot({ t, isMobile }) {
    const SHOTS = [
      { src: 'assets/theme-messenger.png', label: t.custom_msg_name, host: 'chatgpt.com',
        alt: 'Messenger theme applied to ChatGPT', accent: THEME_MSG.accent, isNew: true, pos: 'top center' },
      { src: 'assets/hero-1.png', label: 'Cyberpunk', host: 'chatgpt.com',
        alt: 'Media wallpaper applied to ChatGPT', accent: '#a855f7', isNew: false, pos: 'center' },
      { src: 'assets/theme-sheet.png', label: t.custom_sheet_name, host: 'gemini.google.com',
        alt: 'Sheet theme applied to Gemini', accent: THEME_SHEET.accent, isNew: true, pos: 'top center' },
      { src: 'assets/hero-2.png', label: 'Landscape', host: 'chatgpt.com',
        alt: 'Media wallpaper applied to ChatGPT', accent: '#d97706', isNew: false, pos: 'center' },
    ];
    const [active, setActive] = useState(0);
    const [loaded, setLoaded] = useState({});
    const timerRef = React.useRef(null);
    const startTimer = () => {
      if (timerRef.current) clearInterval(timerRef.current);
      timerRef.current = setInterval(() => setActive((a) => (a + 1) % SHOTS.length), 4200);
    };
    React.useEffect(() => {
      startTimer();
      return () => clearInterval(timerRef.current);
    }, []);
    // Jump to a look when a dot is clicked, and restart the auto-advance timer
    // so it doesn't flip again immediately after.
    const goTo = (i) => { setActive(i); startTimer(); };
    const cur = SHOTS[active];
    const barH = isMobile ? 28 : 32;

    return (
      <div style={{ position: 'relative', width: '100%', maxWidth: 960, margin: '0 auto' }}>
        {/* soft blue glow behind the frame */}
        <div style={{
          position: 'absolute', inset: '-8% -4% -2%', zIndex: 0,
          background: 'radial-gradient(ellipse 62% 60% at 50% 28%, rgba(20,110,245,0.20) 0%, transparent 66%)',
          filter: 'blur(34px)', pointerEvents: 'none',
        }} />

        {/* browser frame */}
        <div style={{
          position: 'relative', zIndex: 1, borderRadius: isMobile ? 14 : 18,
          overflow: 'hidden', padding: 1,
          background: 'linear-gradient(135deg, #ffffff 0%, #eef1f7 60%, #e3e8f0 100%)',
          boxShadow: `
            0 32px 72px rgba(16,28,52,0.20),
            0 12px 26px rgba(20,110,245,0.12),
            0 0 0 1px rgba(16,28,52,0.05)
          `,
        }}>
          <div style={{
            position: 'relative', borderRadius: isMobile ? 13 : 17, overflow: 'hidden',
            background: UI.soft, aspectRatio: '16 / 10',
          }}>
            {/* window chrome */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: barH, zIndex: 3,
              display: 'flex', alignItems: 'center', gap: 6, padding: '0 13px',
              background: 'linear-gradient(180deg, #f3f5f9 0%, #e9edf3 100%)',
              borderBottom: '1px solid rgba(16,28,52,0.08)',
            }}>
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }} />
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }} />
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }} />
            </div>

            {/* real screenshots — calm crossfade, load-gated to avoid a black flash */}
            {SHOTS.map((s, i) => (
              <img key={s.src} src={s.src} alt={s.alt}
                loading={i === 0 ? 'eager' : 'lazy'} fetchPriority={i === 0 ? 'high' : 'auto'} decoding="async"
                onLoad={() => setLoaded((p) => ({ ...p, [i]: true }))}
                style={{
                  position: 'absolute', top: barH, left: 0, width: '100%',
                  height: `calc(100% - ${barH}px)`,
                  objectFit: 'cover', objectPosition: s.pos, display: 'block',
                  opacity: active === i && loaded[i] ? 1 : 0,
                  transition: 'opacity 900ms ease-in-out',
                }} />
            ))}

            {/* theme label pill — names the look on screen */}
            <div style={{
              position: 'absolute', bottom: isMobile ? 12 : 16, left: isMobile ? 12 : 16, zIndex: 4,
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px 6px 8px', borderRadius: 999,
              background: 'rgba(255,255,255,0.92)',
              backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
              border: '1px solid rgba(16,28,52,0.06)',
              boxShadow: '0 8px 20px rgba(16,28,52,0.16)',
            }}>
              <span style={{ width: 18, height: 18, borderRadius: 6, background: cur.accent, transition: 'background 300ms', flexShrink: 0 }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, color: UI.ink, letterSpacing: '-0.01em' }}>{cur.label}</span>
              {cur.isNew && (
                <span style={{ fontSize: 9.5, fontWeight: 800, color: cur.accent, letterSpacing: '.06em', transition: 'color 300ms' }}>{t.badge_new}</span>
              )}
            </div>
          </div>
        </div>

        {/* progress dots — click to jump to a look; active one elongates */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 0, marginTop: 8 }}>
          {SHOTS.map((s, i) => (
            <button key={i} type="button" onClick={() => goTo(i)}
              aria-label={s.label} aria-current={active === i}
              style={{
                padding: '8px 4px', border: 'none', background: 'transparent',
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
              }}>
              <span style={{
                display: 'block', width: active === i ? 22 : 7, height: 7, borderRadius: 4,
                background: active === i ? UI.blue : UI.border,
                transition: 'width 300ms, background 300ms',
              }} />
            </button>
          ))}
        </div>
      </div>
    );
  }

  window.VariantGlass = VariantGlass;
})();