// Main LP component
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// ─── i18n context ───
// value: { t: dict, lang: 'ja' | 'en' }
const I18nContext = createContext(null);
function useT() { return (useContext(I18nContext) || {}).t || {}; }
function useLang() { return (useContext(I18nContext) || {}).lang || 'ja'; }

const ACCENT_OPTIONS = [
  { id: 'icon',  color: '#2A4E88', label: 'App Icon' },
  { id: 'blue',  color: '#4A90D9', label: 'Seed Blue' },
  { id: 'plum',  color: '#8B5CF6', label: 'Plum' },
  { id: 'sakura',color: '#E35D8F', label: 'Sakura' },
  { id: 'moss',  color: '#4FA36B', label: 'Moss' },
];

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function useScrolled() {
  const [s, setS] = useState(false);
  useEffect(() => {
    const h = () => setS(window.scrollY > 10);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  return s;
}

// ─── NAV ───
function Nav({ tweakOn, setTweakOn }) {
  const scrolled = useScrolled();
  const t = useT();
  return (
    <div className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark">Y</span>
          <span>YomiAI</span>
        </a>
        <div className="nav-links">
          <a href="#features">{t.navFeatures}</a>
          <a href="#gallery">{t.navGallery}</a>
          <a href="#pricing">{t.navPricing}</a>
          <a href="#faq">{t.navFaq}</a>
        </div>
        <div className="nav-actions">
          <a href="#download" className="btn btn-primary">
            {t.navDownload}
          </a>
        </div>
      </div>
    </div>
  );
}

// ─── HERO ───
function Hero({ accent, theme }) {
  const t = useT();
  const lang = useLang();
  return (
    <section className="hero" id="top">
      <div className="hero-bg"/>
      <div className="container">
        <div className="hero-grid">
          <div className="reveal in">
            <div className="eyebrow">
              <span className="dot"/>
              <span className="mono">{t.heroEyebrow}</span>
            </div>
            <h1 className="display" style={{ marginTop: 24 }}>
              {t.heroTitleLine1}<br/>
              {t.heroTitleLine2}<br/>
              <span style={{ color: 'var(--accent)' }}>{t.heroTitleLine3}</span>{t.heroTitleLine3Suffix}
            </h1>
            <div className="text-en mono">{t.heroEn}</div>
            <p className="lede jp" style={{ marginTop: 28 }}>
              {t.heroLede}
            </p>
            <div className="hero-cta">
              <a href="#download" className="btn btn-primary btn-lg">
                {t.heroCtaPrimary}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a href="#features" className="btn btn-ghost btn-lg">{t.heroCtaGhost}</a>
            </div>
            <div className="hero-meta">
              <span><span className="chk"><svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg></span> {t.heroMeta1}</span>
              <span><span className="chk"><svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg></span> {t.heroMeta2}</span>
              <span><span className="chk"><svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg></span> {t.heroMeta3}</span>
            </div>
          </div>

          <div className="phone-stage">
            <div className="grid-lines"/>
            <div className="hero-phone-scale">
              <IOSDevice width={402} height={874} dark={theme === 'dark'}>
                <YomiHome dark={theme === 'dark'} accent={accent} lang={lang}/>
              </IOSDevice>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── METRICS ───
function Metrics() {
  const t = useT();
  return (
    <section style={{ padding: '0 0 0' }}>
      <div className="container">
        <div className="metrics">
          {[
            { n: '2.5k+', l: t.metricSources },
            { n: 'Top 5', l: t.metricPicks },
            { n: '100%', l: t.metricJP },
            { n: '0', l: t.metricAdFree },
          ].map((m, i) => (
            <div key={i} className="metric">
              <div className="metric-num">{m.n}</div>
              <div className="metric-lbl">{m.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FEATURE 1: AI recommendation demo ───
function AIRecommendDemo({ accent, dark }) {
  const t = useT();
  const [activeTag, setActiveTag] = useState(0);
  const tags = [
    { label: t.f01TagTech, items: t.f01ItemsTech },
    { label: t.f01TagBiz,  items: t.f01ItemsBiz },
    { label: t.f01TagDesign, items: t.f01ItemsDesign },
  ];
  useEffect(() => {
    const id = setInterval(() => setActiveTag(t => (t + 1) % tags.length), 2800);
    return () => clearInterval(id);
  }, []);

  const currentItems = tags[activeTag].items;

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      {/* Input pill */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px', borderRadius: 12,
        background: dark ? 'rgba(255,255,255,0.05)' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        fontSize: 13,
        flexWrap: 'nowrap',
        overflow: 'hidden',
      }}>
        <Icon name="sparkle" size={14} color={accent}/>
        <span style={{ color: 'var(--fg-muted)', flexShrink: 0 }}>{t.f01TagsLabel}</span>
        <div style={{ display: 'flex', gap: 6, flex: 1, minWidth: 0, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {tags.map((t, i) => (
            <span key={i} style={{
              padding: '3px 8px', borderRadius: 999,
              background: i === activeTag ? accent : 'transparent',
              color: i === activeTag ? 'white' : 'var(--fg-muted)',
              border: i === activeTag ? 'none' : `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'oklch(0.90 0.006 250)'}`,
              fontSize: 11, fontWeight: 500,
              transition: 'all 0.4s ease',
              fontFamily: '-apple-system, "Hiragino Sans", system-ui',
              whiteSpace: 'nowrap',
              flexShrink: 0,
            }}>{t.label}</span>
          ))}
        </div>
        <span style={{
          width: 6, height: 6, borderRadius: 3, background: accent,
          animation: 'pulse-dot 1s ease-in-out infinite',
        }}/>
      </div>

      {/* Output list */}
      <div style={{
        background: dark ? 'rgba(255,255,255,0.03)' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        borderRadius: 12, padding: 14,
        display: 'flex', flexDirection: 'column', gap: 10,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          fontSize: 10, fontFamily: 'JetBrains Mono, monospace',
          color: 'var(--fg-subtle)', letterSpacing: 0.1, textTransform: 'uppercase',
          display: 'flex', justifyContent: 'space-between',
        }}>
          <span>{t.f01Results}</span>
          <span>{t.f01ResultsCount}</span>
        </div>
        {currentItems.map((item, i) => (
          <div key={`${activeTag}-${i}`} style={{
            display: 'flex', gap: 10, alignItems: 'center',
            animation: `slide-in 0.5s ${i * 0.08}s cubic-bezier(0.16, 1, 0.3, 1) backwards`,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6,
              background: `oklch(${dark ? 0.3 : 0.92} 0.05 ${220 + i * 40})`,
              flexShrink: 0,
            }}/>
            <span style={{
              fontSize: 13, color: 'var(--fg)',
              fontFamily: '-apple-system, "Hiragino Sans", system-ui',
              letterSpacing: -0.1,
              flex: 1,
            }}>{item}</span>
            <span style={{
              fontSize: 10, fontFamily: 'JetBrains Mono, monospace',
              color: accent, fontWeight: 500,
              padding: '2px 6px',
              borderRadius: 4,
              background: `${accent}15`,
            }}>{92 - i * 7}%</span>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes slide-in {
          from { opacity: 0; transform: translateX(-8px); }
          to { opacity: 1; transform: none; }
        }
        @keyframes pulse-dot {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.3; }
        }
      `}</style>
    </div>
  );
}

// ─── FEATURE 2: Category lock interactive ───
function CategoryLockDemo({ accent, dark }) {
  const t = useT();
  const lang = useLang();
  const [unlocked, setUnlocked] = useState(false);
  const [showSheet, setShowSheet] = useState(false);

  const handleClick = () => {
    if (unlocked) {
      setUnlocked(false);
      return;
    }
    setShowSheet(true);
    setTimeout(() => {
      setUnlocked(true);
      setShowSheet(false);
    }, 1400);
  };

  return (
    <div style={{
      display: 'flex', gap: 16, alignItems: 'center',
      minHeight: 280,
      flexWrap: 'wrap',
      justifyContent: 'center',
    }}>
      <div className="cat-lock-phone" style={{
        flex: '0 0 200px',
        position: 'relative', height: 360,
        borderRadius: 28,
        overflow: 'hidden',
        background: dark ? '#000' : '#F2F2F7',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        boxShadow: '0 10px 28px -10px rgba(0,0,0,0.2)',
      }}>
        <YomiLockScreen dark={dark} accent={accent} unlocked={unlocked} lang={lang}/>
        {showSheet && <BiometricSheet dark={dark} accent={accent} lang={lang}/>}
      </div>

      <div style={{ flex: '1 1 180px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontSize: 12, color: 'var(--fg-subtle)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.08 }}>
          {t.f02TryIt}
        </div>
        <button
          onClick={handleClick}
          style={{
            padding: '12px 14px',
            background: unlocked ? '#E5F7EA' : 'var(--bg-2)',
            color: unlocked ? '#2d7a3f' : 'var(--fg)',
            border: `1px solid ${unlocked ? '#B9E5C4' : 'var(--line)'}`,
            borderRadius: 10, cursor: 'pointer',
            fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
            letterSpacing: -0.1,
            display: 'flex', alignItems: 'center', gap: 8,
            transition: 'all 0.2s ease',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            minWidth: 0,
          }}
        >
          <Icon name={unlocked ? 'unlock' : 'fingerprint'} size={14}
            color={unlocked ? '#2d7a3f' : 'var(--accent)'} stroke={2}/>
          {unlocked ? t.f02BtnUnlocked : t.f02BtnLocked}
        </button>
        <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.6, marginTop: 4 }}>
          {t.f02Hint1}
          <br/>
          {t.f02Hint2}
        </div>
      </div>
    </div>
  );
}

// ─── FEATURES SECTION ───
function Features({ accent, theme }) {
  const t = useT();
  const dark = theme === 'dark';
  return (
    <section id="features">
      <div className="container">
        <div className="section-head reveal">
          <div className="section-label">{t.featuresLabel}</div>
          <h2 className="h2">{t.featuresTitle1}<br/>{t.featuresTitle2}</h2>
          <p className="lede jp" style={{ marginTop: 16 }}>
            {t.featuresLede}
          </p>
        </div>

        <div className="feature-row">
          <div className="feature-card wide reveal">
            <div className="feature-tag">{t.fDigestTag}</div>
            <h3 className="h3">{t.fDigestTitle}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.fDigestBody}</p>
            <div className="demo"><DigestDemo accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f01Tag}</div>
            <h3 className="h3">{t.f01Title}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f01Body}</p>
            <div className="demo"><AIRecommendDemo accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.fTranslationTag}</div>
            <h3 className="h3">{t.fTranslationTitle1}<br/>{t.fTranslationTitle2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.fTranslationBody}</p>
            <div className="demo"><TranslationDemo accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f02Tag}</div>
            <h3 className="h3">{t.f02Title1}<br/>{t.f02Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f02Body}</p>
            <div className="demo"><CategoryLockDemo accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.fSearchTag}</div>
            <h3 className="h3">{t.fSearchTitle1}<br/>{t.fSearchTitle2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.fSearchBody}</p>
            <div className="demo" style={{ padding: 18 }}><SearchDemo accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f03Tag}</div>
            <h3 className="h3">{t.f03Title1}<br/>{t.f03Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f03Body}</p>
            <div className="demo" style={{ padding: 0 }}><OfflineViz accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f04Tag}</div>
            <h3 className="h3">{t.f04Title1}<br/>{t.f04Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f04Body}</p>
            <div className="demo" style={{ padding: 18 }}><AutoCategoryViz accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f05Tag}</div>
            <h3 className="h3">{t.f05Title1}<br/>{t.f05Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f05Body}</p>
            <div className="demo" style={{ padding: 18 }}><WidgetViz accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f06Tag}</div>
            <h3 className="h3">{t.f06Title1}<br/>{t.f06Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f06Body}</p>
            <div className="demo" style={{ padding: 18 }}><MaterialYouViz accent={accent} dark={dark}/></div>
          </div>

          <div className="feature-card reveal">
            <div className="feature-tag">{t.f07Tag}</div>
            <h3 className="h3">{t.f07Title1}<br/>{t.f07Title2}</h3>
            <p className="jp" style={{ color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.65, margin: 0 }}>{t.f07Body}</p>
            <div className="demo" style={{ padding: 18 }}><AccessibilityViz accent={accent} dark={dark}/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function OfflineViz({ accent, dark }) {
  const t = useT();
  return (
    <div style={{
      position: 'relative', width: '100%', minHeight: 200, overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 28,
      paddingTop: 8, paddingBottom: 8,
    }}>
      {/* cloud connection arcs */}
      <svg viewBox="0 0 300 120" width="100%" height="60" style={{ position: 'absolute', top: '50%', left: 0, transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <defs>
          <linearGradient id="off-gradient" x1="0" x2="1">
            <stop offset="0%" stopColor={accent} stopOpacity="0"/>
            <stop offset="50%" stopColor={accent} stopOpacity="0.5"/>
            <stop offset="100%" stopColor={accent} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M20 60 Q 150 20 280 60" stroke="url(#off-gradient)" strokeWidth="1" strokeDasharray="3 4" fill="none"/>
        <path d="M20 80 Q 150 40 280 80" stroke="url(#off-gradient)" strokeWidth="1" strokeDasharray="3 4" fill="none" opacity="0.5"/>
      </svg>

      <div style={{
        position: 'relative', zIndex: 1,
        display: 'flex', gap: 14, alignItems: 'center',
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12, display: 'grid', placeItems: 'center',
          background: dark ? 'rgba(255,255,255,0.06)' : '#fff',
          border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'oklch(0.90 0.006 250)'}`,
        }}>
          <Icon name="cloud" size={22} color="var(--fg-subtle)"/>
        </div>
        <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: 'var(--fg-subtle)' }}>
          ×<br/>{t.f03Offline}
        </div>
      </div>

      <div style={{
        position: 'relative', zIndex: 1,
        padding: '10px 14px', borderRadius: 12,
        background: dark ? 'rgba(52,199,89,0.1)' : 'rgba(52,199,89,0.08)',
        border: '1px solid rgba(52,199,89,0.3)',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <Icon name="download" size={14} color="#34C759" stroke={2}/>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, color: dark ? '#7CE08F' : '#2d7a3f' }}>{t.f03Cached}</div>
          <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: dark ? '#7CE08F' : '#2d7a3f', opacity: 0.7 }}>{t.f03CachedSub}</div>
        </div>
      </div>
    </div>
  );
}

function AutoCategoryViz({ accent, dark }) {
  const t = useT();
  const items = [
    { t: t.f04Item1, cat: 'Tech', hue: 240 },
    { t: t.f04Item2, cat: 'Biz', hue: 30 },
    { t: t.f04Item3, cat: 'Design', hue: 300 },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 12px', borderRadius: 10,
          background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
          border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
          fontSize: 12.5,
        }}>
          <div style={{
            width: 20, height: 20, borderRadius: 5,
            background: `oklch(${dark ? 0.3 : 0.92} 0.05 ${it.hue})`,
          }}/>
          <span style={{ flex: 1, color: 'var(--fg)', fontFamily: '-apple-system, "Hiragino Sans", system-ui' }}>{it.t}</span>
          <svg width="18" height="10" viewBox="0 0 24 14"><path d="M1 7h20m0 0l-5-5m5 5l-5 5" stroke={accent} strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
          <span style={{
            padding: '2px 8px', borderRadius: 999,
            background: `${accent}15`, color: accent,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 500,
          }}>{it.cat}</span>
        </div>
      ))}
    </div>
  );
}

function WidgetViz({ accent, dark }) {
  const t = useT();
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', justifyContent: 'center' }}>
      {/* small widget */}
      <div style={{
        width: 100, height: 100, borderRadius: 18, padding: 12,
        background: `linear-gradient(135deg, ${accent}, color-mix(in oklch, ${accent} 65%, #7B4AD9))`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        color: 'white',
        boxShadow: `0 10px 22px -6px ${accent}55`,
      }}>
        <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.4, opacity: 0.8 }}>
          {t.f05Pick}
        </div>
        <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.25, fontFamily: '-apple-system, "Hiragino Sans", system-ui' }}>
          {t.f05PickBody}
        </div>
      </div>
      {/* medium widget */}
      <div style={{
        width: 220, height: 100, borderRadius: 18, padding: 12,
        background: dark ? '#1C1C1E' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'var(--fg-subtle)', letterSpacing: 0.4 }}>{t.f05Latest}</div>
        {[t.f05Latest1, t.f05Latest2, t.f05Latest3].map((txt, i) => (
          <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{ width: 4, height: 4, borderRadius: 2, background: accent }}/>
            <span style={{ fontSize: 11, color: 'var(--fg)', fontFamily: '-apple-system, "Hiragino Sans", system-ui' }}>{txt}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MaterialYouViz({ accent, dark }) {
  // 3 wallpaper-derived palettes that the app could adapt to
  const palettes = [
    { name: 'Sunset',  seed: 'oklch(0.72 0.14 35)',  surface: 'oklch(0.96 0.02 35)',  surfaceDark: 'oklch(0.22 0.03 35)' },
    { name: 'Forest',  seed: 'oklch(0.62 0.12 145)', surface: 'oklch(0.95 0.02 145)', surfaceDark: 'oklch(0.22 0.03 145)' },
    { name: 'Ocean',   seed: 'oklch(0.62 0.14 245)', surface: 'oklch(0.95 0.02 245)', surfaceDark: 'oklch(0.22 0.03 245)' },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % palettes.length), 2200);
    return () => clearInterval(id);
  }, []);
  const p = palettes[idx];
  const surface = dark ? p.surfaceDark : p.surface;
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', justifyContent: 'center' }}>
      {/* wallpaper swatch */}
      <div style={{
        width: 78, height: 110, borderRadius: 14,
        background: `linear-gradient(155deg, ${p.seed}, color-mix(in oklch, ${p.seed} 55%, ${dark ? '#000' : '#fff'}))`,
        display: 'flex', alignItems: 'flex-end', padding: 8,
        boxShadow: `0 10px 22px -8px ${p.seed}77`,
        transition: 'background 600ms ease',
      }}>
        <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(255,255,255,0.85)' }}>
          {p.name}
        </div>
      </div>
      {/* arrow */}
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 14, color: 'var(--fg-subtle)' }}>→</div>
      {/* mini app preview */}
      <div style={{
        width: 130, height: 110, borderRadius: 14, padding: 10,
        background: surface,
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        display: 'flex', flexDirection: 'column', gap: 6,
        transition: 'background 600ms ease',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 14, height: 14, borderRadius: 4, background: p.seed, transition: 'background 600ms ease' }}/>
          <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--fg)', fontFamily: '-apple-system, "Hiragino Sans", system-ui' }}>YomiAI</div>
        </div>
        {[0.85, 0.6, 0.7].map((w, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            <div style={{ height: 4, width: `${w * 100}%`, borderRadius: 2, background: dark ? 'rgba(255,255,255,0.18)' : 'oklch(0.85 0.006 250)' }}/>
            <div style={{ height: 3, width: `${w * 70}%`, borderRadius: 2, background: dark ? 'rgba(255,255,255,0.10)' : 'oklch(0.90 0.006 250)' }}/>
          </div>
        ))}
        <div style={{
          marginTop: 'auto',
          alignSelf: 'flex-start',
          fontSize: 8, fontFamily: 'JetBrains Mono, monospace',
          padding: '2px 6px', borderRadius: 4,
          background: `color-mix(in oklch, ${p.seed} 18%, transparent)`,
          color: p.seed,
          transition: 'all 600ms ease',
        }}>
          dynamic
        </div>
      </div>
    </div>
  );
}

