// Juggling Oranges — "Free Tools" landing (redesign). Self-contained UI kit.
// Same brutalist-pop system as the marketing site, refocused on the product's
// real purpose: free, AI-native tools for the music industry.
const { useState, useEffect, useMemo, useRef } = React;

// [icon, name, category, desc, url — null means request access via contact form]
const TOOLS = [
  ["file-scan",     "AI Invoice Reader",            "AI",         "Paste any label or distributor invoice. The agent extracts line items, flags anomalies, and exports a clean CSV.",                                                          null],
  ["calculator",    "Royalty Estimator",            "Royalties",  "Estimate streaming payouts across every major DSP before the statement lands.",                                                                                              "https://estimator.juggling-oranges.com"],
  ["sparkles",      "Music DNA Report",             "Metadata",   "Fix messy track metadata — titles, features, credits — before you distribute.",                                                                                              "https://dna.juggling-oranges.com"],
  ["download-cloud","Merlin/Amazon Statement Fetcher","Statements","Connect Merlin and Amazon Music to pull every royalty statement in one batch and normalise them into a single clean spreadsheet — no manual clicking.",                     "https://statements.juggling-oranges.com"],
  ["scan-text",     "AI Contract Reader",           "AI",         "Let an agent read your label or distribution deal and flag the gotchas.",                                                                                                    null],
];
const CATS = ["All", "AI", "Royalties", "Metadata", "Statements"];
const FREE_LABELS = ["Free", "Still free", "Another one, free", "Also free", "Free. We checked.", "Obviously free"];

/* ----------------------------------------------------------- Nav */
function Nav() {
  const links = [["Tools", "#toolbox"], ["Why free", "#why"], ["Get in touch", "#contact"]];
  const [active, setActive] = useState("");
  useEffect(() => {
    const ids = ["toolbox", "why", "contact"];
    const onScroll = () => {
      const y = window.scrollY + 140;
      let cur = "";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = "#" + id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40, borderBottom: "var(--border)",
      background: "hsl(var(--jo-paper-hsl) / 0.95)", backdropFilter: "blur(8px)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 70 }}>
        <a href="#top" aria-label="Juggling Oranges — home" style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <span style={{ position: "relative", width: 34, height: 34, flex: "0 0 auto" }}>
            <span style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 14, height: 14, borderRadius: "50%", background: "var(--jo-orange)", border: "1.5px solid var(--jo-ink)" }} />
            <span style={{ position: "absolute", bottom: 0, left: 0, width: 14, height: 14, borderRadius: "50%", background: "var(--jo-ink)" }} />
            <span style={{ position: "absolute", bottom: 0, right: 0, width: 14, height: 14, borderRadius: "50%", background: "var(--jo-paper)", border: "1.5px solid var(--jo-ink)" }} />
          </span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 16, lineHeight: 0.85, letterSpacing: "-0.03em", color: "var(--jo-ink)" }}>Juggling<br/>Oranges</span>
        </a>
        <nav className="mono" style={{ display: "flex", gap: 30, fontSize: 13 }}>
          {links.map(([l, h]) => {
            const isActive = active === h;
            return (
              <a key={h} href={h} style={{
                  color: isActive ? "var(--jo-orange)" : "",
                  borderBottom: isActive ? "2px solid var(--jo-orange)" : "2px solid transparent",
                  paddingBottom: 3, transition: "color var(--dur) ease, border-color var(--dur) ease" }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--jo-orange)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = isActive ? "var(--jo-orange)" : "")}>{l}</a>
            );
          })}
        </nav>
        <a href="#try" className="tag" style={{ transition: "transform var(--dur) var(--ease-pop)" }}
          onMouseEnter={(e) => (e.currentTarget.style.transform = "translate(-2px,-2px)")}
          onMouseLeave={(e) => (e.currentTarget.style.transform = "")}>Launch a tool</a>
      </div>
    </header>
  );
}

