// HONU Landing Page — main app component
// Tweaks: font pairing + hero layout (3 variants)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPair": "noto-sans",
  "heroLayout": "split-circuit",
  "lang": "ja"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "noto-sans":    { jp: "'Noto Sans JP', sans-serif",       en: "'Noto Sans', 'Noto Sans JP', sans-serif", display: "'Noto Sans', 'Noto Sans JP', sans-serif" },
  "noto-inter":   { jp: "'Noto Sans JP', sans-serif",       en: "'Inter', sans-serif",         display: "'Inter', 'Noto Sans JP', sans-serif" },
  "zenkaku-grot": { jp: "'Zen Kaku Gothic New', sans-serif", en: "'Space Grotesk', sans-serif", display: "'Space Grotesk', 'Zen Kaku Gothic New', sans-serif" },
  "shippori-ibm": { jp: "'Shippori Mincho', serif",          en: "'IBM Plex Sans', sans-serif", display: "'IBM Plex Sans', 'Shippori Mincho', serif" },
};

// ─── i18n ───────────────────────────────────────────────────────────────────
const COPY = {
  ja: {
    nav: { features: "特徴", specs: "スペック", pricing: "料金", contact: "お問い合わせ" },
    hero: {
      eyebrow: "TENSTORRENT × NVIDIA AI SERVER RENTAL",
      title1: "次世代AIインフラを",
      title2: "月額で、すぐに。",
      lead: "Tenstorrent Wormhole / Blackhole、NVIDIA H100 / H200。最先端のAIアクセラレータを搭載した高性能GPUサーバーを、初期投資ゼロで貸し出し。AIスタートアップの開発スピードを加速します。",
      cta: "お問い合わせ",
      ctaSub: "資料請求・無料相談",
      stat1: "4種", stat1L: "GPUラインナップ",
      stat2: "24/7", stat2L: "サポート体制",
      stat3: "国内DC", stat3L: "低レイテンシ",
    },
    features: {
      sectionLabel: "FEATURES",
      title: "選ばれる理由",
      lead: "Tenstorrent と NVIDIA、用途に応じた最適なAIアクセラレータを最短で提供します。",
      items: [
        { num: "01", title: "Tenstorrent Wormhole / Blackhole", body: "RISC-V ベースのAI特化アーキテクチャ。Transformer・LLM推論に最適化された高効率な並列演算性能。" },
        { num: "02", title: "NVIDIA H100 / H200 GPU", body: "Hopperアーキテクチャの最高峰。HBM3eメモリ最大141GBで、大規模LLMの学習・推論にも対応。" },
        { num: "03", title: "初期費用ゼロ・月額制", body: "高額なハードウェア投資不要。月額レンタルで必要な期間だけ、必要な台数を確保できます。" },
        { num: "04", title: "国内データセンター", body: "Tier III相当の国内DCに設置。低レイテンシ・高セキュリティ環境で安心して運用できます。" },
        { num: "05", title: "専任エンジニアサポート", body: "セットアップから運用まで、Tenstorrent / CUDA双方に精通したエンジニアが伴走支援します。" },
        { num: "06", title: "柔軟なスケーリング", body: "PoCから本番運用まで、用途とスケールに合わせて台数・GPU種別を切替可能。" },
      ],
    },
    specs: {
      sectionLabel: "GPU LINEUP",
      title: "選べる4種のGPU",
      lead: "ワークロードに合わせて、Tenstorrent と NVIDIA から最適な構成をお選びいただけます。",
      rows: [
        { k: "Tenstorrent Wormhole", v: "n300s / 24GB GDDR6 — RISC-V AI推論向け" },
        { k: "Tenstorrent Blackhole p150a", v: "32GB GDDR6 / 745 TFLOPS FP8 — 次世代AI演算" },
        { k: "NVIDIA H100", v: "80GB HBM3 / 989 TFLOPS FP16 — 大規模学習・推論" },
        { k: "NVIDIA H200", v: "141GB HBM3e / 4.8TB/s帯域 — 超大規模LLM対応" },
        { k: "サーバーCPU", v: "AMD EPYC / Intel Xeon ハイエンド構成" },
        { k: "ネットワーク", v: "InfiniBand / 100GbE × 2 / IPMI" },
        { k: "OS", v: "Ubuntu 22.04 LTS / RHEL 9 — CUDA / TT-Metalium 対応" },
      ],
    },
    pricing: {
      sectionLabel: "PRICING",
      title: "料金プラン",
      lead: "用途に応じた3つのプラン。すべて初期費用無料・月額制。",
      monthly: "月額",
      cta: "このプランを相談する",
      plans: [
        { name: "Wormhole", tag: "PoC・推論向け", price: "¥200,000", desc: "Tenstorrent Wormhole × 4台", features: ["Wormhole n300s × 4台", "AI推論ワークロード最適化", "TT-Metalium / TT-NN対応", "コスト効率重視", "メールサポート"] },
        { name: "H200", tag: "次世代HBM3e", price: "¥300,000", priceUsd: "$2,000", desc: "NVIDIA H200 141GB × 1枚", features: ["H200 141GB × 1枚", "HBM3e 4.8TB/s 帯域", "超大規模LLM対応", "セットアップ支援込", "電話・メールサポート"] },
        { name: "H100", tag: "最も人気", featured: true, price: "¥1,500,000", priceUsd: "$8,800", desc: "NVIDIA H100 80GB × 8枚", features: ["H100 80GB × 8枚", "989 TFLOPS FP16 × 8", "640GB HBM3 合計", "CUDA / cuDNN フルサポート", "電話・メールサポート", "学習・推論両対応"] },
      ],
    },
    cta: {
      title: "AI開発を、次のステージへ。",
      lead: "Tenstorrent搭載・NVIDIA搭載サーバーで、貴社のAIワークロードを最短で動かします。まずはお気軽にご相談ください。",
      btn: "お問い合わせ",
      tel: "03-6772-5671",
    },
    footer: {
      desc: "次世代AIインフラを、すべての開発者に。",
      cols: [
        { t: "サービス", links: [["特徴","#features"],["スペック","#specs"],["料金","#pricing"]] },
        { t: "情報",    links: [["特定商取引法に基づく表記","tokushoho.html"],["プライバシーポリシー","privacy.html"]] },
        { t: "お問い合わせ", links: [["TEL: 03-6772-5671","tel:0367725671"]] },
      ],
      addr: "〒158-0091 東京都世田谷区中町3丁目15番17号",
      copy: "© 2026 HONU Inc. All rights reserved.",
    },
  },
  en: {
    nav: { features: "Features", specs: "Specs", pricing: "Pricing", contact: "Contact" },
    hero: {
      eyebrow: "TENSTORRENT × NVIDIA AI SERVER RENTAL",
      title1: "Next-gen AI infrastructure",
      title2: "monthly, on demand.",
      lead: "Tenstorrent Wormhole / Blackhole and NVIDIA H100 / H200 — rent the latest AI accelerators with zero upfront investment. Accelerate your AI startup's development.",
      cta: "Get in touch",
      ctaSub: "Free consultation",
      stat1: "4 GPUs", stat1L: "Lineup",
      stat2: "24/7", stat2L: "Support",
      stat3: "JP DC", stat3L: "Low latency",
    },
    features: {
      sectionLabel: "FEATURES",
      title: "Why HONU",
      lead: "Tenstorrent and NVIDIA — the right AI accelerator for your workload, fast.",
      items: [
        { num: "01", title: "Tenstorrent Wormhole / Blackhole", body: "RISC-V based AI-first architecture. Highly efficient parallel compute optimized for Transformer and LLM inference." },
        { num: "02", title: "NVIDIA H100 / H200 GPU", body: "The pinnacle of Hopper architecture. Up to 141GB HBM3e — built for large-scale LLM training and inference." },
        { num: "03", title: "Zero capex, monthly billing", body: "No need for heavy hardware investment. Rent what you need, when you need it, by the month." },
        { num: "04", title: "Domestic data centers", body: "Tier III-equivalent Japanese DCs deliver low latency and high-grade security for peace of mind." },
        { num: "05", title: "Dedicated engineer support", body: "From setup to operations, our engineers — fluent in both Tenstorrent and CUDA — work alongside you." },
        { num: "06", title: "Flexible scaling", body: "From PoC to production, scale capacity and switch GPU types as your needs evolve." },
      ],
    },
    specs: {
      sectionLabel: "GPU LINEUP",
      title: "Four GPUs to choose from",
      lead: "Pick the right Tenstorrent or NVIDIA accelerator for your workload.",
      rows: [
        { k: "Tenstorrent Wormhole", v: "n300s / 24GB GDDR6 — RISC-V AI inference" },
        { k: "Tenstorrent Blackhole p150a", v: "32GB GDDR6 / 745 TFLOPS FP8 — next-gen AI compute" },
        { k: "NVIDIA H100", v: "80GB HBM3 / 989 TFLOPS FP16 — large-scale training & inference" },
        { k: "NVIDIA H200", v: "141GB HBM3e / 4.8TB/s bandwidth — XL LLM ready" },
        { k: "Server CPU", v: "AMD EPYC / Intel Xeon high-end configurations" },
        { k: "Network", v: "InfiniBand / 100GbE × 2 / IPMI" },
        { k: "OS", v: "Ubuntu 22.04 LTS / RHEL 9 — CUDA / TT-Metalium ready" },
      ],
    },
    pricing: {
      sectionLabel: "PRICING",
      title: "Pricing plans",
      lead: "Three plans tuned to your workload. Zero setup fees, monthly billing.",
      monthly: "/mo",
      cta: "Discuss this plan",
      plans: [
        { name: "Wormhole", tag: "PoC & inference", price: "¥200,000", desc: "Tenstorrent Wormhole × 4 cards", features: ["4× Wormhole n300s", "Optimized for AI inference", "TT-Metalium / TT-NN ready", "Cost-efficient", "Email support"] },
        { name: "H200", tag: "Next-gen HBM3e", price: "¥300,000", priceUsd: "$2,000", desc: "NVIDIA H200 141GB × 1", features: ["1× H200 141GB", "HBM3e 4.8TB/s bandwidth", "XL LLM ready", "Setup assistance", "Phone & email support"] },
        { name: "H100", tag: "Most popular", featured: true, price: "¥1,500,000", priceUsd: "$8,800", desc: "NVIDIA H100 80GB × 8", features: ["8× H100 80GB", "989 TFLOPS FP16 × 8", "640GB HBM3 total", "Full CUDA / cuDNN support", "Phone & email support", "Training & inference"] },
      ],
    },
    cta: {
      title: "Take AI development to the next level.",
      lead: "Run your AI workloads on Tenstorrent and NVIDIA-powered servers — fast. Reach out anytime.",
      btn: "Contact us",
      tel: "+81-3-6772-5671",
    },
    footer: {
      desc: "Next-gen AI infrastructure for every developer.",
      cols: [
        { t: "Service", links: [["Features","#features"],["Specs","#specs"],["Pricing","#pricing"]] },
        { t: "Legal", links: [["Commercial Transactions","tokushoho.html"],["Privacy Policy","privacy.html"]] },
        { t: "Contact", links: [["TEL: +81-3-6772-5671","tel:+81367725671"]] },
      ],
      addr: "3-15-17 Nakamachi, Setagaya-ku, Tokyo 158-0091, Japan",
      copy: "© 2026 HONU Inc. All rights reserved.",
    },
  },
};

