// FUTO Co., Ltd. — full single-page site
// Built around T() text helper which reads bilingual entries from window.SITE_CONTENT.

const { useState, useEffect, useRef, useCallback, useMemo } = React;
const C = window.SITE_CONTENT;

// Tweaks defaults — wrapped in EDITMODE markers so the host can persist edits.
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "jp",
  "theme": "light",
  "accent": "#b03a2e",
  "fontJp": "shippori",
  "fontEn": "cormorant"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────
// Tiny helpers
// ─────────────────────────────────────────────────────────────
function T(node, lang) {
  if (node == null) return '';
  if (typeof node === 'string') return node;
  return node[lang] || node.jp || '';
}

const FONT_OPTIONS = {
  shippori:  { jp: '"Shippori Mincho", serif',     name: 'Shippori 明朝' },
  noto:      { jp: '"Noto Serif JP", serif',       name: 'Noto Serif JP' },
  zenold:    { jp: '"Zen Old Mincho", serif',      name: 'Zen Old Mincho' },
};
const FONT_OPTIONS_EN = {
  cormorant: { en: '"Cormorant Garamond", serif',   name: 'Cormorant' },
  ebgaramond:{ en: '"EB Garamond", serif',          name: 'EB Garamond' },
  inter:     { en: '"Inter", -apple-system, sans-serif', name: 'Inter' },
};

