/* =========================================================
   Shadowbiz — part1.jsx : Nav, Hero, Strip, Belief, Method
   ========================================================= */

function Nav() {
  const scrolled = useScrolled(40);
  const links = [
    ["Method", "#method"], ["Work", "#work"], ["Products", "#products"],
    ["About", "#about"],
  ];
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-in">
        <Brand markSize={30} wordSize={20} animate />
        <div className="nav-links">
          {links.map(([l, h]) => <a key={l} className="nav-link" href={h}>{l}</a>)}
        </div>
        <div className="nav-cta">
          <Btn kind="ghost" href="#work" className="nav-see">See our work</Btn>
          <Btn kind="primary" href="#contact">Talk to us</Btn>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero wrap" id="top">
      <div className="hero-inner">
        <div className="reveal in">
          <span className="eyebrow">Tech &amp; Business Advisory · Custom Solutions Studio</span>
        </div>
        <h1 className="display reveal in d1">
          We don't sell software.<br />We solve <span className="accent">real problems.</span>
        </h1>
        <p className="lede hero-lede reveal in d2">
          Shadowbiz is a custom solutions studio. We sit with businesses, understand the
          pain before we touch the keyboard, then build what's missing — <b>web apps, mobile
          apps, chatbots, ERPs and full product brands.</b>
        </p>
        <div className="hero-cta reveal in d3">
          <Btn kind="primary" href="#work" withArrow>See our work</Btn>
          <Btn kind="ink" href="#contact">Talk to us</Btn>
        </div>
      </div>
      <div className="hero-facts reveal in d4">
        {[
          ["Discipline", <>Tech &amp; Business Advisory</>],
          ["Based in", <>India · <span className="dot">worldwide</span></>],
          ["Shipped", <>9+ products &amp; platforms</>],
          ["Method", <>Listen → Build → Evolve</>],
        ].map(([k, v], i) => (
          <div className="cell" key={i}>
            <div className="k">{k}</div>
            <div className="v">{v}</div>
          </div>
        ))}
      </div>
    </header>
  );
}

function Strip() {
  const items = [
    "Creators of Crestly", "12 months inside real classrooms", "Custom always",
    "Built with school leaders — not for them", "Stockloom · in research",
    "Listen → Build → Evolve", "Based in India · worldwide", "Empathy first",
  ];
  const row = items.concat(items);
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">
        {row.map((t, i) => (
          <span className="strip-item" key={i}><span className="pip" />{t}</span>
        ))}
      </div>
    </div>
  );
}

function Belief() {
  const pillars = [
    ["01", "ear", "Empathy first",
      "We listen. We sit with businesses. We understand the pain before we touch the keyboard."],
    ["02", "blocks", "Custom always",
      "No off-the-shelf compromises. Every solution is shaped for one specific business and the humans inside it."],
    ["03", "spark", "Brand-worthy",
      "Some solutions become full product brands. Crestly is the first. More are coming."],
  ];
  return (
    <section className="section wrap" id="belief">
      <div className="reveal"><span className="eyebrow"><span className="num">01</span> Why we exist</span></div>
      <p className="belief-statement reveal d1" style={{ marginTop: 26 }}>
        We don't arrive with pre-built products. We arrive with ears open —
        <span className="mut"> then build what the business actually needs.</span>
      </p>
      <div className="pillars">
        {pillars.map(([n, ic, h, p], i) => (
          <div className={"pillar reveal d" + (i + 1)} key={n}>
            <div className="pn">{n}</div>
            <div className="ph">{h}</div>
            <div className="pp">{p}</div>
            <div className="pic"><Icon name={ic} size={26} /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

const METHOD = [
  { idx: "01", key: "Listen", title: "Listen & understand",
    short: "We sit with the business and the people who use it every day.",
    long: "Before a single line of code, we embed. We talk to the humans inside the business, watch the day-to-day, and learn where the friction actually lives.",
    foot: "ON-SITE · INTERVIEWS · SHADOWING" },
  { idx: "02", key: "Identify", title: "Identify the real issue",
    short: "We name the gap nobody else has bothered to fix.",
    long: "The loudest complaint is rarely the root cause. We separate symptoms from the real problem, so what we build solves something that genuinely matters.",
    foot: "DIAGNOSIS · ROOT CAUSE · SCOPE" },
  { idx: "03", key: "Build", title: "Build the custom solution",
    short: "Shaped for one business — never off-the-shelf.",
    long: "Then we build. Sometimes a quiet internal tool, sometimes a full product brand. Always custom, always rooted in the real problem we uncovered.",
    foot: "DESIGN · ENGINEER · SHIP" },
  { idx: "04", key: "Evolve", title: "Launch & evolve",
    short: "We stay alongside as the solution grows up.",
    long: "Launch is the start, not the finish. We measure, refine, and grow the work — and where it earns it, give it a brand and a life of its own.",
    foot: "MEASURE · REFINE · GROW" },
];

function Method() {
  const [active, setActive] = useState(0);
  const m = METHOD[active];
  return (
    <section className="section wrap" id="method">
      <div className="method-head">
        <div>
          <div className="reveal"><span className="eyebrow"><span className="num">02</span> How we work</span></div>
          <h2 className="title reveal d1" style={{ marginTop: 22 }}>Listen → Build → Evolve</h2>
        </div>
        <p className="lede reveal d2" style={{ maxWidth: "34ch" }}>
          A method, not a sales pitch. The same four steps on every engagement — small tool or full product.
        </p>
      </div>
      <div className="method-body">
        <div className="steps reveal d1">
          {METHOD.map((s, i) => (
            <button className={"step" + (i === active ? " active" : "")} key={s.idx}
              onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}
              onClick={() => setActive(i)}>
              <span className="marker" />
              <span className="sidx">{s.idx}</span>
              <span className="stext">
                <span className="st">{s.title}</span>
                <span className="sd">{s.short}</span>
              </span>
            </button>
          ))}
        </div>
        <div className="method-vis reveal d2">
          <div className="mv-big" key={"b" + active}>{m.idx}</div>
          <div className="mv-num">STEP {m.idx} — {m.key.toUpperCase()}</div>
          <div className="mv-mid mv-fade" key={active}>
            <div className="mv-title">{m.title}</div>
            <div className="mv-desc">{m.long}</div>
          </div>
          <div>
            <div className="mv-progress">
              {METHOD.map((_, i) => <span key={i} className={i <= active ? "on" : ""} />)}
            </div>
            <div className="mv-foot" style={{ marginTop: 18 }}>{m.foot}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

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