/* Main app — Zocane Brand Guidelines */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "seed": "#1A2D6B",
  "secondary": "",
  "bg": "",
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Inter",
  "radiusMd": 16
}/*EDITMODE-END*/;
window.__ZO_TWEAK_DEFAULTS = TWEAK_DEFAULTS;

const NAV_ITEMS = [
  { id: "color",     num: "01", label: "Color" },
  { id: "type",      num: "02", label: "Typography" },
  { id: "shape",     num: "03", label: "Shape" },
  { id: "packaging", num: "04", label: "Packaging" },
  { id: "tokens",    num: "05", label: "Tokens" },
];

function App() {
  const [toast, setToast] = React.useState(null);
  const [active, setActive] = React.useState("color");
  const [liveTweaks, setLiveTweaks] = React.useState(window.__ZO_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const handler = e => setLiveTweaks(e.detail);
    document.addEventListener('zo:tweaks', handler);
    return () => document.removeEventListener('zo:tweaks', handler);
  }, []);

  const onCopy = React.useCallback((text, label) => {
    try {
      navigator.clipboard?.writeText(text);
      setToast(label || `Copied ${text}`);
    } catch (_) {
      setToast(`Copied ${text}`);
    }
    setTimeout(() => setToast(null), 1800);
  }, []);

  React.useEffect(() => {
    const handler = () => {
      const sections = NAV_ITEMS.map(i => document.getElementById(i.id)).filter(Boolean);
      const y = window.scrollY + 120;
      let cur = null;
      for (const s of sections) {
        if (s.offsetTop <= y) cur = s.id;
      }
      if (cur) setActive(cur);
    };
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  return (
    <div className="zo-app">
      <nav className="zo-nav">
        <div className="zo-nav-brand">
          <div className="zo-nav-brand-name">Zocane</div>
        </div>
        {NAV_ITEMS.map(i => (
          <a
            key={i.id}
            href={`#${i.id}`}
            className={active === i.id ? "active" : ""}
            data-screen-label={`${i.num} ${i.label}`}
          >
            <span className="zo-nav-num">{i.num}</span>
            <span>{i.label}</span>
          </a>
        ))}
        <div style={{ marginTop: "auto", paddingTop: 24, borderTop: "1px solid var(--md-outline-variant)", fontSize: 11, color: "var(--md-on-surface-variant)", lineHeight: 1.6 }}>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 14, color: "var(--md-on-surface)" }}>v1.0</div>
          Mumbai · May 2026<br/>
          brand@zocane.com
        </div>
      </nav>

      <main className="zo-main">
        <header className="zo-hero">
          <div className="zo-hero-eyebrow">Brand Guidelines · v1.0</div>
          <h1 className="zo-hero-title">
            Frictionless luxury,<br/>
            <em>beautifully sent.</em>
          </h1>
          <p className="zo-hero-lede">
            The complete Zocane brand system — logo, color, type, shape, packaging, and tokens.
            Designed for sixty-minute delivery and the unboxing that follows.
          </p>
          <div className="zo-hero-meta">
            <div><strong>Seed</strong> {liveTweaks.seed}</div>
            <div><strong>{(liveTweaks.displayFont || "").split(" ")[0]}</strong> + {liveTweaks.bodyFont}</div>
            <div><strong>MD3</strong> Expressive</div>
            <div><strong>Triadic</strong> scheme</div>
          </div>
        </header>

        <ColorSection onCopy={onCopy} tweaks={liveTweaks} />
        <TypeSection tweaks={liveTweaks} />
        <ShapeSection />
        <PackagingSection />
        <TokensSection onCopy={onCopy} />

        <footer style={{
          marginTop: 80, padding: "32px 0",
          borderTop: "1px solid var(--md-outline-variant)",
          color: "var(--md-on-surface-variant)", fontSize: 13,
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--md-on-surface)" }}>Zocane Tech Pvt. Ltd.</div>
            <div>Mumbai · 2026</div>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--md-on-surface)" }}>
            A small thing, beautifully sent.
          </div>
        </footer>
      </main>

      <ZocaneTweaks />

      <div className={`zo-toast ${toast ? "show" : ""}`}>{toast}</div>
    </div>
  );
}

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