// ─── Animated SVG: Circuit Turtle Backdrop ──────────────────────────────────
function CircuitBackdrop({ scrollY = 0 }) {
  // Stylized hex circuit grid that slowly drifts. Avoids drawing actual turtle (logo handles that).
  return (
    <svg className="circuit-bg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"
         style={{ transform: `translate3d(0, ${scrollY * 0.15}px, 0)` }}>
      <defs>
        <linearGradient id="cbg-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"  stopColor="#5BC8E8" stopOpacity="0.0" />
          <stop offset="50%" stopColor="#1AA3D8" stopOpacity="0.32" />
          <stop offset="100%" stopColor="#0A2E4F" stopOpacity="0.0" />
        </linearGradient>
        <pattern id="cbg-pat" x="0" y="0" width="80" height="92" patternUnits="userSpaceOnUse">
          <path d="M40 4 L72 22 L72 70 L40 88 L8 70 L8 22 Z" fill="none" stroke="#1AA3D8" strokeOpacity="0.18" strokeWidth="1" />
          <circle cx="40" cy="46" r="2" fill="#5BC8E8" fillOpacity="0.5" />
          <path d="M40 46 L72 22 M40 46 L8 22 M40 46 L40 88" stroke="#5BC8E8" strokeOpacity="0.12" strokeWidth="0.8" />
        </pattern>
      </defs>
      <rect width="1200" height="800" fill="url(#cbg-pat)" />
      <rect width="1200" height="800" fill="url(#cbg-grad)" />
    </svg>
  );
}

