/* global React, Mascot, Glyph */
// Nav + Hero for bebe.

function Logo() {
  return (
    <a href="#top" className="logo" aria-label="bebe home">
      <span className="logo-mark logo-mascot"><Mascot size={40} blink={false} /></span>
      <span className="logo-word">bebe<span className="logo-dot">.</span></span>
      <span className="logo-tag">studio</span>
    </a>
  );
}

function getInitialTheme() {
  try {
    const stored = localStorage.getItem("bebe-theme");
    if (stored) return stored;
  } catch {}
  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}

function ThemeToggle({ theme, onToggle }) {
  const isDark = theme === "dark";
  return (
    <button className="theme-toggle" onClick={onToggle} aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}>
      {isDark ? (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1" x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1" y1="12" x2="3" y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
      ) : (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      )}
    </button>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [theme, setTheme] = React.useState(getInitialTheme);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    document.body.style.background = ""; // let CSS handle it via [data-theme]
    try { localStorage.setItem("bebe-theme", theme); } catch {}
  }, [theme]);

  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark");

  return (
    <header className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="wrap nav-inner">
        <Logo />
        <nav className="nav-links">
          <a href="#studio">Studio</a>
          <a href="#work">Work</a>
          <a href="#team">Team</a>
          <a href="#careers">Careers</a>
        </nav>
        <ThemeToggle theme={theme} onToggle={toggleTheme} />
      </div>
    </header>
  );
}

function OrbitChip({ glyph, label, color, cls }) {
  return (
    <div className={"orbit-chip " + cls}>
      <span className="oc-icon" style={{ color }}><Glyph kind={glyph} size={18} /></span>
      <span className="oc-label">{label}</span>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="eyebrow reveal in"><span className="tick"></span>Independent software studio · est. 2024</div>

          <h1 className="hero-h1 reveal in" data-d="1">
            We build software<br />
            <span className="serif-em hero-em">people keep</span> using.
          </h1>

          <p className="hero-sub reveal in" data-d="2">
            <strong>bebe</strong> is a software studio. We ship our own niche products —
            and craft custom software for the teams we believe in.
          </p>

          <div className="hero-cta reveal in" data-d="3">
            <a href="#work" className="btn btn-primary">See what we build <span className="arrow">→</span></a>
            <a href="#studio" className="btn btn-ghost">About the studio</a>
          </div>

          <div className="hero-meta reveal in" data-d="4">
            <div><b>1</b><span>product live</span></div>
            <div className="hm-div"></div>
            <div><b>3+</b><span>in the lab</span></div>
            <div className="hm-div"></div>
            <div><b>∞</b><span>custom builds</span></div>
          </div>
        </div>

        <div className="hero-stage reveal in" data-d="2">
          <div className="stage-ring r1"></div>
          <div className="stage-ring r2"></div>
          <div className="mascot-float"><Mascot size={300} /></div>

          <div className="speech">
            <span className="speech-spark">✦</span> made with care
          </div>

          <OrbitChip glyph="web" label="arqicraft" color="var(--arqi-amber)" cls="oc-1" />
          <OrbitChip glyph="helm" label="HELM" color="var(--accent)" cls="oc-2" />
          <OrbitChip glyph="scout" label="SCOUT" color="var(--mint)" cls="oc-3" />
        </div>
      </div>

      <div className="hero-marquee" aria-hidden="true">
        <div className="mq-track">
          {Array.from({ length: 2 }).map((_, i) => (
            <span key={i} className="mq-set">
              <em>Products</em> · Custom software · <em>Web</em> · Management systems · <em>Discovery</em> · Design · <em>Engineering</em> · Brand ·&nbsp;
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });