// app.jsx — root component + shared bits + hero/manifesto/stats

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ember",
  "logo": "mark",
  "displayFont": "instrument",
  "density": "regular"
} /*EDITMODE-END*/;

const PALETTES = {
  ember: { bg: "#F4EEE2", surface: "#FFFFFF", ink: "#1A1714", mute: "#6E6357", line: "rgba(26,23,20,.12)", accent: "#6B3FBF", accentInk: "#FFFFFF", soft: "#EDE3D1" },
  slate: { bg: "#F2F1EE", surface: "#FFFFFF", ink: "#0E1217", mute: "#5D6571", line: "rgba(14,18,23,.10)", accent: "#1F3FB2", accentInk: "#FFFFFF", soft: "#E2E4E8" },
  pulse: { bg: "#FFFFFF", surface: "#FAFAFA", ink: "#000000", mute: "#5C5C5C", line: "rgba(0,0,0,.10)", accent: "#7A2DD8", accentInk: "#FFFFFF", soft: "#F0F0F0" },
  forest: { bg: "#EFEDE4", surface: "#FFFFFF", ink: "#10231A", mute: "#5C6A60", line: "rgba(16,35,26,.12)", accent: "#2F6B3F", accentInk: "#FFFFFF", soft: "#DDE2D1" }
};

const FONT_DISPLAY = {
  instrument: `'Instrument Serif', 'Times New Roman', serif`,
  newsreader: `'Newsreader', 'Times New Roman', serif`,
  bricolage: `'Bricolage Grotesque', system-ui, sans-serif`
};
const FONT_SANS = `'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif`;
const FONT_MONO = `'Geist Mono', ui-monospace, 'JetBrains Mono', monospace`;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const p = PALETTES[t.palette] || PALETTES.ember;
  const displayFont = FONT_DISPLAY[t.displayFont] || FONT_DISPLAY.instrument;

  // expose CSS vars
  const cssVars = {
    "--bg": p.bg, "--surface": p.surface, "--ink": p.ink, "--mute": p.mute,
    "--line": p.line, "--accent": p.accent, "--accentInk": p.accentInk, "--soft": p.soft,
    "--display": displayFont, "--sans": FONT_SANS, "--mono": FONT_MONO
  };

  return (
    <div className="ft-root" style={cssVars}>
      <Nav logo={t.logo} />
      <Hero logo={t.logo} />
      <Marquee />
      <Manifesto />
      <ByNumbers />
      <Services />
      <Pillars />
      <PillProcBridge />
      <Process />
      <Team />
      <Testimonials />
      {/* Hidden for now — keeping in files for later build-out
      <Blog />
      <Jobs />
      */}
      <FAQ />
      <Lead />
      <Foot logo={t.logo} />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor label="Theme" value={t.palette}
        options={[
        ["#6B3FBF", "#F4EEE2", "#1A1714"],
        ["#1F3FB2", "#F2F1EE", "#0E1217"],
        ["#7A2DD8", "#FFFFFF", "#000000"],
        ["#2F6B3F", "#EFEDE4", "#10231A"]]
        }
        onChange={(v) => setTweak("palette", ["ember", "slate", "pulse", "forest"][[
        ["#6B3FBF", "#F4EEE2", "#1A1714"],
        ["#1F3FB2", "#F2F1EE", "#0E1217"],
        ["#7A2DD8", "#FFFFFF", "#000000"],
        ["#2F6B3F", "#EFEDE4", "#10231A"]].
        findIndex((arr) => JSON.stringify(arr) === JSON.stringify(v))])} />
        
        <TweakSection label="Identity" />
        <TweakRadio label="Logo" value={t.logo}
        options={["mark", "wordmark", "mono", "stack"]}
        onChange={(v) => setTweak("logo", v)} />
        <TweakSelect label="Display font" value={t.displayFont}
        options={["instrument", "newsreader", "bricolage"]}
        onChange={(v) => setTweak("displayFont", v)} />
      </TweaksPanel>
    </div>);

}

