/* global React, SeamewMockupDesktop, SeamewMockupPhone, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TotalSolution, useLang */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "sky",
  "background": "warm",
  "heroLayout": "split",
  "showBubbles": true
} /*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  if (t.background === "warm") {
    root.style.setProperty("--bg", "#FAFAF7");
    root.style.setProperty("--bg-soft", "#F2F1EC");
    root.style.setProperty("--bg-deep", "#E9E7DF");
    root.style.setProperty("--line", "#E2E0D7");
    root.style.setProperty("--line-strong", "#C9C6B9");
  } else if (t.background === "cool") {
    root.style.setProperty("--bg", "#F7F8FB");
    root.style.setProperty("--bg-soft", "#EEF1F6");
    root.style.setProperty("--bg-deep", "#E2E7EE");
    root.style.setProperty("--line", "#E0E4EB");
    root.style.setProperty("--line-strong", "#C7CDD7");
  } else {
    root.style.setProperty("--bg", "#FFFFFF");
    root.style.setProperty("--bg-soft", "#F5F5F5");
    root.style.setProperty("--bg-deep", "#EAEAEA");
    root.style.setProperty("--line", "#E5E5E5");
    root.style.setProperty("--line-strong", "#CCCCCC");
  }
  const map = {
    sky: { c: "#2E6BFF", c2: "#1A4BCC", soft: "#E5EDFF", glow: "rgba(46,107,255,0.18)" },
    teal: { c: "#0E9488", c2: "#0B7A70", soft: "#D7F1EE", glow: "rgba(14,148,136,0.18)" },
    coral: { c: "#E26A4F", c2: "#C5523A", soft: "#FCE5DD", glow: "rgba(226,106,79,0.18)" },
    violet: { c: "#6E5BD9", c2: "#5640C2", soft: "#E8E3FA", glow: "rgba(110,91,217,0.18)" }
  };
  const a = map[t.accent] || map.sky;
  root.style.setProperty("--accent", a.c);
  root.style.setProperty("--accent-2", a.c2);
  root.style.setProperty("--accent-soft", a.soft);
  root.style.setProperty("--accent-glow", a.glow);
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-visible");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ============ Lang Toggle ============ */
const LangToggle = ({ compact = false }) => {
  const { lang, setLang: set } = useLang();
  return (
    <div className={`lang-toggle ${compact ? "compact" : ""}`}>
      <button className={lang === "zh" ? "active" : ""} onClick={() => set("zh")}>中</button>
      <span className="lang-divider">/</span>
      <button className={lang === "en" ? "active" : ""} onClick={() => set("en")}>EN</button>
    </div>);

};

/* ============ Topnav ============ */
const Topnav = () => {
  const { t } = useLang();
  const [open, setOpen] = useState(false);
  return (
    <header className="topnav">
      <div className="wrap topnav-inner">
        <a href="#" className="brand">
          <img src={(window.__resources && window.__resources.logoDark) || "assets/seamew-logo-dark.png"} alt="Seamew" />
          <span>SEAMEW</span>
        </a>
        <nav className={`nav-links ${open ? "open" : ""}`} onClick={() => setOpen(false)}>
          <a href="#why">{t("nav.why")}</a>
          <a href="#solution">{t("nav.solution")}</a>
          <a href="#features">{t("nav.features")}</a>
          <a href="#console">{t("nav.console")}</a>
          <a href="#telegram">{t("nav.telegram")}</a>
          <a href="#who">{t("nav.who")}</a>
        </nav>
        <div className="topnav-right">
          <LangToggle />
          <a href="mailto:info@seamew.cc" className="btn btn-primary topnav-cta">
            {t("nav.learn")}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(!open)}>
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>
    </header>);

};