// ─── Hero Layouts (3 variants) ──────────────────────────────────────────────
function HeroSplitCircuit({ t, scrollY }) {
  // Variant 1: text left + 3D-tilted logo card right with floating circuit nodes
  const tilt = Math.min(8, scrollY * 0.02);
  return (
    <section className="hero hero-split">
      <CircuitBackdrop scrollY={scrollY} />
      <div className="hero-inner">
        <div className="hero-text">
          <div className="eyebrow">{t.hero.eyebrow}</div>
          <h1 className="hero-title">
            <span className="line">{t.hero.title1}</span>
            <span className="line accent">{t.hero.title2}</span>
          </h1>
          <p className="hero-lead">{t.hero.lead}</p>
          <div className="hero-cta-row">
            <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="btn-primary">
              <span>{t.hero.cta}</span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <span className="cta-sub">{t.hero.ctaSub}</span>
          </div>
          <div className="hero-stats">
            <div className="stat"><div className="stat-num">{t.hero.stat1}</div><div className="stat-lbl">{t.hero.stat1L}</div></div>
            <div className="stat"><div className="stat-num">{t.hero.stat2}</div><div className="stat-lbl">{t.hero.stat2L}</div></div>
            <div className="stat"><div className="stat-num">{t.hero.stat3}</div><div className="stat-lbl">{t.hero.stat3L}</div></div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="logo-card" style={{ transform: `perspective(1200px) rotateY(${-12 + tilt * 0.4}deg) rotateX(${6 - tilt * 0.3}deg)` }}>
            <div className="logo-card-glow" />
            <img src="assets/honu-logo.png" alt="HONU" className="logo-card-img" />
            <div className="logo-card-meta">
              <span className="dot" />
              <span>TENSTORRENT × NVIDIA</span>
            </div>
            <div className="logo-card-grid" />
          </div>
          <div className="float-chip chip1">H100 / H200</div>
          <div className="float-chip chip2">Wormhole</div>
          <div className="float-chip chip3">Blackhole p150a</div>
        </div>
      </div>
    </section>
  );
}

function HeroCenteredMono({ t, scrollY }) {
  // Variant 2: huge centered display type with logo as small mark above
  return (
    <section className="hero hero-centered">
      <CircuitBackdrop scrollY={scrollY} />
      <div className="hero-center-inner">
        <img src="assets/honu-logo.png" alt="HONU" className="center-mark" />
        <div className="eyebrow">{t.hero.eyebrow}</div>
        <h1 className="hero-title-center">
          <span className="line">{t.hero.title1}</span>
          <span className="line accent">{t.hero.title2}</span>
        </h1>
        <p className="hero-lead-center">{t.hero.lead}</p>
        <div className="hero-cta-row center">
          <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="btn-primary">
            <span>{t.hero.cta}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <span className="cta-sub">{t.hero.ctaSub}</span>
        </div>
        <div className="hero-stats center">
          <div className="stat"><div className="stat-num">{t.hero.stat1}</div><div className="stat-lbl">{t.hero.stat1L}</div></div>
          <div className="stat-divider" />
          <div className="stat"><div className="stat-num">{t.hero.stat2}</div><div className="stat-lbl">{t.hero.stat2L}</div></div>
          <div className="stat-divider" />
          <div className="stat"><div className="stat-num">{t.hero.stat3}</div><div className="stat-lbl">{t.hero.stat3L}</div></div>
        </div>
      </div>
    </section>
  );
}

function HeroFullbleed({ t, scrollY }) {
  // Variant 3: dark hero with large logo on right + parallax circuit
  return (
    <section className="hero hero-fullbleed">
      <div className="fb-backdrop" style={{ transform: `translate3d(0, ${scrollY * 0.2}px, 0)` }}>
        <CircuitBackdrop scrollY={0} />
      </div>
      <div className="fb-inner">
        <div className="fb-text">
          <div className="eyebrow light">{t.hero.eyebrow}</div>
          <h1 className="hero-title fb">
            <span className="line">{t.hero.title1}</span>
            <span className="line accent">{t.hero.title2}</span>
          </h1>
          <p className="hero-lead light">{t.hero.lead}</p>
          <div className="hero-cta-row">
            <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="btn-primary light">
              <span>{t.hero.cta}</span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <span className="cta-sub light">{t.hero.ctaSub}</span>
          </div>
        </div>
        <div className="fb-visual">
          <img src="assets/honu-logo.png" alt="HONU" className="fb-logo"
               style={{ transform: `translate3d(0, ${-scrollY * 0.08}px, 0) rotate(${scrollY * 0.02}deg)` }} />
          <div className="fb-ring" />
          <div className="fb-ring outer" />
        </div>
      </div>
      <div className="fb-stats">
        <div className="stat"><div className="stat-num">{t.hero.stat1}</div><div className="stat-lbl">{t.hero.stat1L}</div></div>
        <div className="stat"><div className="stat-num">{t.hero.stat2}</div><div className="stat-lbl">{t.hero.stat2L}</div></div>
        <div className="stat"><div className="stat-num">{t.hero.stat3}</div><div className="stat-lbl">{t.hero.stat3L}</div></div>
      </div>
    </section>
  );
}