/* ───────────── LOGO ───────────── */
function Logo({ variant = "wordmark", color, size = 14 }) {
  const c = color || "currentColor";
  if (variant === "mark") {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.55, color: c, lineHeight: 1 }}>
        <img src="assets/fuse-logo.png" alt="Fuse Talent" style={{ height: size * 2.2, width: "auto", display: "block" }} />
        <span style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: size, letterSpacing: ".22em" }}>FUSE TALENT</span>
      </span>);

  }
  if (variant === "mono") {
    return (
      <span style={{ fontFamily: "var(--mono)", fontWeight: 600, fontSize: size, letterSpacing: ".01em", color: c, whiteSpace: "nowrap" }}>
        connect<span style={{ opacity: .55 }}>(</span>talent<span style={{ opacity: .55 }}>)</span> <span style={{ opacity: .55 }}>→</span> ignite<span style={{ opacity: .55 }}>(</span>growth<span style={{ opacity: .55 }}>)</span>
      </span>);

  }
  if (variant === "stack") {
    return (
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1, color: c, gap: 2 }}>
        <span style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: size, letterSpacing: ".24em" }}>FUSE TALENT</span>
        <span style={{ fontFamily: "var(--mono)", fontStyle: "italic", fontWeight: 300, fontSize: size * 0.55, letterSpacing: ".18em", opacity: .7 }}>YOUR TEAM, EXTENDED</span>
      </span>);

  }
  return (
    <span style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: size, letterSpacing: ".24em", color: c }}>FUSE TALENT</span>);

}

/* ───────────── NAV ───────────── */
function Nav({ logo, base = "" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();window.addEventListener("scroll", on);return () => window.removeEventListener("scroll", on);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <header className={"ft-nav " + (scrolled ? "ft-nav--scrolled" : "") + (open ? " ft-nav--open" : "")}>
      <a href={base ? base : "#top"} className="ft-nav__logo" onClick={close}><Logo variant={logo} size={13} /></a>
      <nav className="ft-nav__links">
        <a href={`${base}#model`}>Our Model</a>
        <a href={`${base}#team`}>Team</a>
        <a href={`${base}#about`}>About</a>
        <a href={`${base}#testimonials`}>Testimonials</a>
        <a href="blog.html">Blog</a>
        <a href={`${base}#faq`}>FAQ</a>
      </nav>
      <a href={`${base}#contact`} className="ft-nav__cta">Get started <span aria-hidden>↗</span></a>
      <button
        type="button"
        className="ft-nav__burger"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen(v => !v)}>
        <span className="ft-nav__burgerLine" />
        <span className="ft-nav__burgerLine" />
      </button>
      <div className={"ft-nav__overlay" + (open ? " is-on" : "")} onClick={close}>
        <nav className="ft-nav__overlayNav" onClick={(e) => e.stopPropagation()}>
          <a href={`${base}#model`} onClick={close}>Our Model</a>
          <a href={`${base}#team`} onClick={close}>Team</a>
          <a href={`${base}#about`} onClick={close}>About</a>
          <a href={`${base}#testimonials`} onClick={close}>Testimonials</a>
          <a href="blog.html" onClick={close}>Blog</a>
          <a href={`${base}#faq`} onClick={close}>FAQ</a>
          <a href={`${base}#contact`} className="ft-nav__overlayCta" onClick={close}>Get started <span aria-hidden>↗</span></a>
        </nav>
      </div>
    </header>);

}

/* ───────────── HERO ───────────── */
function Hero({ logo }) {
  return (
    <section className="ft-hero" id="top">
      <h1 className="ft-hero__h">
        Intelligent recruiting<br />
        for <em>ambitious</em> teams.
      </h1>
      <p className="ft-hero__sub">
        <span className="ft-hero__sub-lead">For companies building something that matters.</span> We hire for <em>mission</em>, recruit through <em>story</em>, and measure by <em>impact</em>.
      </p>
      <div className="ft-hero__cta">
        <a href="#contact" className="ft-btn ft-btn--primary">Start hiring <span>→</span></a>
        <a href="#model" className="ft-btn ft-btn--ghost">See our model <span>→</span></a>
      </div>
    </section>);

}