/* ============ Hero ============ */
const Hero = ({ layout = "split", showBubbles = true }) => {
  const { t } = useLang();
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="hero-grid" style={layout === "centered" ? { gridTemplateColumns: "1fr", textAlign: "center" } : {}}>
          <div className="hero-text reveal">
            <div className="eyebrow" style={layout === "centered" ? { margin: "0 auto" } : {}}>
              <span className="dot"></span>
              {t("hero.eyebrow")}
            </div>
            <h1 style={{ marginTop: 24 }}>
              {t("hero.title1")} <span className="it" style={{ color: "rgb(32, 178, 254)" }}>{t("hero.titleSMS")}</span><br />
              {t("hero.title2")}
            </h1>
            <p className="sub-zh" style={layout === "centered" ? { margin: "28px auto 0" } : {}}>
              {t("hero.sub.before")}<strong style={{ color: "var(--ink)" }}>{t("hero.sub.strong")}</strong>{t("hero.sub.after")}
            </p>
            <div className="cta-row" style={layout === "centered" ? { justifyContent: "center" } : {}}>
              <a href="mailto:info@seamew.cc" className="btn btn-primary">
                {t("hero.cta.learn")}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
              </a>
              <a href="#console" className="btn btn-ghost">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3" /></svg>
                {t("hero.cta.demo")}
              </a>
            </div>

            <div className="meta-row">
              <div className="meta-item">
                <span className="num" style={{ fontSize: "20px" }}>{t("hero.meta.numbers")}</span>
                <span className="lbl">{t("hero.meta.numbersLbl")}</span>
              </div>
              <div className="meta-item">
                <span className="num">{t("hero.meta.delay")}</span>
                <span className="lbl">{t("hero.meta.delayLbl")}</span>
              </div>
              <div className="meta-item">
                <span className="num">99.9%</span>
                <span className="lbl">{t("hero.meta.uptimeLbl")}</span>
              </div>
              <div className="meta-item">
                <span className="num" style={{ fontSize: "20px" }}>{t("hero.meta.saving")}</span>
                <span className="lbl">{t("hero.meta.savingLbl")}</span>
              </div>
            </div>
          </div>

          <div className="hero-visual reveal">
            <div className="ring" />
            <img className="seamew-logo" src={(window.__resources && window.__resources.logoDark) || "assets/seamew-logo-dark.png"} alt="" />
            {showBubbles &&
            <>
              <div className="bubble b1">
                <span className="from">{t("hero.bubble1.from")}</span>
                <span className="body">{t("hero.bubble1.body")} <span className="code">482931</span></span>
              </div>
              <div className="bubble b2">
                <span className="from">{t("hero.bubble2.from")}</span>
                <span className="body">{t("hero.bubble2.body")} <span className="order">#2847</span> {t("hero.bubble2.body2")}</span>
              </div>
              <div className="bubble b3">
                <span className="from">{t("hero.bubble3.from")}</span>
                <span className="body">{t("hero.bubble3.body")} <span className="amount">NT$ 168</span></span>
              </div>
            </>}
          </div>
        </div>
      </div>
    </section>);

};