// ─── Main App ───────────────────────────────────────────────────────────────
function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(tw.lang || "ja");
  const [scrollY, setScrollY] = React.useState(0);
  const [reveal, setReveal] = React.useState(new Set());

  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const onScroll = () => setScrollY(window.scrollY);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    // Scroll-based reveal — IO can be flaky inside elements with will-change/transform
    // ancestors. A simple rAF-throttled scroll check is bulletproof.
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      const all = Array.from(document.querySelectorAll("[data-r]"))
        .map((el) => el.dataset.r)
        .filter(Boolean);
      setReveal(new Set(all));
      return;
    }
    let ticking = false;
    const check = () => {
      ticking = false;
      const vh = window.innerHeight;
      const els = document.querySelectorAll("[data-r]");
      const additions = [];
      els.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.9 && r.bottom > 0) additions.push(el.dataset.r);
      });
      if (additions.length) {
        setReveal((prev) => {
          let changed = false;
          const next = new Set(prev);
          additions.forEach((k) => { if (!next.has(k)) { next.add(k); changed = true; } });
          return changed ? next : prev;
        });
      }
    };
    const onScroll = () => {
      if (!ticking) { ticking = true; requestAnimationFrame(check); }
    };
    check();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [tw.heroLayout, lang]);

  // Apply font pair via CSS variables
  React.useEffect(() => {
    const fp = FONT_PAIRS[tw.fontPair] || FONT_PAIRS["noto-inter"];
    document.documentElement.style.setProperty("--font-jp", fp.jp);
    document.documentElement.style.setProperty("--font-en", fp.en);
    document.documentElement.style.setProperty("--font-display", fp.display);
  }, [tw.fontPair]);

  // Keep <html lang> in sync with the language toggle for screen readers / SEO
  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const setLangBoth = (l) => { setLang(l); setTweak("lang", l); };
  const t = COPY[lang];

  const Hero = { "split-circuit": HeroSplitCircuit, "centered-mono": HeroCenteredMono, "fullbleed": HeroFullbleed }[tw.heroLayout] || HeroSplitCircuit;

  return (
    <>
      {/* Top nav */}
      <header className={"nav" + (scrollY > 40 ? " nav-scrolled" : "")}>
        <a href="#top" className="nav-brand">
          <img src="assets/honu-logo.png" alt="HONU" />
          <span>HONU</span>
        </a>
        <nav className="nav-links">
          <a href="#features">{t.nav.features}</a>
          <a href="#specs">{t.nav.specs}</a>
          <a href="#pricing">{t.nav.pricing}</a>
        </nav>
        <div className="nav-actions">
          <div className="lang-switch" role="group" aria-label="Language">
            <button onClick={() => setLangBoth("ja")} aria-pressed={lang==="ja"} className={lang==="ja"?"on":""}>JA</button>
            <button onClick={() => setLangBoth("en")} aria-pressed={lang==="en"} className={lang==="en"?"on":""}>EN</button>
          </div>
          <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="nav-cta">{t.nav.contact}</a>
        </div>
      </header>

      <main id="top">
        <Hero t={t} scrollY={scrollY} />

        {/* Features */}
        <section id="features" className="section features">
          <div className="section-head" data-r="fh">
            <div className="section-label">{t.features.sectionLabel}</div>
            <h2 className="section-title">{t.features.title}</h2>
            <p className="section-lead">{t.features.lead}</p>
          </div>
          <div className="feat-grid">
            {t.features.items.map((it, i) => (
              <article key={i} data-r={`f${i}`} className={"feat-card" + (reveal.has(`f${i}`) ? " in" : "")} style={{ transitionDelay: `${i * 60}ms` }}>
                <div className="feat-num">{it.num}</div>
                <h3 className="feat-title">{it.title}</h3>
                <p className="feat-body">{it.body}</p>
                <div className="feat-corner" />
              </article>
            ))}
          </div>
        </section>

        {/* Specs */}
        <section id="specs" className="section specs">
          <div className="section-head" data-r="sh">
            <div className="section-label">{t.specs.sectionLabel}</div>
            <h2 className="section-title">{t.specs.title}</h2>
            <p className="section-lead">{t.specs.lead}</p>
          </div>
          <div className="specs-wrap">
            <div className="specs-visual" data-r="sv">
              <div className="server-render">
                <div className="server-shell">
                  {[...Array(6)].map((_, i) => (
                    <div key={i} className="server-rack-line" style={{ animationDelay: `${i * 0.3}s` }}>
                      <div className="rack-led" />
                      <div className="rack-bar" />
                      <div className="rack-bar small" />
                    </div>
                  ))}
                  <div className="server-badge">TENSTORRENT × NVIDIA</div>
                </div>
                <div className="server-glow" />
              </div>
            </div>
            <table className="specs-table" data-r="st">
              <tbody>
                {t.specs.rows.map((r, i) => (
                  <tr key={i} className={reveal.has("st") ? "in" : ""} style={{ transitionDelay: `${i * 40}ms` }}>
                    <th>{r.k}</th><td>{r.v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {/* Pricing */}
        <section id="pricing" className="section pricing">
          <div className="section-head" data-r="ph">
            <div className="section-label">{t.pricing.sectionLabel}</div>
            <h2 className="section-title">{t.pricing.title}</h2>
            <p className="section-lead">{t.pricing.lead}</p>
          </div>
          <div className="price-grid">
            {t.pricing.plans.map((p, i) => (
              <article key={i} data-r={`p${i}`} className={"price-card" + (p.featured ? " featured" : "") + (reveal.has(`p${i}`) ? " in" : "")} style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="price-tag">{p.tag}</div>
                <div className="price-name">{p.name}</div>
                <div className="price-amount">
                  <span className="price-num">{p.price}</span>
                  {p.price !== "Ask" && <span className="price-per">{t.pricing.monthly}</span>}
                </div>
                {p.priceUsd && <div className="price-usd">/ {p.priceUsd}{lang==="ja"?" 相当":""}</div>}
                <div className="price-desc">{p.desc}</div>
                <ul className="price-feat">
                  {p.features.map((f, j) => (
                    <li key={j}>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                <a href="#contact" className={p.featured ? "btn-primary full" : "btn-secondary full"}>{t.pricing.cta}</a>
              </article>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section id="contact" className="section cta-section">
          <div className="cta-card" data-r="cta">
            <div className="cta-bg-grid" />
            <h2 className="cta-title">{t.cta.title}</h2>
            <p className="cta-lead">{t.cta.lead}</p>
            <div className="cta-actions">
              <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="btn-primary big">
                <span>{t.cta.btn}</span>
                <svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a href={"tel:" + t.cta.tel.replace(/[^\d+]/g,"")} className="cta-tel">{t.cta.tel}</a>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="footer">
        <div className="foot-inner">
          <div className="foot-brand">
            <div className="foot-brand-row">
              <img src="assets/honu-logo.png" alt="HONU" />
              <span>HONU</span>
            </div>
            <p>{t.footer.desc}</p>
            <p className="foot-addr">{t.footer.addr}</p>
          </div>
          <div className="foot-cols">
            {t.footer.cols.map((c, i) => (
              <div key={i} className="foot-col">
                <div className="foot-col-t">{c.t}</div>
                <ul>{c.links.map((l, j) => <li key={j}><a href={l[1]}>{l[0]}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="foot-bottom">
          <span>{t.footer.copy}</span>
          <span className="foot-legal">
            <a href="tokushoho.html">{lang==="ja"?"特定商取引法に基づく表記":"Commercial Transactions"}</a>
            <span className="dot-sep">·</span>
            <a href="privacy.html">{lang==="ja"?"プライバシーポリシー":"Privacy Policy"}</a>
          </span>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang==="ja"?"フォント":"Typography"} />
        <TweakSelect label={lang==="ja"?"フォントペア":"Font pair"} value={tw.fontPair}
                     options={[
                       { value: "noto-sans",    label: "Noto Sans (JP × EN)" },
                       { value: "noto-inter",   label: "Noto Sans JP × Inter" },
                       { value: "zenkaku-grot", label: "Zen Kaku × Space Grotesk" },
                       { value: "shippori-ibm", label: "Shippori Mincho × IBM Plex" },
                     ]}
                     onChange={(v) => setTweak("fontPair", v)} />
        <TweakSection label={lang==="ja"?"ヒーローレイアウト":"Hero layout"} />
        <TweakRadio label={lang==="ja"?"レイアウト":"Layout"} value={tw.heroLayout}
                    options={[
                      { value: "split-circuit", label: "Split" },
                      { value: "centered-mono", label: "Center" },
                      { value: "fullbleed",     label: "Bleed" },
                    ]}
                    onChange={(v) => setTweak("heroLayout", v)} />
        <TweakSection label={lang==="ja"?"言語":"Language"} />
        <TweakRadio label={lang==="ja"?"表示言語":"Display"} value={lang}
                    options={[{value:"ja",label:"日本語"},{value:"en",label:"English"}]}
                    onChange={setLangBoth} />
      </TweaksPanel>
    </>
  );
}

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