/* ---------------------------------------------------------- Hero */
function Hero() {
  return (
    <section id="top" className="jo-grid-bg">
      <div className="container grid-hero" style={{ padding: "72px 32px 64px" }}>
        {/* left — copy */}
        <div style={{ display: "flex", flexDirection: "column", gap: 28, alignItems: "flex-start" }}>
          <span className="tag jo-animate-wiggle">Free · For the music industry</span>
          <h1 style={{ fontSize: "clamp(3rem, 6.5vw, 5.75rem)", maxWidth: "15ch" }}>
            Tools That{" "}
            <span style={{ background: "var(--jo-orange)", color: "var(--text-on-orange)", padding: "0 12px",
              border: "var(--border)", boxShadow: "var(--shadow-brutal)", display: "inline-block",
              transform: "rotate(-1.5deg)" }}>Count.</span>
          </h1>
          <p style={{ fontSize: "var(--size-lead)", color: "var(--text-muted)", maxWidth: "42ch", lineHeight: 1.5, margin: 0 }}>
            Free, AI-native utilities for artists, labels and publishers — built by the
            people who count royalties for a living.
          </p>
          <a href="#toolbox" className="btn btn-ink" style={{ marginTop: 8 }}>
            Try them out <span aria-hidden>↓</span>
          </a>
          <div className="mono" style={{ fontSize: 12, color: "var(--text-muted)" }}>
            5 tools live · Free forever · Manually reviewed
          </div>
        </div>
        {/* right — collage */}
        <div className="hero-art" aria-hidden="true" style={{ position: "relative", minHeight: 460 }}>
          {/* back mini card */}
          <div className="card" style={{ position: "absolute", top: 56, right: 170, width: 230, padding: 18,
            transform: "rotate(-4deg)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ height: 36, width: 36, background: "var(--jo-orange)", border: "var(--border)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-on-orange)", fontSize: 17, flexShrink: 0 }}>
                <i data-lucide="file-scan"></i>
              </span>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 15, lineHeight: 1.05 }}>AI Invoice Reader</div>
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--text-muted)", marginTop: 12 }}>Parsing… 142 line items</div>
            <div style={{ height: 8, background: "var(--jo-muted)", border: "var(--border)", marginTop: 8 }}>
              <div style={{ height: "100%", width: "72%", background: "var(--jo-orange)" }} />
            </div>
          </div>
          {/* front mini card */}
          <div className="card jo-animate-float" style={{ position: "absolute", top: 200, right: 16, width: 250, padding: 18,
            transform: "rotate(2deg)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ height: 36, width: 36, background: "var(--jo-ink)", border: "var(--border)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "var(--jo-orange)", fontSize: 17, flexShrink: 0 }}>
                <i data-lucide="sparkles"></i>
              </span>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 15, lineHeight: 1.05 }}>Metadata Cleaner</div>
            </div>
            <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
              <span className="mono" style={{ fontSize: 10, background: "var(--jo-orange)", color: "var(--text-on-orange)",
                padding: "3px 7px", border: "var(--border)" }}>3 issues found</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--text-muted)", padding: "3px 0" }}>Fix all →</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------- Marquee */
function Marquee({ words = ["AI Invoice Reader", "Royalty Estimator", "Music DNA Report", "Statement Fetcher", "AI Contract Reader"] }) {
  const run = words.map((w, i) => (
    <span key={i} style={{ display: "flex", alignItems: "center", gap: 32, paddingRight: 32 }}>
      <span>{w}</span><span aria-hidden style={{ color: "var(--jo-orange)" }}>◆</span>
    </span>
  ));
  return (
    <div style={{ background: "var(--jo-ink)", color: "var(--text-on-ink)", overflow: "hidden", padding: "12px 0" }}>
      <div className="jo-marquee" style={{ fontFamily: "var(--font-display)", fontSize: 22, whiteSpace: "nowrap" }}>
        <div style={{ display: "flex" }}>{run}</div>
        <div style={{ display: "flex" }} aria-hidden>{run}</div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------- Toolbox */
function Toolbox({ cat, setCat, onLaunch }) {
  const filtered = useMemo(
    () => (cat === "All" ? TOOLS : TOOLS.filter((t) => t[2] === cat)),
    [cat]
  );

  return (
    <section id="toolbox" style={{ padding: "88px 0" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 28 }}>
          <div>
            <span className="tag">The toolbox</span>
            <h2 style={{ fontSize: "clamp(2.25rem, 4vw, 3.5rem)", marginTop: 16 }}>Pick a tool. It's free.</h2>
          </div>
          <p style={{ color: "var(--text-muted)", maxWidth: "30ch", margin: 0 }}>
            Each one does a single annoying job well — so you can get back to the music.
          </p>
        </div>

        {/* category filter */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 32 }}>
          {CATS.map((c) => {
            const active = c === cat;
            return (
              <button key={c} onClick={() => setCat(c)} className="mono"
                style={{ cursor: "pointer", fontSize: 12, padding: "7px 13px", borderRadius: 999,
                  border: "var(--border)", letterSpacing: "0.08em",
                  background: active ? "var(--jo-ink)" : "transparent",
                  color: active ? "var(--text-on-ink)" : "var(--text-strong)",
                  boxShadow: active ? "var(--shadow-brutal-sm)" : "none",
                  transition: "all var(--dur) ease" }}>{c}</button>
            );
          })}
        </div>

        {/* grid */}
        <div className="grid-tools">
          {filtered.map(([icon, name, c, desc, url], i) => {
            const isAI = c === "AI";
            const inner = (
              <>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ height: 48, width: 48, background: "var(--jo-orange)", border: "var(--border)",
                    display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-on-orange)", fontSize: 22 }}>
                    <i data-lucide={icon}></i>
                  </span>
                  <span className="tag paper" style={{ boxShadow: "none", fontSize: 11 }}>{c}</span>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                  <h3 style={{ fontSize: 21 }}>{name}</h3>
                  <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.55, margin: 0 }}>{desc}</p>
                </div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: 4 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--jo-orange)", fontWeight: 700, whiteSpace: "nowrap" }}>
                    {isAI ? "Request access →" : "Launch tool →"}
                  </span>
                  <span className="mono" style={{ fontSize: 11, color: "var(--text-muted)", whiteSpace: "nowrap" }}>{FREE_LABELS[i % FREE_LABELS.length]}</span>
                </div>
              </>
            );
            const cardStyle = { padding: 26, display: "flex", flexDirection: "column", gap: 16, minHeight: 230, textDecoration: "none", color: "inherit" };
            return isAI
              ? <div key={name} className="card lift" style={cardStyle} onClick={() => onLaunch(name, c)}>{inner}</div>
              : <a key={name} className="card lift" href={url} target="_blank" rel="noopener noreferrer" style={cardStyle}>{inner}</a>;
          })}
          {/* Request a tool — empty slot */}
          {(cat === "All") && (
            <div className="card lift" onClick={() => onLaunch("__request__", null)}
              style={{ padding: 26, display: "flex", flexDirection: "column", gap: 16, minHeight: 230,
                border: "2px dashed var(--jo-ink)", boxShadow: "none", background: "transparent",
                cursor: "pointer", alignItems: "flex-start", justifyContent: "space-between" }}>
              <div style={{ height: 48, width: 48, border: "2px dashed var(--jo-ink)",
                display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, color: "var(--jo-ink)", borderRadius: "var(--radius)" }}>+</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                <h3 style={{ fontSize: 21 }}>Request a tool</h3>
                <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.55, margin: 0 }}>
                  We'd love to hear about your challenges and we're here to help build solutions for you.
                </p>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--jo-ink)", fontWeight: 700 }}>Get in touch →</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------- Why free */