/* ============ Compare ============ */
const Compare = () => {
  const { t } = useLang();
  return (
    <section id="why" data-screen-label="02 Compare">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t("compare.eyebrow")}</div>
          <h2>{t("compare.title1")}<br />{t("compare.title2")}</h2>
          <p>{t("compare.desc")}</p>
        </div>
        <div className="compare reveal">
          <div className="col before">
            <div className="label">{t("compare.before.label")}</div>
            <h3>{t("compare.before.title")}</h3>
            <p style={{ fontSize: 14, color: "var(--ink-3)" }}>{t("compare.before.desc")}</p>
            <div className="phone-list">
              <div className="phone"><span>📱 Google Pixel 9 · 0912-***-815</span><span className="badge">8 {t("compare.unread")}</span></div>
              <div className="phone"><span>📱 Samsung S26 Ultra · 0966-***-178</span><span className="badge">3 {t("compare.unread")}</span></div>
              <div className="phone"><span>📱 Poco C7 Pro · 0933-***-402</span><span className="badge">12 {t("compare.unread")}</span></div>
              <div className="phone"><span>📱 Phone D · 0933-***-402</span><span className="badge">2 {t("compare.unread")}</span></div>
            </div>
          </div>
          <div className="arrow">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </div>
          <div className="col after">
            <div className="label">{t("compare.after.label")}</div>
            <h3>{t("compare.after.title1")}<br />{t("compare.after.title2")}</h3>
            <p style={{ fontSize: 14, color: "rgba(255,255,255,0.7)" }}>{t("compare.after.desc")}</p>
            <div className="unified-inbox">
              <div className="row">
                <span className="pill">OTP</span>
                <span className="num">0987</span>
                <span className="msg">{t("compare.row1.msg")}</span>
                <span className="time">{t("compare.row1.time")}</span>
              </div>
              <div className="row">
                <span className="pill" style={{ background: "rgba(255,255,255,0.18)" }}>SHOP</span>
                <span className="num">0912</span>
                <span className="msg">{t("compare.row2.msg")}</span>
                <span className="time">12m</span>
              </div>
              <div className="row">
                <span className="pill" style={{ background: "rgba(255,255,255,0.18)" }}>PAY</span>
                <span className="num">0987</span>
                <span className="msg">{t("compare.row3.msg")}</span>
                <span className="time">1h</span>
              </div>
              <div className="row">
                <span className="pill" style={{ background: "rgba(255,255,255,0.18)" }}>RIDE</span>
                <span className="num">0966</span>
                <span className="msg">{t("compare.row4.msg")}</span>
                <span className="time">2h</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

/* ============ Features ============ */
const FeatureIcon = ({ d }) =>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d={d} />
  </svg>;

const Features = () => {
  const { t } = useLang();
  return (
    <section id="features" data-screen-label="03 Features">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t("feat.eyebrow")}</div>
          <h2>{t("feat.title1")}<br />{t("feat.title2")}</h2>
        </div>
        <div className="features-grid">
          <div className="feature reveal">
            <div className="icon-wrap"><FeatureIcon d="M22 12h-4l-3 9L9 3l-3 9H2" /></div>
            <h3>{t("feat.f1.title")}</h3>
            <p className="muted">{t("feat.f1.desc")}</p>
            <div className="visual"><LiveTickerMini /></div>
          </div>
          <div className="feature reveal">
            <div className="icon-wrap"><FeatureIcon d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></div>
            <h3>{t("feat.f2.title")}</h3>
            <p className="muted">{t("feat.f2.desc")}</p>
            <div className="visual"><NumberChips /></div>
          </div>
          <div className="feature dark reveal">
            <div className="icon-wrap"><FeatureIcon d="M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24" /></div>
            <h3>{t("feat.f3.title")}</h3>
            <p className="muted">{t("feat.f3.desc")}</p>
            <div className="visual"><DashChrome /></div>
          </div>
          <div className="feature reveal">
            <div className="icon-wrap"><FeatureIcon d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></div>
            <h3>{t("feat.f4.title")}</h3>
            <p className="muted">{t("feat.f4.desc")}</p>
            <div className="visual"><UptimeBar /></div>
          </div>
        </div>
      </div>
    </section>);

};

const LiveTickerMini = () => {
  const { t } = useLang();
  return (
    <div className="ticker">
      <div className="ticker-line">
        <span className="ticker-dot" /> <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>0987</span>
        <span style={{ fontSize: 13 }}>{t("feat.f1.tickerMsg1")}</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", marginLeft: "auto" }}>0.4s</span>
      </div>
      <div className="ticker-line">
        <span className="ticker-dot" /> <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>0912</span>
        <span style={{ fontSize: 13 }}>{t("feat.f1.tickerMsg2")}</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", marginLeft: "auto" }}>0.7s</span>
      </div>
    </div>);

};

const NumberChips = () => {
  const { t } = useLang();
  const items = ["0987-***-321", "0912-***-815", "0966-***-178", "0933-***-402", t("feat.f2.more")];
  return (
    <div className="chips">
      {items.map((n, i) =>
      <span key={i} className={`chip ${i === 4 ? "chip-mute" : ""}`}>
          <span className="chip-dot" /> {n}
        </span>
      )}
    </div>);

};

const DashChrome = () =>
<div className="dash-mini">
    <div className="dash-mini-bar"><span /><span /><span /></div>
    <div className="dash-mini-body">
      <div className="dash-mini-side">
        <div className="dash-mini-side-row active" />
        <div className="dash-mini-side-row" />
        <div className="dash-mini-side-row" />
        <div className="dash-mini-side-row" />
      </div>
      <div className="dash-mini-main">
        <div className="dash-mini-card" />
        <div className="dash-mini-card sm" />
        <div className="dash-mini-card sm" />
      </div>
    </div>
  </div>;