// ─────────────────────────────────────────────────────────────
// Placeholder block (monospace caption on subtle stripes)
// ─────────────────────────────────────────────────────────────
function Placeholder({ label, ratio = '4/5', style }) {
  return (
    <div className="ph" style={{aspectRatio: ratio, ...style}}>
      <span style={{whiteSpace:'pre-line'}}>{label}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero particle canvas — drifting "wind" lines
// ─────────────────────────────────────────────────────────────
function WindCanvas({ accent }) {
  const ref = useRef(null);
  useEffect(() => {
    const cv = ref.current; if (!cv) return;
    const ctx = cv.getContext('2d');
    let raf, w = 0, h = 0, dpr = window.devicePixelRatio || 1;
    let particles = [];

    const resize = () => {
      const rect = cv.getBoundingClientRect();
      w = rect.width; h = rect.height;
      cv.width = w * dpr; cv.height = h * dpr;
      ctx.setTransform(dpr,0,0,dpr,0,0);
      // density tied to area
      const target = Math.min(140, Math.max(40, Math.floor(w*h/10000)));
      particles = Array.from({length: target}, () => spawn());
    };
    const spawn = (fromLeft = Math.random() < 0.5) => ({
      x: fromLeft ? -20 - Math.random()*100 : Math.random()*w,
      y: Math.random()*h,
      vx: 0.3 + Math.random()*1.2,
      len: 30 + Math.random()*120,
      a:   0.05 + Math.random()*0.18,
      tilt: -0.18 + Math.random()*0.06,
    });
    const isDark = () => document.documentElement.dataset.theme === 'dark';
    const tick = () => {
      ctx.clearRect(0,0,w,h);
      const stroke = isDark() ? '237, 229, 211' : '28, 24, 20';
      for (const p of particles) {
        p.x += p.vx;
        p.y += p.vx * p.tilt;
        if (p.x - p.len > w + 20 || p.y < -40 || p.y > h+40) {
          Object.assign(p, spawn(true));
        }
        ctx.strokeStyle = `rgba(${stroke}, ${p.a})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x - p.len, p.y - p.len*p.tilt);
        ctx.stroke();
      }
      // a few accent-tinted streaks
      ctx.strokeStyle = accent + '22';
      raf = requestAnimationFrame(tick);
    };
    resize(); tick();
    const ro = new ResizeObserver(resize);
    ro.observe(cv);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, [accent]);
  return <canvas ref={ref} className="wind-canvas" aria-hidden="true"/>;
}

// ─────────────────────────────────────────────────────────────
// Reveal-on-scroll wrapper
// ─────────────────────────────────────────────────────────────
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${shown?'is-in':''} ${className}`}
      style={{transitionDelay: `${delay}ms`, ...style}}>
      {children}
    </Tag>
  );
}

// ─────────────────────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────────────────────
function Header({ lang, setLang, theme, setTheme, navOpen, setNavOpen }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navLinks = [
    { id: 'about',    label: C.nav.about },
    { id: 'business', label: C.nav.business },
    { id: 'feature',  label: C.nav.feature },
    { id: 'culture',  label: C.nav.culture },
    { id: 'contact',  label: C.nav.contact },
  ];
  const goTo = (id) => (e) => {
    e.preventDefault();
    setNavOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <header className={`site-header ${scrolled?'is-scrolled':''}`}>
      <div className="header-inner">
        <a href="#top" className="brand" onClick={goTo('top')}>
          <span className="brand-mark">風</span>
          <span className="brand-name">{lang==='jp' ? '風都株式会社' : 'FUTO Co., Ltd.'}</span>
        </a>

        <nav className="primary-nav" aria-label="Primary">
          {navLinks.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={goTo(l.id)}>{T(l.label, lang)}</a>
          ))}
        </nav>

        <div className="header-controls">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang==='jp'?'is-active':''} onClick={()=>setLang('jp')}>JP</button>
            <span className="lang-sep">/</span>
            <button className={lang==='en'?'is-active':''} onClick={()=>setLang('en')}>EN</button>
          </div>
          <button className="theme-toggle" aria-label="Toggle theme"
            onClick={()=>setTheme(theme==='dark'?'light':'dark')}>
            <span className="theme-track"><span className="theme-dot"/></span>
            <span className="theme-label">{theme==='dark'?'墨':'光'}</span>
          </button>
          <button className={`menu-toggle ${navOpen?'is-open':''}`} onClick={()=>setNavOpen(o=>!o)} aria-label="Menu">
            <span/><span/><span/>
          </button>
        </div>
      </div>

      <div className={`mobile-nav ${navOpen?'is-open':''}`}>
        {navLinks.map((l,i) => (
          <a key={l.id} href={`#${l.id}`} onClick={goTo(l.id)} style={{transitionDelay:`${i*40}ms`}}>
            <span className="m-num">{String(i+1).padStart(2,'0')}</span>
            <span className="m-label">{T(l.label, lang)}</span>
          </a>
        ))}
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero
// ─────────────────────────────────────────────────────────────
function Hero({ lang, accent }) {
  return (
    <section className="hero" id="top">
      <WindCanvas accent={accent}/>
      <div className="hero-grid">
        <div className="hero-text">
          <h1 className="hero-title">
            <Reveal delay={120}>
              <span className="ja">{T(C.hero.titleA, lang)}</span>
            </Reveal>
            <Reveal delay={260}>
              <span className="ja">
                <span className="accented">{T(C.hero.titleB, lang)}</span>
                {T(C.hero.titleC, lang)}
              </span>
            </Reveal>
          </h1>
          <Reveal delay={420} className="hero-body">{T(C.hero.body, lang)}</Reveal>
          <Reveal delay={560} className="hero-ctas">
            <a href="#contact" className="btn btn-primary"
              onClick={(e)=>{e.preventDefault();document.getElementById('contact')?.scrollIntoView({behavior:'smooth'});}}>
              {T(C.hero.cta, lang)} <span className="arr">→</span>
            </a>
            <a href="#business" className="btn btn-ghost"
              onClick={(e)=>{e.preventDefault();document.getElementById('business')?.scrollIntoView({behavior:'smooth'});}}>
              {T(C.hero.secondary, lang)}
            </a>
          </Reveal>
        </div>
        <div className="hero-aside">
          <Reveal delay={300}>
            <Placeholder label={T(C.hero.photoLabel, lang)} ratio="3/4"/>
          </Reveal>
          <Reveal delay={520} className="hero-quote">— {T(C.hero.sealQuote, lang)}</Reveal>
        </div>
      </div>
      <div className="hero-foot">
        <span className="mono">№ 001 / 風都</span>
        <span className="mono">{T(C.hero.scroll, lang)} ↓</span>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Section header (kicker + title pattern reused everywhere)
// ─────────────────────────────────────────────────────────────
function SectionHead({ kicker, title, intro, lang, align='left', num }) {
  return (
    <div className={`section-head align-${align}`}>
      <Reveal className="section-kicker">
        {num && <span className="section-num">§{num}</span>}
        <span className="section-kicker-text">{T(kicker, lang)}</span>
      </Reveal>
      <Reveal delay={120}><h2 className="section-title">{T(title, lang)}</h2></Reveal>
      {intro && <Reveal delay={240} className="section-intro">{T(intro, lang)}</Reveal>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// About section — image left, prose right
// ─────────────────────────────────────────────────────────────
function About({ lang }) {
  return (
    <section className="section about" id="about">
      <div className="container about-grid">
        <Reveal className="about-image">
          <Placeholder label={T(C.about.photo, lang)} ratio="4/5"/>
          <div className="image-caption mono">PLATE 01 — 風都</div>
        </Reveal>
        <div className="about-text">
          <SectionHead kicker={C.about.kicker} title={C.about.title} lang={lang} num="01"/>
          <Reveal delay={180}><p>{T(C.about.p1, lang)}</p></Reveal>
          <Reveal delay={300}><p>{T(C.about.p2, lang)}</p></Reveal>
          <Reveal delay={420}><p>{T(C.about.p3, lang)}</p></Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Business — A2 vertical tate-gumi layout
// Vertical kanji label on the left, two groups (情報技術 / 文化・其他)
// each with a card grid; the AITransPDF flag card is vermilion.
// ─────────────────────────────────────────────────────────────
function Business({ lang }) {
  // Split the 8 items into two semantic groups
  const items = C.business.items;
  const groups = [
    { kana:'IT',
      title: { jp:'情報技術', en:'Technology' },
      sub:   { jp:'Information Technology', en:'Five practices' },
      items: items.slice(0, 4) }, // 01..04
    { kana:'文',
      title: { jp:'文化・其他', en:'Culture & Other' },
      sub:   { jp:'Culture & Other', en:'Three practices' },
      items: items.slice(4) },    // 05..07
  ];
  return (
    <section className="section business" id="business">
      <div className="container biz-tate">
        {/* Left rail — vertical title + meta */}
        <div className="biz-rail">
          <Reveal>
            <div className="biz-vtitle">{T(C.business.title, lang)}</div>
          </Reveal>
          <Reveal delay={120}>
            <div className="biz-vkicker">{T(C.business.kicker, lang)}</div>
          </Reveal>
          <Reveal delay={220} className="biz-rail-meta">
            <span className="section-num">§02</span>
            <span>7 PILLARS</span>
            <span>2 GROUPS</span>
          </Reveal>
        </div>

        {/* Right column — intro + groups */}
        <div className="biz-body">
          <Reveal delay={120} className="biz-intro">{T(C.business.intro, lang)}</Reveal>

          {groups.map((g, gi) => (
            <div key={gi} className="biz-group">
              <Reveal as="div" className="biz-group-head">
                <span className="biz-group-kana">{g.kana}</span>
                <span className="biz-group-title">{T(g.title, lang)}</span>
                <span className="biz-group-rule"/>
                <span className="biz-group-count mono">{String(g.items.length).padStart(2,'0')} ITEMS</span>
              </Reveal>
              <div className="biz-cards">
                {g.items.map((it, i) => (
                  <Reveal key={i} as="article"
                    className={`biz-card ${it.flag?'is-flag':''}`}
                    delay={i * 70}>
                    <div className="biz-card-num">{it.num}</div>
                    <div className="biz-card-foot">
                      <h3 className="biz-card-title">{T(it.title, lang)}</h3>
                      <div className="biz-card-sub">{lang==='jp' ? it.jpSub : it.en}</div>
                      <p className="biz-card-desc">{T(it.desc, lang)}</p>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Featured product — AITransPDF
// ─────────────────────────────────────────────────────────────
function Feature({ lang }) {
  return (
    <section className="section feature" id="feature">
      <div className="container feature-grid">
        <div className="feature-text">
          <SectionHead kicker={C.feature.kicker} title={C.feature.title} lang={lang} num="03"/>
          <Reveal delay={180}><p className="feature-sub">{T(C.feature.sub, lang)}</p></Reveal>
          <Reveal delay={280}><p className="feature-body">{T(C.feature.body, lang)}</p></Reveal>
          <ul className="feature-bullets">
            {C.feature.bullets.map((b,i)=>(
              <Reveal as="li" key={i} delay={360+i*70}>
                <span className="bullet-num mono">{String(i+1).padStart(2,'0')}</span>
                <span>{T(b, lang)}</span>
              </Reveal>
            ))}
          </ul>
          <Reveal delay={720}>
            <a href="https://www.aitranspdf.com/" target="_blank" rel="noreferrer" className="btn btn-primary">
              {T(C.feature.cta, lang)}
            </a>
          </Reveal>
        </div>
        <Reveal className="feature-image" delay={200}>
          <Placeholder label={T(C.feature.img, lang)} ratio="4/5"/>
          <div className="image-caption mono">PLATE 03 — AITransPDF</div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Culture — three story cards
// ─────────────────────────────────────────────────────────────
function Culture({ lang }) {
  return (
    <section className="section culture" id="culture">
      <div className="container">
        <SectionHead kicker={C.culture.kicker} title={C.culture.title} intro={C.culture.intro} lang={lang} num="04" align="center"/>
        <div className="culture-grid">
          {C.culture.cards.map((c,i)=>(
            <Reveal key={i} as="article" className="culture-card" delay={i*120}>
              <Placeholder label={T(c.img, lang)} ratio="4/5"/>
              <div className="culture-meta mono">{c.num} · {c.en}</div>
              <h3>{T(c.title, lang)}</h3>
              <p>{T(c.body, lang)}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Contact — editorial info plate (no form)
// ─────────────────────────────────────────────────────────────
function Contact({ lang }) {
  const items = [
    { num:'01', label:C.contact.companyLabel, val:T(C.contact.company, lang) },
    { num:'02', label:C.contact.repLabel,     val:T(C.contact.rep, lang) },
    { num:'03', label:C.contact.foundedLabel, val:T(C.contact.founded, lang) },
    { num:'04', label:C.contact.addrLabel,    val:T(C.contact.addr, lang),    full:true },
    { num:'05', label:C.contact.phoneLabel,   val:C.contact.phone,            href:`tel:${C.contact.phone}` },
    { num:'06', label:C.contact.emailLabel,   val:C.contact.email,            href:`mailto:${C.contact.email}` },
    { num:'07', label:C.contact.hoursLabel,   val:T(C.contact.hours, lang) },
  ];
  return (
    <section className="section contact" id="contact">
      <div className="container contact-tate">
        {/* Left rail — vertical title (matches business section vocabulary) */}
        <div className="contact-rail">
          <Reveal>
            <div className="contact-vtitle">{T(C.contact.title, lang)}</div>
          </Reveal>
          <Reveal delay={120}>
            <div className="contact-vkicker">{T(C.contact.kicker, lang)}</div>
          </Reveal>
          <Reveal delay={220} className="contact-rail-meta">
            <span className="section-num">§05</span>
            <span>SHIBUYA · TOKYO</span>
          </Reveal>
        </div>

        {/* Right body */}
        <div className="contact-body">
          <Reveal delay={120} className="contact-intro">{T(C.contact.intro, lang)}</Reveal>

          <div className="contact-plate">
            {items.map((it, i) => (
              <Reveal key={i} as="div"
                className={`contact-cell ${it.full?'is-full':''}`}
                delay={140 + i*70}>
                <span className="cc-num mono">{it.num}</span>
                <div className="cc-body">
                  <span className="cc-label mono">{T(it.label, lang)}</span>
                  {it.href
                    ? <a href={it.href} className="cc-val">{it.val}</a>
                    : <span className="cc-val">{it.val}</span>}
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={560} className="contact-cta-row">
            <a href={`mailto:${C.contact.email}`} className="btn btn-primary">
              <span>{lang==='jp' ? 'メールで連絡する' : 'Send us an email'}</span>
              <span className="arr">→</span>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer({ lang }) {
  const goTo = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="foot-brand">
          <span className="brand-mark">風</span>
          <div>
            <div className="foot-name">{lang==='jp' ? '風都株式会社' : 'FUTO Co., Ltd.'}</div>
            <div className="foot-motto">{T(C.footer.motto, lang)}</div>
          </div>
        </div>
        <div className="foot-col">
          <div className="foot-label mono">{T(C.footer.linksLabel, lang)}</div>
          <ul>
            <li><a href="#about" onClick={goTo('about')}>{T(C.nav.about, lang)}</a></li>
            <li><a href="#business" onClick={goTo('business')}>{T(C.nav.business, lang)}</a></li>
            <li><a href="#feature" onClick={goTo('feature')}>{T(C.nav.feature, lang)}</a></li>
            <li><a href="#culture" onClick={goTo('culture')}>{T(C.nav.culture, lang)}</a></li>
            <li><a href="#contact" onClick={goTo('contact')}>{T(C.nav.contact, lang)}</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bar">
        <div className="container footer-bar-inner">
          <span className="mono">{T(C.footer.rights, lang)}</span>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// Tweaks panel
// ─────────────────────────────────────────────────────────────
function Tweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect } = window;
  if (!TweaksPanel) return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Language / 言語">
        <TweakRadio value={tweaks.lang} onChange={v=>setTweak('lang', v)}
          options={[{value:'jp', label:'日本語'}, {value:'en', label:'English'}]}/>
      </TweakSection>
      <TweakSection title="Theme / 明暗">
        <TweakRadio value={tweaks.theme} onChange={v=>setTweak('theme', v)}
          options={[{value:'light', label:'光 Light'}, {value:'dark', label:'墨 Dark'}]}/>
      </TweakSection>
      <TweakSection title="Accent / 朱">
        <TweakColor value={tweaks.accent} onChange={v=>setTweak('accent', v)}
          presets={['#b03a2e','#7a4a2e','#3a5a7a','#2a5a4a','#5a3a6a','#1c1814']}/>
      </TweakSection>
      <TweakSection title="JP Font / 日文書体">
        <TweakSelect value={tweaks.fontJp} onChange={v=>setTweak('fontJp', v)}
          options={Object.entries(FONT_OPTIONS).map(([k,v])=>({value:k, label:v.name}))}/>
      </TweakSection>
      <TweakSection title="EN Font / 欧文">
        <TweakSelect value={tweaks.fontEn} onChange={v=>setTweak('fontEn', v)}
          options={Object.entries(FONT_OPTIONS_EN).map(([k,v])=>({value:k, label:v.name}))}/>
      </TweakSection>
    </TweaksPanel>
  );
}

// ─────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────
// Locale persistence — cookie + browser detection
// ─────────────────────────────────────────────────────────────
const LANG_COOKIE = 'futo_lang';
const THEME_COOKIE = 'futo_theme';
function readCookie(name) {
  const m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
  return m ? decodeURIComponent(m[1]) : null;
}
function writeCookie(name, value, days = 365) {
  const d = new Date(); d.setTime(d.getTime() + days * 864e5);
  // SameSite=None; Secure is required when the page is loaded inside a cross-site
  // iframe (e.g. preview sandboxes). Falls back gracefully on http://localhost too.
  const secure = location.protocol === 'https:' ? '; Secure' : '';
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${d.toUTCString()}; path=/; SameSite=None${secure}`;
}
function detectInitialLang() {
  // 1) explicit user choice persisted in cookie
  const saved = readCookie(LANG_COOKIE);
  if (saved === 'jp' || saved === 'en') return saved;
  // 2) browser languages — Japanese only if explicitly preferred, otherwise English
  const list = (navigator.languages && navigator.languages.length)
    ? navigator.languages : [navigator.language || 'en'];
  for (const l of list) {
    const code = String(l).toLowerCase();
    if (code.startsWith('ja')) return 'jp';
    if (code.startsWith('en')) return 'en';
  }
  return 'en';
}
function detectInitialTheme() {
  const saved = readCookie(THEME_COOKIE);
  if (saved === 'light' || saved === 'dark') return saved;
  return null; // fall back to file default
}

// ─────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────
function App() {
  const { useTweaks } = window;
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  const [navOpen, setNavOpen] = useState(false);

  // On first mount, replace the default lang with cookie- or browser-derived value.
  // Only fires once; afterwards setLang persists explicit user choices.
  const langInitDone = useRef(false);
  useEffect(() => {
    if (langInitDone.current) return;
    langInitDone.current = true;
    const detected = detectInitialLang();
    if (detected !== tweaks.lang) setTweak('lang', detected);
    const savedTheme = detectInitialTheme();
    if (savedTheme && savedTheme !== tweaks.theme) setTweak('theme', savedTheme);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Wrap setTweak so any lang/theme change writes the cookie.
  const handleSetTweak = useCallback((keyOrObj, value) => {
    if (typeof keyOrObj === 'string') {
      if (keyOrObj === 'lang')  writeCookie(LANG_COOKIE,  value);
      if (keyOrObj === 'theme') writeCookie(THEME_COOKIE, value);
      setTweak(keyOrObj, value);
    } else {
      if (keyOrObj && keyOrObj.lang)  writeCookie(LANG_COOKIE,  keyOrObj.lang);
      if (keyOrObj && keyOrObj.theme) writeCookie(THEME_COOKIE, keyOrObj.theme);
      setTweak(keyOrObj);
    }
  }, [setTweak]);

  // Apply tweaks to DOM
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = tweaks.theme;
    root.dataset.lang = tweaks.lang;
    root.style.setProperty('--accent', tweaks.accent);
    root.style.setProperty('--font-jp', FONT_OPTIONS[tweaks.fontJp]?.jp || FONT_OPTIONS.shippori.jp);
    root.style.setProperty('--font-en', FONT_OPTIONS_EN[tweaks.fontEn]?.en || FONT_OPTIONS_EN.cormorant.en);
  }, [tweaks]);

  return (
    <>
      <Header lang={tweaks.lang} setLang={v=>handleSetTweak('lang', v)}
        theme={tweaks.theme} setTheme={v=>handleSetTweak('theme', v)}
        navOpen={navOpen} setNavOpen={setNavOpen}/>
      <main>
        <Hero lang={tweaks.lang} accent={tweaks.accent}/>
        <About lang={tweaks.lang}/>
        <Business lang={tweaks.lang}/>
        <Feature lang={tweaks.lang}/>
        <Culture lang={tweaks.lang}/>
        <Contact lang={tweaks.lang}/>
      </main>
      <Footer lang={tweaks.lang}/>
      <Tweaks tweaks={tweaks} setTweak={handleSetTweak}/>
    </>
  );
}

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