const WHY = [["6", "Free tools live"], ["0", "Dollars, ever"], ["9k+", "Tracks behind them"], ["60s", "To verify & unlock"]];
function WhyFree() {
  return (
    <section id="why" style={{ padding: "88px 0", background: "var(--jo-ink)", color: "var(--text-on-ink)" }}>
      <div className="container">
        <div className="grid-2col" style={{ marginBottom: 48 }}>
          <h2 style={{ fontSize: "clamp(2.25rem, 4vw, 3.5rem)" }}>Why give it away?</h2>
          <p style={{ fontSize: "var(--size-lead)", opacity: 0.8, lineHeight: 1.5, margin: 0 }}>
            Because the music business runs on bad spreadsheets and worse PDFs. We build the boring
            stuff once, hand it to everyone, and feed our children through cutting edge music tech consulting to enterprise clients.
          </p>
        </div>
        <div className="grid-stats" style={{ background: "hsl(var(--jo-paper-hsl) / 0.2)", border: "2px solid var(--jo-paper)" }}>
          {WHY.map(([v, l]) => (
            <div key={l} style={{ background: "var(--jo-ink)", padding: 30, transition: "background var(--dur) ease, color var(--dur) ease" }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--jo-orange)"; e.currentTarget.style.color = "var(--text-on-orange)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "var(--jo-ink)"; e.currentTarget.style.color = ""; }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.5rem, 4vw, 3.25rem)", lineHeight: 0.95 }}>{v}</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 10, opacity: 0.75 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------- Email Verify */
function EmailVerify({ centered = false }) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle"); // idle | loading | sent

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setState("loading");
    setTimeout(() => setState("sent"), 1200);
  };

  if (state === "sent") {
    return (
      <div className="card" style={{ display: "inline-flex", alignItems: "center", gap: 14,
        padding: "18px 22px", marginTop: 16 }}>
        <span style={{ height: 44, width: 44, background: "var(--jo-ink)", border: "var(--border)",
          boxShadow: "var(--shadow-brutal-sm)", display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--jo-orange)", fontSize: 22, flexShrink: 0 }}>
          <i data-lucide="mail-check"></i>
        </span>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>Check your inbox.</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 4 }}>
            Verify link sent to {email}
          </div>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ display: "flex", gap: 12, flexWrap: "wrap",
      justifyContent: centered ? "center" : "flex-start", marginTop: 16 }}>
      <div className="card" style={{ display: "flex", alignItems: "center", gap: 10,
        padding: "12px 16px", minWidth: 280, flex: "1 1 280px", maxWidth: 380 }}>
        <i data-lucide="mail" style={{ fontSize: 17, color: "var(--jo-orange)", flexShrink: 0 }}></i>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
          placeholder="your@label.com" required aria-label="Work email"
          style={{ border: "none", outline: "none", background: "transparent",
            fontSize: 15, width: "100%", color: "var(--text-strong)", fontFamily: "var(--font-sans)" }} />
      </div>
      <button className="btn btn-primary" type="submit" disabled={state === "loading"}>
        {state === "loading"
          ? <><i data-lucide="loader-circle" style={{ fontSize: 16 }}></i> Sending…</>
          : <>Verify my email <span aria-hidden>→</span></>}
      </button>
    </form>
  );
}

/* ------------------------------------------------- Juggling Display */
function JugglingDisplay() {
  const size = 52;
  const d    = size * 1.4;
  const h    = size * 2.2;
  const dip  = size * 0.4;
  const dur  = 1.8;
  const W    = Math.round(d * 2 + size);
  const H    = Math.round(h + dip + size);

  const R  = `translate(${d}px, 0px)`;
  const L  = `translate(${-d}px, 0px)`;
  const T  = `translate(0px, ${-h}px)`;
  const BR = `translate(${d  * 0.45}px, ${dip}px)`;
  const BL = `translate(${-d * 0.45}px, ${dip}px)`;

  const kf = `
    @keyframes jo-cascade-lg {
      0%   { transform:${R}; animation-timing-function:linear; }
      20%  { transform:${R}; animation-timing-function:cubic-bezier(0.2,0,0.4,1); }
      45%  { transform:${T}; animation-timing-function:cubic-bezier(0.6,0,0.8,1); }
      68%  { transform:${L}; animation-timing-function:linear; }
      73%  { transform:${L}; animation-timing-function:ease-in-out; }
      80%  { transform:${BL}; animation-timing-function:ease-in-out; }
      90%  { transform:${BR}; animation-timing-function:ease-in-out; }
      100% { transform:${R}; }
    }
  `;

  const dots = [
    { bg: "hsl(18 95% 54%)",  border: "hsl(0 0% 8%)",  delay: 0 },
    { bg: "hsl(0 0% 8%)",     border: undefined,         delay: -(dur / 3) },
    { bg: "hsl(0 0% 100%)",   border: "hsl(0 0% 8%)",   delay: -(dur * 2 / 3) },
  ];

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
      aspectRatio: "3/4", border: "var(--border)", boxShadow: "var(--shadow-brutal-lg)",
      background: "var(--jo-paper-sunk)" }}>
      <style>{kf}</style>
      <span style={{ position: "relative", display: "inline-block", width: W, height: H }}>
        {dots.map((dot, i) => (
          <span key={i} style={{
            position: "absolute",
            top: h + size / 2,
            left: d + size / 2,
            width: size, height: size,
            marginTop: -size / 2, marginLeft: -size / 2,
            borderRadius: "50%",
            background: dot.bg,
            border: dot.border ? `2px solid ${dot.border}` : undefined,
            boxShadow: "3px 3px 0 0 hsl(0 0% 8%)",
            animation: `jo-cascade-lg ${dur}s infinite`,
            animationDelay: `${dot.delay}s`,
          }} />
        ))}
      </span>
    </div>
  );
}