const UptimeBar = () =>
<div className="uptime">
    {Array.from({ length: 30 }).map((_, i) =>
  <span key={i} className={`uptime-bar ${i === 17 ? "warn" : ""}`} />
  )}
  </div>;

/* ============ Console ============ */
const ConsoleShowcase = () => {
  const { t } = useLang();
  const browserRef = useRef(null);
  const [scale, setScale] = useState(1);
  useEffect(() => {
    function fit() {
      if (!browserRef.current) return;
      const w = browserRef.current.clientWidth;
      const target = 1080;
      setScale(Math.min(1, w / target));
    }
    fit();
    const ro = new ResizeObserver(fit);
    if (browserRef.current) ro.observe(browserRef.current);
    window.addEventListener("resize", fit);
    return () => {ro.disconnect();window.removeEventListener("resize", fit);};
  }, []);
  return (
    <section id="console" data-screen-label="04 Console">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t("console.eyebrow")}</div>
          <h2>{t("console.title1")}<br />{t("console.title2")}</h2>
          <p>{t("console.desc")}</p>
        </div>
        <div className="mockup-stage reveal">
          <div className="mockup-stack">
            <div className="browser" ref={browserRef} style={{ height: 700 * scale + 36 }}>
              <div className="browser-bar">
                <div className="browser-dots"><span /><span /><span /></div>
                <div className="browser-url">https://seamew.cc / modules</div>
              </div>
              <div style={{ height: 700 * scale, width: "100%", overflow: "hidden" }}>
                <SeamewMockupDesktop scale={scale} />
              </div>
            </div>
            <div className="phone-wrap"><SeamewMockupPhone /></div>
          </div>
        </div>
      </div>
    </section>);

};

/* ============ Telegram ============ */
const TelegramSection = () => {
  const { t } = useLang();
  const bullets = [
  [t("tg.bullet1.t"), t("tg.bullet1.d")],
  [t("tg.bullet2.t"), t("tg.bullet2.d")],
  [t("tg.bullet3.t"), t("tg.bullet3.d")],
  [t("tg.bullet4.t"), t("tg.bullet4.d")]];

  return (
    <section id="telegram" data-screen-label="05 Telegram">
      <div className="wrap">
        <div className="tg-grid">
          <div className="tg-text reveal">
            <div className="eyebrow"><span className="dot"></span>{t("tg.eyebrow")}</div>
            <h2 style={{ marginTop: 16 }}>
              {t("tg.title1")}<br />
              <span style={{ color: "var(--accent)" }}>{t("tg.title2")}</span>。
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: "var(--ink-3)" }}>{t("tg.desc")}</p>
            <div className="tg-bullets">
              {bullets.map(([title, d], i) =>
              <div className="tg-bullet" key={i}>
                  <div className="tg-bullet-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
                  </div>
                  <div>
                    <strong>{title}</strong>
                    <span>{d}</span>
                  </div>
                </div>
              )}
            </div>
            <div className="tg-flow">
              <div className="tg-flow-step"><span className="tg-flow-num">01</span><span>{t("tg.flow1")}</span></div>
              <span className="tg-flow-arrow">→</span>
              <div className="tg-flow-step"><span className="tg-flow-num">02</span><span>{t("tg.flow2")}</span></div>
              <span className="tg-flow-arrow">→</span>
              <div className="tg-flow-step accent"><span className="tg-flow-num">03</span><span>{t("tg.flow3")}</span></div>
            </div>
          </div>
          <div className="tg-mockup-wrap reveal"><TelegramMockup /></div>
        </div>
      </div>
    </section>);

};