// ─── ACCESSIBILITY ───
function AccessibilityViz({ accent, dark }) {
  const t = useT();
  const sizes = [
    { label: 'S', px: 11 },
    { label: 'M', px: 13 },
    { label: 'L', px: 15 },
    { label: 'XL', px: 18 },
  ];
  const [sIdx, setSIdx] = React.useState(1);
  const [mode, setMode] = React.useState('auto'); // light | dark | auto
  const isDark = mode === 'dark' || (mode === 'auto' && dark);
  const surface = isDark ? '#1C1C1E' : '#fff';
  const fg = isDark ? '#F5F5F7' : '#0a0a0a';
  const fgMuted = isDark ? 'rgba(255,255,255,0.55)' : 'rgba(10,10,10,0.55)';
  const border = isDark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)';
  const px = sizes[sIdx].px;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {/* preview card */}
      <div style={{
        borderRadius: 12, padding: 14,
        background: surface,
        border: `1px solid ${border}`,
        transition: 'background 300ms ease, color 300ms ease',
        minHeight: 110,
      }}>
        <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: fgMuted, letterSpacing: 0.4, marginBottom: 6 }}>
          PREVIEW · {sizes[sIdx].label} · {mode}
        </div>
        <div style={{
          fontSize: px,
          lineHeight: 1.6,
          color: fg,
          fontFamily: '-apple-system, "Hiragino Sans", system-ui',
          transition: 'font-size 200ms ease, color 300ms ease',
        }}>
          {t.f07Preview}
        </div>
      </div>
      {/* controls */}
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {sizes.map((s, i) => (
            <button key={s.label} onClick={() => setSIdx(i)} style={{
              width: 28, height: 26, borderRadius: 6,
              border: `1px solid ${i === sIdx ? accent : 'var(--line)'}`,
              background: i === sIdx ? `color-mix(in oklch, ${accent} 14%, transparent)` : 'transparent',
              color: i === sIdx ? accent : 'var(--fg-muted)',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 10, fontWeight: 600,
              cursor: 'pointer',
              transition: 'all 150ms ease',
            }}>{s.label}</button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['light', 'dark', 'auto'].map(m => (
            <button key={m} onClick={() => setMode(m)} style={{
              padding: '4px 8px', borderRadius: 6,
              border: `1px solid ${m === mode ? accent : 'var(--line)'}`,
              background: m === mode ? `color-mix(in oklch, ${accent} 14%, transparent)` : 'transparent',
              color: m === mode ? accent : 'var(--fg-muted)',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 9, fontWeight: 600,
              cursor: 'pointer',
              textTransform: 'uppercase', letterSpacing: 0.3,
              transition: 'all 150ms ease',
            }}>{m}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── DIGEST DEMO (new flagship feature) ───
function DigestDemo({ accent, dark }) {
  const t = useT();
  const topics = [
    { kind: 'critical', label: t.fDigestT1Label, title: t.fDigestT1Title, sub: t.fDigestT1Sub },
    { kind: 'notable',  label: t.fDigestT2Label, title: t.fDigestT2Title, sub: t.fDigestT2Sub },
    { kind: 'fyi',      label: t.fDigestT3Label, title: t.fDigestT3Title, sub: t.fDigestT3Sub },
  ];
  const badgeColors = {
    critical: { bg: dark ? 'rgba(255,180,170,0.18)' : 'rgba(186,26,26,0.10)', fg: dark ? '#FFB4AB' : '#BA1A1A' },
    notable:  { bg: `color-mix(in oklch, ${accent} 18%, transparent)`, fg: accent },
    fyi:      { bg: dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.92 0.005 250)', fg: 'var(--fg-muted)' },
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* Kicker strip — like the home digest card */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px', borderRadius: 12,
        background: `color-mix(in oklch, ${accent} 14%, ${dark ? '#1a1c1e' : '#ffffff'})`,
        border: `1px solid color-mix(in oklch, ${accent} 24%, transparent)`,
      }}>
        <Icon name="sparkle" size={16} color={accent}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: accent, letterSpacing: 0.4 }}>
            {t.fDigestKicker1}
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'JetBrains Mono, monospace', marginTop: 1 }}>
            {t.fDigestKicker2}
          </div>
        </div>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </div>

      {/* Topic stack */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {topics.map((topic, i) => {
          const c = badgeColors[topic.kind];
          return (
            <div key={i} style={{
              display: 'flex', gap: 12, alignItems: 'flex-start',
              padding: 12, borderRadius: 12,
              background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
              border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
              animation: `slide-in 0.5s ${i * 0.08}s cubic-bezier(0.16, 1, 0.3, 1) backwards`,
            }}>
              <div style={{
                flexShrink: 0,
                padding: '3px 8px', borderRadius: 6,
                background: c.bg, color: c.fg,
                fontSize: 10, fontWeight: 700, letterSpacing: 0.4,
                fontFamily: 'JetBrains Mono, monospace',
                lineHeight: 1.4,
                whiteSpace: 'nowrap',
              }}>{topic.label}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 13, fontWeight: 600, color: 'var(--fg)', lineHeight: 1.45,
                  fontFamily: '-apple-system, "Hiragino Sans", system-ui',
                }}>{topic.title}</div>
                <div style={{
                  fontSize: 11, color: 'var(--fg-subtle)', marginTop: 3,
                  fontFamily: 'JetBrains Mono, monospace',
                }}>{topic.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── TRANSLATION DEMO ───
function TranslationDemo({ accent, dark }) {
  const t = useT();
  const [phase, setPhase] = useState(0); // 0 = before, 1 = animating, 2 = after
  useEffect(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 3), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {/* Before card */}
      <div style={{
        padding: '12px 14px', borderRadius: 12,
        background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.90 0.006 250)'}`,
        opacity: phase === 2 ? 0.45 : 1,
        transition: 'opacity 400ms ease',
      }}>
        <div style={{
          fontSize: 9, fontFamily: 'JetBrains Mono, monospace',
          color: 'var(--fg-subtle)', letterSpacing: 0.4, marginBottom: 6,
        }}>{t.fTranslationBefore}</div>
        <div style={{
          fontSize: 13, color: 'var(--fg)', lineHeight: 1.55,
          fontFamily: '-apple-system, "SF Pro Text", system-ui',
        }}>{t.fTranslationBeforeText}</div>
      </div>

      {/* Translate button / progress */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '8px 12px', borderRadius: 999,
        background: `${accent}14`, alignSelf: 'flex-start',
        border: `1px solid ${accent}33`,
      }}>
        <Icon name="translate" size={14} color={accent}/>
        <span style={{
          fontSize: 11, fontWeight: 600, color: accent,
          fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.2,
        }}>{phase === 1 ? 'translating…' : t.fTranslationDevice}</span>
        {phase === 1 && (
          <span style={{
            width: 6, height: 6, borderRadius: 3, background: accent,
            animation: 'pulse-dot 0.8s ease-in-out infinite',
          }}/>
        )}
      </div>

      {/* After card */}
      <div style={{
        padding: '12px 14px', borderRadius: 12,
        background: `color-mix(in oklch, ${accent} 8%, ${dark ? '#1a1c1e' : '#ffffff'})`,
        border: `1px solid color-mix(in oklch, ${accent} 28%, transparent)`,
        opacity: phase === 0 ? 0.45 : 1,
        transition: 'opacity 400ms ease',
      }}>
        <div style={{
          fontSize: 9, fontFamily: 'JetBrains Mono, monospace',
          color: accent, letterSpacing: 0.4, marginBottom: 6, fontWeight: 600,
        }}>{t.fTranslationAfter}</div>
        <div style={{
          fontSize: 13, color: 'var(--fg)', lineHeight: 1.7,
          fontFamily: '-apple-system, "Hiragino Sans", "Noto Sans JP", system-ui',
        }}>{t.fTranslationAfterText}</div>
      </div>
    </div>
  );
}

// ─── SEARCH DEMO ───
function SearchDemo({ accent, dark }) {
  const t = useT();
  const results = [t.fSearchResult1, t.fSearchResult2, t.fSearchResult3];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* search input */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 12px', borderRadius: 999,
        background: dark ? 'rgba(255,255,255,0.06)' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'oklch(0.90 0.006 250)'}`,
      }}>
        <Icon name="search" size={14} color="var(--fg-subtle)"/>
        <span style={{
          flex: 1, fontSize: 13, color: 'var(--fg)',
          fontFamily: '-apple-system, "Hiragino Sans", system-ui',
        }}>{t.fSearchQuery}</span>
        <span style={{
          fontSize: 10, fontFamily: 'JetBrains Mono, monospace',
          color: 'var(--fg-subtle)',
        }}>{t.fSearchHits}</span>
      </div>
      {/* result list */}
      {results.map((r, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 12px', borderRadius: 8,
          background: 'transparent',
        }}>
          <div style={{
            width: 4, height: 16, borderRadius: 2, background: accent, flexShrink: 0,
          }}/>
          <span style={{
            fontSize: 12.5, color: 'var(--fg)', lineHeight: 1.4,
            fontFamily: '-apple-system, "Hiragino Sans", system-ui',
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            flex: 1, minWidth: 0,
          }}>{r}</span>
        </div>
      ))}
    </div>
  );
}

// ─── GALLERY ───
function Gallery({ accent, theme }) {
  const t = useT();
  const lang = useLang();
  const dark = theme === 'dark';
  const screens = [
    { title: t.galleryHome, sub: t.galleryHomeSub, render: () => <YomiHome dark={dark} accent={accent} lang={lang}/> },
    { title: t.galleryDigest, sub: t.galleryDigestSub, render: () => <YomiDigestScreen dark={dark} accent={accent} lang={lang}/> },
    { title: t.galleryCategories, sub: t.galleryCategoriesSub, render: () => <YomiLockScreen dark={dark} accent={accent} unlocked={false} lang={lang}/> },
    { title: t.galleryRecommend, sub: t.galleryRecommendSub, render: () => <YomiRecommendScreen dark={dark} accent={accent} lang={lang}/> },
    { title: t.galleryReader, sub: t.galleryReaderSub, render: () => <YomiArticle dark={dark} accent={accent} lang={lang}/> },
  ];
  return (
    <section id="gallery" style={{
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container">
        <div className="section-head reveal">
          <div className="section-label">{t.galleryLabel}</div>
          <h2 className="h2">{t.galleryTitle1}<br/>{t.galleryTitle2}</h2>
          <p className="lede jp" style={{ marginTop: 16 }}>
            {t.galleryLede}
          </p>
        </div>

        <div className="gallery-grid">
          {screens.map((s, i) => (
            <div key={i} className="reveal gallery-cell">
              <div className="gallery-phone">
                <IOSDevice width={402} height={874} dark={dark}>
                  {s.render()}
                </IOSDevice>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: -0.1, fontFamily: '-apple-system, "Hiragino Sans", system-ui' }}>{s.title}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-subtle)', marginTop: 3, letterSpacing: 0.05 }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PRICING ───
function Pricing({ accent }) {
  const t = useT();
  const [annual, setAnnual] = useState(false);
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: 'center', margin: '0 auto 56px' }}>
          <div className="section-label">{t.pricingLabel}</div>
          <h2 className="h2">{t.pricingTitle1}<br/>{t.pricingTitle2}</h2>

          {/* Annual toggle */}
          <div style={{
            display: 'inline-flex', marginTop: 32,
            padding: 4, background: 'var(--bg-2)',
            border: '1px solid var(--line)', borderRadius: 10,
            fontSize: 13,
          }}>
            {[t.pricingMonthly, t.pricingAnnual].map((l, i) => (
              <button key={i} onClick={() => setAnnual(i === 1)} style={{
                padding: '7px 16px', border: 'none',
                borderRadius: 7, cursor: 'pointer',
                background: annual === (i === 1) ? 'var(--card)' : 'transparent',
                color: annual === (i === 1) ? 'var(--fg)' : 'var(--fg-muted)',
                fontWeight: 500, fontSize: 13, fontFamily: 'inherit',
                boxShadow: annual === (i === 1) ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
                transition: 'all 0.15s ease',
              }}>{l}</button>
            ))}
          </div>
        </div>

        <div className="pricing-grid">
          <div className="price-card reveal">
            <div>
              <div className="plan-name">{t.planFree}</div>
              <div className="price" style={{ marginTop: 8 }}>
                {t.planFreePrice}<small>{t.planFreePeriod}</small>
              </div>
              <p style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 8 }}>
                {t.planFreeDesc}
              </p>
            </div>
            <ul>
              {t.planFreeFeatures.map((f, i) => (
                <li key={i}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {f}
                </li>
              ))}
            </ul>
            <a href="#download" className="btn btn-ghost btn-lg" style={{ justifyContent: 'center' }}>{t.planFreeCta}</a>
          </div>

          <div className="price-card featured reveal">
            <div className="ribbon">{t.planProRibbon}</div>
            <div>
              <div className="plan-name" style={{ color: accent }}>{t.planPro}</div>
              <div className="price" style={{ marginTop: 8 }}>
                {annual ? t.planProPriceYear : t.planProPriceMonth}<small>{annual ? t.planProPeriodYear : t.planProPeriodMonth}</small>
              </div>
              <p style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 8 }}>
                {t.planProDesc}
              </p>
            </div>
            <ul>
              {t.planProFeatures.map((f, i) => (
                <li key={i}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {f}
                </li>
              ))}
            </ul>
            <a href="#download" className="btn btn-primary btn-lg" style={{ justifyContent: 'center' }}>{t.planProCta}</a>
          </div>

          <div className="price-card reveal">
            <div className="ribbon" style={{ background: 'var(--fg)', color: 'var(--bg)' }}>{t.planLifetimeRibbon}</div>
            <div>
              <div className="plan-name">{t.planLifetime}</div>
              <div className="price" style={{ marginTop: 8 }}>
                {t.planLifetimePrice}<small>{t.planLifetimePeriod}</small>
              </div>
              <p style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 8 }}>
                {t.planLifetimeDesc}
              </p>
            </div>
            <ul>
              {t.planLifetimeFeatures.map((f, i) => (
                <li key={i}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {f}
                </li>
              ))}
            </ul>
            <a href="#download" className="btn btn-ghost btn-lg" style={{ justifyContent: 'center' }}>{t.planLifetimeCta}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───
function FAQ() {
  const t = useT();
  const [open, setOpen] = useState(0);
  const faqs = t.faqs;
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: 'center', margin: '0 auto 40px' }}>
          <div className="section-label">{t.faqLabel}</div>
          <h2 className="h2">{t.faqTitle}</h2>
        </div>
        <div className="faq reveal">
          {faqs.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="plus">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
                </span>
              </div>
              <div className="faq-a jp">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── DOWNLOAD CTA ───
function CTA({ accent, theme }) {
  const t = useT();
  return (
    <section id="download" style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <div className="reveal" style={{
          border: '1px solid var(--line)',
          borderRadius: 24,
          padding: '64px 48px',
          textAlign: 'center',
          background: `radial-gradient(ellipse at top, color-mix(in oklch, ${accent} 8%, var(--card)) 0%, var(--card) 55%)`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div className="section-label" style={{ justifyContent: 'center' }}>{t.ctaLabel}</div>
          <h2 className="h2" style={{ marginTop: 8 }}>
            {t.ctaTitle1}<br/>{t.ctaTitle2}
          </h2>
          <p className="lede jp" style={{ margin: '20px auto 0' }}>
            {t.ctaLede}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            <a href="https://apps.apple.com/app/id6759408091" target="_blank" rel="noopener" className="store-btn">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
              <span><div className="s-small">{t.ctaAppStoreSmall}</div><div className="s-big">{t.ctaAppStoreBig}</div></span>
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.zawasystem.yomiai" target="_blank" rel="noopener" className="store-btn">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.206 12l2.492-2.491zM5.864 2.658L16.802 8.99l-2.302 2.302-8.636-8.634z"/></svg>
              <span><div className="s-small">{t.ctaPlaySmall}</div><div className="s-big">{t.ctaPlayBig}</div></span>
            </a>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-subtle)', marginTop: 28, letterSpacing: 0.05 }}>
            {t.ctaRequires}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ───
function Footer() {
  const t = useT();
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#top" className="logo" style={{ marginBottom: 12 }}>
              <span className="logo-mark">Y</span>
              <span>YomiAI</span>
            </a>
            <p style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.6, marginTop: 10, maxWidth: 300 }}>
              {t.footerTagline1}<br/>
              {t.footerTagline2}
            </p>
          </div>
          <div>
            <h5>{t.footerProduct}</h5>
            <ul>
              <li><a href="#features">{t.navFeatures}</a></li>
              <li><a href="#gallery">{t.navGallery}</a></li>
              <li><a href="#pricing">{t.navPricing}</a></li>
              <li><a href="#download">{t.navDownload}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footerSupport}</h5>
            <ul>
              <li><a href="#faq">{t.navFaq}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footerLegal}</h5>
            <ul>
              <li><a href="/terms-of-service-ja.html">{t.footerTerms}</a></li>
              <li><a href="/privacy-policy-ja.html">{t.footerPrivacy}</a></li>
              <li><a href="/terms-of-service-en.html">{t.footerTermsEn}</a></li>
              <li><a href="/privacy-policy-en.html">{t.footerPrivacyEn}</a></li>
            </ul>
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          paddingTop: 24, borderTop: '1px solid var(--line)',
          fontSize: 12, color: 'var(--fg-subtle)',
          fontFamily: 'JetBrains Mono, monospace',
        }}>
          <span>{t.footerCopyright}</span>
          <span>{t.footerMade}</span>
        </div>
      </div>
    </footer>
  );
}

// ─── TWEAKS PANEL ───
function TweaksPanel({ visible, accent, setAccent, theme, setTheme, lang, setLang }) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel active">
      <h4>Tweaks</h4>
      <div className="tweaks-row">
        <span>Accent</span>
        <div className="swatches">
          {ACCENT_OPTIONS.map(a => (
            <div
              key={a.id}
              className={`swatch ${accent === a.color ? 'active' : ''}`}
              style={{ background: a.color }}
              onClick={() => setAccent(a.color)}
              title={a.label}
            />
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <span>Dark mode</span>
        <div
          className={`toggle ${theme === 'dark' ? 'on' : ''}`}
          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
        />
      </div>
      <div className="tweaks-row">
        <span>Language</span>
        <div className="lang-seg" role="group" aria-label="Language">
          <button
            type="button"
            className={`lang-seg-btn ${lang === 'ja' ? 'active' : ''}`}
            onClick={() => setLang('ja')}
            aria-pressed={lang === 'ja'}
          >日本語</button>
          <button
            type="button"
            className={`lang-seg-btn ${lang === 'en' ? 'active' : ''}`}
            onClick={() => setLang('en')}
            aria-pressed={lang === 'en'}
          >EN</button>
        </div>
      </div>
    </div>
  );
}

// ─── APP ROOT ───
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A4E88",
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [accent, setAccent] = useState(TWEAK_DEFAULTS.accent);
  // Theme: system preference wins unless TWEAK_DEFAULTS.theme is explicitly set.
  // The EDITMODE default is 'light' (a literal default for the tweak block),
  // so we only respect it if the user has actually persisted a non-default value.
  const [theme, setTheme] = useState(() => {
    try {
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return 'dark';
      }
    } catch (e) {}
    return TWEAK_DEFAULTS.theme || 'light';
  });
  const [tweakOn, setTweakOn] = useState(false);
  const i18n = window.__YOMI_I18N__ || { DICT: { ja: {}, en: {} }, initialLang: 'ja', applyDocumentMeta: () => {} };
  const [lang, setLang] = useState(i18n.initialLang);
  const tDict = i18n.DICT[lang] || i18n.DICT.ja;

  useReveal();

  // Apply theme + accent to :root
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.style.setProperty('--accent', accent);
  }, [theme, accent]);

  // Apply lang (<html lang>, <title>, meta description, localStorage)
  useEffect(() => {
    i18n.applyDocumentMeta(lang);
  }, [lang]);

  // Edit-mode protocol
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweakOn(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweakOn(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // persist tweaks
  useEffect(() => {
    if (!tweakOn) return;
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: { accent, theme },
    }, '*');
  }, [accent, theme, tweakOn]);

  return (
    <I18nContext.Provider value={{ t: tDict, lang }}>
      <Nav tweakOn={tweakOn} setTweakOn={setTweakOn}/>
      <Hero accent={accent} theme={theme}/>
      <Metrics/>
      <Features accent={accent} theme={theme}/>
      <Gallery accent={accent} theme={theme}/>
      <Pricing accent={accent}/>
      <FAQ/>
      <CTA accent={accent} theme={theme}/>
      <Footer/>
      <TweaksPanel visible={tweakOn} accent={accent} setAccent={setAccent} theme={theme} setTheme={setTheme} lang={lang} setLang={setLang}/>
    </I18nContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);