/* ───────────── BY THE NUMBERS ───────────── */
function ByNumbers() {
  return (
    <section className="ft-bynums">
      <div className="ft-hero__strip">
        <div className="ft-hero__stripTop">
          <span className="ft-eyebrow">Why choose us</span>
        </div>
        <div className="ft-bento">
          <div className="ft-hero__stat" style={{ gridColumn: "span 4" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>Speed</div>
            <div className="ft-hero__statNum">24<span className="ft-hero__statUnit">days</span></div>
            <div className="ft-hero__statLbl">Average time from kickoff to first offer.</div>
          </div>
          <div className="ft-hero__stat" style={{ gridColumn: "span 4" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>Signal</div>
            <div className="ft-hero__statNum">95<span className="ft-hero__statUnit">%</span></div>
            <div className="ft-hero__statLbl">Of the candidates we submit make it to an interview.</div>
          </div>
          <div className="ft-hero__stat" style={{ gridColumn: "span 4" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>Staying power</div>
            <div className="ft-hero__statNum">11<span className="ft-hero__statUnit">months</span></div>
            <div className="ft-hero__statLbl">Average engagement length.</div>
          </div>
          <div className="ft-hero__stat" style={{ gridColumn: "span 5" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>Experience</div>
            <div className="ft-hero__statNum ft-hero__statNum--mid">20+<span className="ft-hero__statUnit">yrs</span></div>
            <div className="ft-hero__statLbl">Scaling teams across GTM, EPD and Operations.</div>
          </div>
          <div className="ft-hero__stat" style={{ gridColumn: "span 4" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>Focus</div>
            <div className="ft-hero__statNum ft-hero__statNum--mid">Seed<span className="ft-hero__statArrow">→</span>Growth</div>
            <div className="ft-hero__statLbl">Our expertise. First hires through scaling stages.</div>
          </div>
          <div className="ft-hero__stat ft-hero__stat--lead" style={{ gridColumn: "span 3" }}>
            <div className="ft-hero__statTag"><span className="ft-hero__statDot">✦</span>On demand</div>
            <div className="ft-hero__statNum ft-hero__statNum--word">Flexible <em>by design.</em></div>
            <div className="ft-hero__statLbl">Scale up or down with no overhead when you don't need us.</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────────── TRUSTED BY MARQUEE ───────────── */
function Marquee() {
  const items = [
  { name: "Juicebox", src: "assets/logos/juicebox.png" },
  { name: "Linear", src: "assets/logos/linear.png" },
  { name: "Middesk", src: "assets/logos/middesk.png" },
  { name: "Recall.ai", src: "assets/logos/recall.png" },
  { name: "Paraform", src: "assets/logos/paraform.png" },
  { name: "Census", src: "assets/logos/census.png" },
  { name: "Amplio", src: "assets/logos/amplio.png" },
  { name: "Mintlify", src: "assets/logos/mintlify.png" },
  { name: "Poggio", src: "assets/logos/poggio.png" },
  { name: "WeaveGrid", src: "assets/logos/weavegrid.png" }];

  const row = [...items, ...items, ...items];
  return (
    <section className="ft-marq">
      <div className="ft-marq__inner">
        <div className="ft-marq__label"><span className="ft-eyebrow">Trusted by</span></div>
        <div className="ft-marq__track">
          <div className="ft-marq__row">
            {row.map((c, i) =>
            <span key={i} className="ft-marq__item">
                <img src={c.src} alt={c.name} className="ft-marq__logo" />
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ───────────── MANIFESTO ───────────── */
function Manifesto() {
  return (
    <section className="ft-manifesto" id="why">
      <div className="ft-manifesto__inner">
        <h2 className="ft-manifesto__h">
          Your bar is high.<br />
          <em>We know.</em>
        </h2>
        <div className="ft-manifesto__body">
          <p>We help startups build world-class <em>EPD</em>, <em>GTM</em>, and <em>OPS</em> teams. We start from first principles: your story, your product, your bar. <em>Then we deliver.</em></p>
        </div>
      </div>
    </section>);

}

/* ───────────── STATS ───────────── */
function Stats() {
  const stats = [
  { k: "10+ yrs", l: "scaling teams" },
  { k: "Seed→B", l: "the stage we know cold" },
  { k: "2×", l: "faster than the industry average to first offer" }];

  return (
    <section className="ft-stats">
      {stats.map((s, i) =>
      <div key={i} className="ft-stats__cell">
          <div className="ft-stats__num">{s.k}</div>
          <div className="ft-stats__lbl">{s.l}</div>
        </div>
      )}
    </section>);

}

function PillProcBridge() {
  return (
    <div className="ft-bridge" aria-hidden="true"></div>);
}

Object.assign(window, { App, Logo, Nav, Hero, Marquee, Manifesto, Stats, ByNumbers, PillProcBridge, PALETTES });