/* global React */

/* Three hero variants, switchable via Tweaks. */

function HeroDark() {
  return (
    <section className="hero hero--dark" data-screen-label="01 Hero (Dark)" id="top">
      <div className="shell hero__inner">
        <div>
          <h1>
            Your e‑commerce team in <span className="accent">Asia</span>.
          </h1>
        </div>
        <div>
          <p className="hero__strap">
            Research, strategy, build, and daily operations — for brands selling into Southeast Asian marketplaces and storefronts.
          </p>
          <div className="hero__ctas">
            <a className="btn btn-primary--invert" href="#contact">Book a call <span className="arrow">→</span></a>
            <a className="btn btn-ghost btn-ghost--on-dark" href="#works">See our works</a>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="hero__foot">
          <div className="label">Brands we've built, launched, and operated for.</div>
          <ClientLogos theme="light" />
        </div>
      </div>
    </section>
  );
}

function HeroPaper() {
  return (
    <section className="hero hero--paper" data-screen-label="01 Hero (Paper)" id="top">
      <div className="shell hero__inner">
        <div>
          <h1>
            Your e‑commerce team in <span className="accent">Asia</span>.
          </h1>
        </div>
        <div>
          <p className="hero__strap">
            Research, strategy, build, and daily operations — for brands selling into Southeast Asian marketplaces and storefronts.
          </p>
          <div className="hero__ctas">
            <a className="btn btn-primary" href="#contact">Book a call <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="#works">See our works</a>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="hero__foot">
          <div className="label">Brands we've built, launched, and operated for.</div>
          <ClientLogos theme="dark" />
        </div>
      </div>
    </section>
  );
}

function HeroSplit() {
  const stages = [
    { n: "001", t: "Strategy", s: "From research to strategy" },
    { n: "002", t: "Implementation", s: "Turning strategy into reality" },
    { n: "003", t: "Operations", s: "Running and refining" },
  ];
  return (
    <section className="hero hero--split" data-screen-label="01 Hero (Split)" id="top">
      <div className="hero__split">
        <div className="hero__split-left">
          <div>
            <div className="hero-eyebrow">Omasu · The Craftsman's Studio</div>
            <h1>
              Define. Craft.<br/>
              Deliver.<br/>
              <span className="accent">Scale.</span>
            </h1>
          </div>
          <div>
            <p className="hero__strap" style={{ color: "rgba(255,255,255,0.72)" }}>
              A boutique customer-experience studio for lifestyle &amp; kitchenware brands. Singapore-based; Lazada-fluent.
            </p>
            <div className="hero__ctas">
              <a className="btn btn-primary--invert" href="#contact">Book a call <span className="arrow">→</span></a>
              <a className="btn btn-ghost btn-ghost--on-dark" href="#works">See our works</a>
            </div>
          </div>
        </div>
        <div className="hero__split-right">
          <div className="hero-eyebrow" style={{ color: "var(--fg-3)" }}>The end-to-end arc</div>
          <p className="strap">
            We don't hand over the keys and walk away. We run the experience — every day.
          </p>
          <p className="body">
            We move beyond traditional consulting by fusing strategic insight with the relentless execution required to deliver excellence — not just planning the future, but building it, and running it.
          </p>
          <div className="stage-list">
            {stages.map(s => (
              <div className="row" key={s.n}>
                <div className="n">{s.n}</div>
                <div>
                  <div className="t">{s.t}.</div>
                  <div className="s">{s.s}</div>
                </div>
                <div className="s">→</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant = "dark" }) {
  if (variant === "paper") return <HeroPaper />;
  if (variant === "split") return <HeroSplit />;
  return <HeroDark />;
}

window.Hero = Hero;