const TelegramMockup = () => {
  const { t } = useLang();
  const messages = [
  { num: "0987-***-321", tag: "OTP", tagCls: "tg-msg-tag-otp", from: t("tg.from1"),
    body: <>{t("tg.body1.before")}<span className="tg-otp">482931</span>{t("tg.body1.after")}</>, time: "14:32" },
  { num: "0912-***-815", tag: "SHOP", tagCls: "", from: t("tg.from2"),
    body: t("tg.body2"), time: "14:18" },
  { num: "0987-***-321", tag: "PAY", tagCls: "tg-msg-tag-pay", from: t("tg.from3"),
    body: t("tg.body3"), time: "13:45" },
  { num: "0966-***-178", tag: "RIDE", tagCls: "", from: t("tg.from4"),
    body: t("tg.body4"), time: "13:22" }];


  const [visible, setVisible] = useState(0);
  const [typing, setTyping] = useState(false);
  const wrapRef = useRef(null);
  const startedRef = useRef(false);
  useEffect(() => {
    const el = wrapRef.current;if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting && !startedRef.current) {startedRef.current = true;runSequence();}});
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
    function runSequence() {
      let i = 0;
      const tick = () => {
        setTyping(true);
        setTimeout(() => {
          setTyping(false);
          setVisible((v) => v + 1);
          i++;
          if (i < messages.length) setTimeout(tick, 1400);else
          setTimeout(() => {setVisible(0);i = 0;setTimeout(tick, 600);}, 4000);
        }, 800);
      };
      setTimeout(tick, 400);
    }
  }, []);

  return (
    <div className="tg-mockup" ref={wrapRef}>
      <div className="tg-mockup-bar">
        <div className="tg-mockup-back">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6" /></svg>
        </div>
        <div className="tg-mockup-bot">
          <div className="tg-mockup-avatar">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M21.5 4.3 18.5 19c-.2 1-.8 1.3-1.7.8L12 16.4l-2.3 2.2c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.5-.6-.2L6.4 12.7 1.6 11.2c-1-.3-1-1 .2-1.5L20 2.5c.9-.3 1.6.2 1.5 1.8z" /></svg>
          </div>
          <div>
            <div className="tg-mockup-name">{t("tg.bot.name")}</div>
            <div className="tg-mockup-status"><span className="tg-mockup-online"></span>{t("tg.bot.status")}</div>
          </div>
        </div>
        <div className="tg-mockup-icons">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" strokeLinecap="round" /></svg>
          <svg width="4" height="18" viewBox="0 0 4 18" fill="currentColor"><circle cx="2" cy="2" r="1.5" /><circle cx="2" cy="9" r="1.5" /><circle cx="2" cy="16" r="1.5" /></svg>
        </div>
      </div>
      <div className="tg-mockup-body">
        <div className="tg-day-divider"><span>{t("tg.day")}</span></div>
        {messages.slice(0, visible).map((m, i) =>
        <div className="tg-msg tg-msg-anim" key={i}>
            <div className="tg-msg-head">
              <span className="tg-msg-num">📱 {m.num}</span>
              <span className={`tg-msg-tag ${m.tagCls}`}>{m.tag}</span>
            </div>
            <div className="tg-msg-from">{m.from}</div>
            <div className="tg-msg-body">{m.body}</div>
            <div className="tg-msg-time">{m.time} ✓✓</div>
          </div>
        )}
        {typing && <div className="tg-typing"><span></span><span></span><span></span></div>}
      </div>
      <div className="tg-mockup-input">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m21.4 11.05-8.5 8.5a6 6 0 1 1-8.5-8.5l8.5-8.5a4 4 0 1 1 5.6 5.6l-8.5 8.5a2 2 0 1 1-2.8-2.8l7.8-7.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span>{t("tg.input")}</span>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3zM19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </div>);

};

/* ============ Who ============ */
const Who = () => {
  const { t } = useLang();
  return (
    <section id="who" data-screen-label="05 Who">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t("who.eyebrow")}</div>
          <h2>{t("who.title1")}<br />{t("who.title2")}</h2>
        </div>
        <div className="who-grid">
          {[
          { img: "saver", role: "c1.role", title: "c1.title", desc: "c1.desc", tags: ["c1.tag1", "c1.tag2", "c1.tag3"], alt: "saver" },
          { img: "dev", role: "c2.role", title: "c2.title", desc: "c2.desc", tags: ["c2.tag1", "c2.tag2", "c2.tag3"], alt: "developer" },
          { img: "gamer", role: "c3.role", title: "c3.title", desc: "c3.desc", tags: ["c3.tag1", "c3.tag2", "c3.tag3"], alt: "studio" }].
          map((c, i) =>
          <div key={i} className="who-card reveal">
              <div className="who-img">
                <img src={(window.__resources && window.__resources[`persona${c.img.charAt(0).toUpperCase()+c.img.slice(1)}`]) || `assets/persona-${c.img}.png`} alt={c.alt} />
              </div>
              <div className="who-card-body">
                <div className="role">{t(`who.${c.role}`)}</div>
                <h4>{t(`who.${c.title}`)}</h4>
                <p>{t(`who.${c.desc}`)}</p>
                <PersonaTags tags={c.tags.map((k) => t(`who.${k}`))} />
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const PersonaTags = ({ tags }) =>
<div className="persona-tags" style={{ marginTop: "auto", display: "flex", flexWrap: "wrap", gap: 6, paddingTop: 16 }}>
    {tags.map((t, i) =>
  <span key={i} style={{
    fontFamily: "var(--font-mono)", fontSize: 11, padding: "3px 9px",
    border: "1px solid var(--line-strong)", borderRadius: 999, color: "var(--ink-3)"
  }}>{t}</span>
  )}
  </div>;

/* ============ CTA ============ */
const CTA = () => {
  const { t } = useLang();
  return (
    <section id="cta" data-screen-label="06 CTA" className="tight">
      <div className="wrap">
        <div className="cta-banner reveal">
          <div className="eyebrow" style={{
            background: "rgba(255,255,255,0.08)", borderColor: "rgba(255,255,255,0.18)", color: "rgba(255,255,255,0.7)"
          }}>
            <span className="dot"></span>{t("cta.eyebrow")}
          </div>
          <h2 style={{ marginTop: 20 }}>{t("cta.title1")}<br />{t("cta.title2")}</h2>
          <p style={{ maxWidth: 520, margin: "16px auto 0" }}>{t("cta.desc")}</p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="mailto:info@seamew.cc" className="btn btn-primary">{t("cta.btn1")}</a>
            <a href="mailto:info@seamew.cc" className="btn btn-ghost" style={{
              color: "white", borderColor: "rgba(255,255,255,0.28)"
            }}>{t("cta.btn2")}</a>
          </div>
        </div>
      </div>
    </section>);

};

const Footer = () => {
  const { t } = useLang();
  return (
    <footer>
      <div className="wrap foot-grid">
        <div className="brand">
          <img src={(window.__resources && window.__resources.logoDark) || "assets/seamew-logo-dark.png"} alt="Seamew" style={{ height: 24 }} />
          <span>SEAMEW</span>
        </div>
        <div className="foot-meta">{t("foot.copy")}</div>
        <div style={{ display: "flex", gap: 28, fontSize: 14, color: "var(--ink-3)", alignItems: "center" }}>
          <a href="#">{t("foot.tos")}</a>
          <a href="#">{t("foot.privacy")}</a>
          <a href="mailto:info@seamew.cc">{t("foot.contact")}</a>
        </div>
      </div>
    </footer>);

};

/* ============ App ============ */
const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {applyTweaks(tweaks);}, [tweaks]);
  useReveal();
  return (
    <>
      <Topnav />
      <Hero layout={tweaks.heroLayout} showBubbles={tweaks.showBubbles} />
      <Compare />
      <TotalSolution />
      <Features />
      <ConsoleShowcase />
      <TelegramSection />
      <Who />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="點綴色">
          <TweakRadio value={tweaks.accent} onChange={(v) => setTweak("accent", v)}
          options={[
          { value: "sky", label: "天空藍" },
          { value: "teal", label: "海洋青" },
          { value: "coral", label: "珊瑚橘" },
          { value: "violet", label: "薰衣紫" }]
          } />
        </TweakSection>
        <TweakSection title="背景色">
          <TweakRadio value={tweaks.background} onChange={(v) => setTweak("background", v)}
          options={[
          { value: "warm", label: "暖白" },
          { value: "cool", label: "冷白" },
          { value: "pure", label: "純白" }]
          } />
        </TweakSection>
        <TweakSection title="Hero 排版">
          <TweakRadio value={tweaks.heroLayout} onChange={(v) => setTweak("heroLayout", v)}
          options={[
          { value: "split", label: "左右分屏" },
          { value: "centered", label: "置中" }]
          } />
        </TweakSection>
        <TweakSection title="顯示飄浮訊息">
          <TweakToggle value={tweaks.showBubbles} onChange={(v) => setTweak("showBubbles", v)} />
        </TweakSection>
      </TweaksPanel>
    </>);

};

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