/* ------------------------------------------------- Name Story */
function NameStory() {
  return (
    <section style={{ padding: "88px 0", background: "var(--jo-paper-sunk)" }}>
      <div className="container grid-name">
        {/* left — copy */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <span className="tag paper">What's with the name?</span>
          <h2 style={{ fontSize: "clamp(2.25rem, 4vw, 3.5rem)" }}>
            No explanation.<br />
            <span style={{ background: "var(--jo-orange)", color: "var(--text-on-orange)",
              padding: "0 10px", border: "var(--border)", boxShadow: "var(--shadow-brutal-sm)",
              display: "inline-block" }}>Seriously.</span>
          </h2>
          <p style={{ fontSize: "var(--size-lead)", color: "var(--text-muted)", maxWidth: "38ch", lineHeight: 1.6, margin: 0 }}>
            Music industry back office tasks are like juggling…nah, screw that. Our founder
            once juggled oranges for two hours straight on a hike for no reason. So there you
            go, we have no explanation for the name other than that.
          </p>
          <div className="card" style={{ padding: "16px 20px", maxWidth: 380, display: "flex", alignItems: "center", gap: 14, marginTop: 10 }}>
            <span style={{ height: 44, width: 44, background: "var(--jo-ink)", border: "var(--border)",
              boxShadow: "var(--shadow-brutal-sm)", display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--jo-orange)", fontSize: 20, flexShrink: 0 }}>
              <i data-lucide="timer"></i>
            </span>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1 }}>2 hours.</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 5 }}>Duration of the juggling. On a hike.</div>
            </div>
          </div>
        </div>
        {/* right — juggling balls illustration */}
        <JugglingDisplay />
      </div>
    </section>
  );
}

/* ------------------------------------------------- Contact + Footer */
function ContactForm() {
  const [fields, setFields] = useState({ name: "", email: "", message: "" });
  const [state, setState] = useState("idle"); // idle | loading | sent
  const set = (k, v) => setFields((f) => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    setState("loading");
    setTimeout(() => setState("sent"), 1400);
  };
  const rows = [
    ["mail", "hello@juggling-oranges.com"],
    ["phone", "Buy us a drink first."],
    ["map-pin", "Toronto, ON"],
  ];
  return (
    <section id="contact" style={{ padding: "88px 0" }}>
      <div className="container grid-split">
        {/* left */}
        <div>
          <span className="tag">Get in touch</span>
          <h2 style={{ fontSize: "clamp(2.25rem, 4vw, 3.25rem)", margin: "18px 0" }}>Let's talk about your stack.</h2>
          <p style={{ color: "var(--text-muted)", lineHeight: 1.6, maxWidth: "36ch" }}>
            Tell us what you're working with. We review every request personally and come back within one business day.
          </p>
          <div className="card" style={{ padding: 0, marginTop: 28 }}>
            {rows.map(([icon, val, note], i) => (
              <div key={val} style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 20px",
                borderTop: i ? "var(--border)" : "none" }}>
                <i data-lucide={icon} style={{ fontSize: 18, color: "var(--jo-orange)", flexShrink: 0 }}></i>
                <div>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>{val}</span>
                  {note && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", marginTop: 3 }}>{note}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* right — form */}
        <div className="card" style={{ padding: 30 }}>
          {state === "sent" ? (
            <div style={{ display: "flex", flexDirection: "column", gap: 14, padding: "24px 0" }}>
              <span style={{ height: 56, width: 56, background: "var(--jo-orange)", border: "var(--border)",
                boxShadow: "var(--shadow-brutal-sm)", display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--text-on-orange)", fontSize: 28 }}><i data-lucide="check"></i></span>
              <h3 style={{ fontSize: 26 }}>Got it.</h3>
              <p style={{ color: "var(--text-muted)", margin: 0 }}>
                We review requests manually — expect a reply within one business day.
              </p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <ContactField label="Your name" value={fields.name} onChange={(v) => set("name", v)} placeholder="The name on your royalty checks" />
              <ContactField label="Work email" type="email" value={fields.email} onChange={(v) => set("email", v)} placeholder="The one you actually check" />
              <ContactField label="What are you working on?" value={fields.message} onChange={(v) => set("message", v)}
                placeholder="Tell us about your stack — DSPs, distributor, PRO…" textarea />
              <button type="submit" className="btn btn-primary" disabled={state === "loading"}
                style={{ justifyContent: "center", marginTop: 4 }}>
                {state === "loading"
                  ? <><i data-lucide="loader-circle" style={{ fontSize: 16 }}></i> Sending…</>
                  : <>Submit <span aria-hidden>→</span></>}
              </button>
              <p className="mono" style={{ fontSize: 11, color: "var(--text-muted)", margin: 0 }}>
                We review every request personally. Not instant — but thorough. We'll never use your email for marketing.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactField({ label, value, onChange, textarea, type = "text", placeholder }) {
  const [focus, setFocus] = useState(false);
  const shared = {
    width: "100%", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontSize: 15,
    color: "var(--text-strong)", background: "var(--surface-card)", border: "var(--border)",
    borderColor: focus ? "var(--jo-orange)" : "var(--jo-ink)", borderRadius: "var(--radius)",
    boxShadow: focus ? "var(--shadow-brutal-orange)" : "var(--shadow-brutal-sm)",
    padding: "11px 13px", outline: "none",
    transition: "border-color var(--dur) ease, box-shadow var(--dur) ease",
  };
  return (
    <label style={{ display: "block" }}>
      <span className="mono" style={{ display: "block", fontSize: 11, color: "var(--text-muted)", marginBottom: 7 }}>{label}</span>
      {textarea
        ? <textarea rows={3} value={value} placeholder={placeholder}
            onChange={(e) => onChange(e.target.value)}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
            style={{ ...shared, resize: "vertical" }} />
        : <input type={type} value={value} placeholder={placeholder}
            onChange={(e) => onChange(e.target.value)}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
            style={shared} />}
    </label>
  );
}

function Footer() {
  return (
    <>
      <footer style={{ background: "var(--jo-ink)", color: "var(--text-on-ink)", padding: "40px 0" }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div className="mono" style={{ fontSize: 13 }}>© Juggling Oranges. Free tools, honest math.</div>
          <a href="#top" className="mono" style={{ fontSize: 12, opacity: 0.6 }}>Back to top →</a>
        </div>
      </footer>
    </>
  );
}

/* ----------------------------------------------------------- App */
function ToolsApp() {
  const [cat, setCat] = useState("All");

  useEffect(() => { const id = setTimeout(() => window.lucide && window.lucide.createIcons(), 0); return () => clearTimeout(id); });

  const onLaunch = (name, cat) => {
    const target = (cat === "AI" || name === "__request__") ? "contact" : "toolbox";
    const el = document.getElementById(target);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Toolbox cat={cat} setCat={setCat} onLaunch={onLaunch} />
      <WhyFree />
      <NameStory />
      <Marquee words={["Free forever", "No card required", "Real humans", "One business day", "Honest math"]} />
      <ContactForm />
      <Footer />
    </>
  );
}

window.ToolsApp = ToolsApp;