const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

/* ─────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────── */
function Nav({ route, setRoute }) {
  const [scrolled, setScrolled] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const goTo = (hash) => (e) => {
    e.preventDefault();
    if (route !== "home") {
      setRoute("home");
      setTimeout(() => document.getElementById(hash)?.scrollIntoView({ behavior: "smooth" }), 80);
    } else {
      document.getElementById(hash)?.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(240,232,214,0.94)" : "transparent",
      backdropFilter: scrolled ? "saturate(1.1) blur(8px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(1.1) blur(8px)" : "none",
      borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
      transition: "all .25s ease",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "18px 40px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
        <button onClick={() => { setRoute("home"); window.scrollTo({ top: 0, behavior: "smooth" }); }}
                style={{ background: "none", border: "none", padding: 0, cursor: "pointer" }}>
          <Wordmark size={20}/>
        </button>
        <nav style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
          {[
            { label: "What we make", hash: "fruit" },
            { label: "Who it's for", hash: "for" },
            { label: "Pricing", hash: "orchard" },
            { label: "How it works", hash: "how" },
            { label: "FAQ", hash: "faq" },
          ].map(item => (
            <a key={item.hash} href={`#${item.hash}`} onClick={goTo(item.hash)}
               style={{ textDecoration: "none", color: "var(--ink-2)", fontSize: 14 }}
               onMouseEnter={e => e.currentTarget.style.color = "var(--sun-deep)"}
               onMouseLeave={e => e.currentTarget.style.color = "var(--ink-2)"}>
              {item.label}
            </a>
          ))}
          <Button onClick={() => setRoute("signup")} style={{ padding: "10px 18px", fontSize: 14 }}>Start for $12 →</Button>
        </nav>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────── */
function Hero({ setRoute }) {
  return (
    <section style={{ padding: "40px 40px 80px", maxWidth: 1320, margin: "0 auto" }}>
      <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 60, alignItems: "center", minHeight: "78vh" }}>
        <div>
          <Reveal>
            <Eyebrow>For nonprofits, clubs &amp; community teams · $12 / month, flat</Eyebrow>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{
              fontSize: "clamp(46px, 6vw, 86px)", lineHeight: 0.98,
              letterSpacing: "-0.025em", fontWeight: 400, maxWidth: 720,
            }}>
              Your <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>virtual design team</span> for events, outreach &amp; fundraising.
            </h1>
          </Reveal>
          <Reveal delay={180}>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 580, marginTop: 32, marginBottom: 36 }}>
              Email us what you need — a flyer, a brochure, a website, a donor letter — and we deliver finished, polished materials, usually within 24 hours. <span style={{ color: "var(--ink)", fontWeight: 500 }}>No software to learn. $12 per month, all assistants included.</span>
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
              <Button onClick={() => setRoute("signup")}>Subscribe — $12 / month <span>→</span></Button>
              <a href="#fruit" onClick={(e) => { e.preventDefault(); document.getElementById("fruit")?.scrollIntoView({ behavior: "smooth" }); }}
                 style={{ fontSize: 14, color: "var(--bark)", textDecoration: "none", borderBottom: "1px solid var(--rule-2)", paddingBottom: 2 }}>
                See what we make →
              </a>
              <a href="mailto:hello@serviceorchard.com"
                 style={{ fontSize: 14, color: "var(--ink-3)", textDecoration: "none" }}>
                or just email us
              </a>
            </div>
          </Reveal>
          <Reveal delay={360}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 36, marginTop: 56, paddingTop: 28, borderTop: "1px solid var(--rule)" }}>
              {[["$12", "Flat / per month"], ["< 24h", "Average turnaround"], ["12+", "Kinds of materials"]].map(([v, k]) => (
                <div key={k}>
                  <div style={{ fontFamily: "'Newsreader', serif", fontSize: 32, color: "var(--bark)", letterSpacing: "-0.02em" }}>{v}</div>
                  <div className="mono" style={{ color: "var(--ink-3)", marginTop: 4 }}>{k}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal delay={300}>
          <div style={{ width: "100%", maxWidth: 720, marginLeft: "auto" }}>
            <HeroTree/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   PAIN POINTS
   ───────────────────────────────────────────────────────── */
function PainPoints() {
  const items = [
    { k: "You wear too many hats.", v: "Volunteers and staff juggle program work, fundraising, and outreach — and somewhere in there, design materials need to go out by Friday." },
    { k: "Pro design is out of reach.", v: "Freelance designers run $400–$1,500 per project. Agencies start at thousands a month. Neither fits a small budget." },
    { k: "DIY tools eat a whole afternoon.", v: "Canva and the rest can produce something — eventually — but every flyer is hours you don't have, and the result still looks like everyone else's." },
  ];
  return (
    <section style={{ padding: "100px 40px 0", maxWidth: 1280, margin: "0 auto", borderTop: "1px solid var(--rule)" }}>
      <Reveal><Eyebrow>Why teams come to us</Eyebrow></Reveal>
      <Reveal delay={60}>
        <h2 style={{ fontSize: "clamp(36px, 4.4vw, 60px)", lineHeight: 1.05, letterSpacing: "-0.02em", maxWidth: 920, marginBottom: 60 }}>
          Small teams need <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>professional materials</span> — without the price tag or the weekend lost to layout.
        </h2>
      </Reveal>
      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--bark)" }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 80}>
            <div style={{
              padding: "32px 28px 36px",
              borderRight: i < 2 ? "1px solid var(--rule)" : "none",
              borderBottom: "1px solid var(--rule)",
              minHeight: 220,
            }}>
              <div className="mono" style={{ color: "var(--sun-deep)", marginBottom: 16 }}>{String(i+1).padStart(2,"0")}</div>
              <h3 style={{ fontSize: 22, letterSpacing: "-0.01em", marginBottom: 12, lineHeight: 1.15 }}>{it.k}</h3>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55 }}>{it.v}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   WHAT WE MAKE
   ───────────────────────────────────────────────────────── */
const SERVICE_GROUPS = [
  {
    name: "Event essentials",
    desc: "Everything you need to fill a room, sell tickets, or rally volunteers.",
    items: [
      { name: "Event flyers",    desc: "Print-ready flyers for fundraisers, classes, and gatherings." },
      { name: "Invitations",     desc: "Formal or informal — with RSVP details and your branding." },
      { name: "Event programs",  desc: "Programs and inserts for galas, ceremonies, and meetings." },
      { name: "Menus",           desc: "Restaurant, catering, and event menus designed to serve." },
    ],
  },
  {
    name: "Outreach &amp; fundraising",
    desc: "Materials that ask, thank, and tell your story.",
    items: [
      { name: "Donor letters",   desc: "Appeals, thank-yous, and formal correspondence." },
      { name: "Postcards",       desc: "Mailable postcards for outreach and announcements." },
      { name: "Brochures",       desc: "Tri-fold and bi-fold brochures from your raw notes." },
      { name: "Sponsorship packets", desc: "Pitch decks and sponsorship one-pagers, ready to send." },
    ],
  },
  {
    name: "Digital presence",
    desc: "Show up online without hiring a developer.",
    items: [
      { name: "Websites",        desc: "Whole-site builds — landing pages to multi-page sites." },
      { name: "Social posts",    desc: "Matched post sets across Instagram, Facebook, and LinkedIn." },
      { name: "Email updates",   desc: "Newsletters and announcements, written and laid out." },
      { name: "Blog posts",      desc: "Drafted, edited, and ready to publish on your site." },
    ],
  },
  {
    name: "Research &amp; briefs",
    desc: "Make sense of information so you can make decisions.",
    items: [
      { name: "Grant briefs",    desc: "Grant opportunity research and summaries, cited." },
      { name: "Donor briefings", desc: "Structured briefings for board meetings and donor calls." },
      { name: "Data summaries",  desc: "Survey, intake, and program-data summaries with charts." },
    ],
  },
];

function WhatWeMake() {
  return (
    <section id="fruit" style={{ padding: "100px 40px 120px", maxWidth: 1320, margin: "0 auto" }}>
      <Reveal><Eyebrow>§ 01 — What we make</Eyebrow></Reveal>
      <Reveal delay={60}>
        <div className="split-2" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "end", marginBottom: 56 }}>
          <h2 style={{ fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.02em", maxWidth: 780 }}>
            A complete set of materials, <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>tuned to event-driven work.</span>
          </h2>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 440 }}>
            Email any request to your dedicated inbox. An assistant gets to work and returns a finished file — usually within a day, with revisions on request.
          </p>
        </div>
      </Reveal>

      {SERVICE_GROUPS.map((g, gi) => (
        <Reveal key={g.name} delay={gi * 60}>
          <div style={{ marginBottom: 56 }}>
            <div className="group-head" style={{ display: "grid", gridTemplateColumns: "1fr 2.2fr", gap: 40, alignItems: "baseline", paddingBottom: 14, marginBottom: 24, borderBottom: "1px solid var(--bark)" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                <span className="mono" style={{ color: "var(--sun-deep)" }}>{String(gi+1).padStart(2,"0")}</span>
                <h3 style={{ fontSize: 28, letterSpacing: "-0.015em" }} dangerouslySetInnerHTML={{ __html: g.name }}/>
              </div>
              <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, fontStyle: "italic", fontFamily: "'Newsreader', serif" }}>{g.desc}</p>
            </div>
            <div className="fruit-grid" style={{ display: "grid", gridTemplateColumns: `repeat(${g.items.length}, 1fr)`, gap: 0, borderLeft: "1px solid var(--rule)", borderTop: "1px solid var(--rule)" }}>
              {g.items.map((s) => <FruitCard key={s.name} {...s}/>)}
            </div>
          </div>
        </Reveal>
      ))}

      <Reveal>
        <p style={{ fontSize: 15, color: "var(--ink-3)", fontStyle: "italic", fontFamily: "'Newsreader', serif", marginTop: 16 }}>
          ↳ Don't see what you need? Just ask. We add new kinds of work as subscribers request them.
        </p>
      </Reveal>
    </section>
  );
}

function FruitCard({ name, desc }) {
  const [hover, setHover] = useStateH(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: "26px 22px 28px",
        borderRight: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
        background: hover ? "var(--paper)" : "transparent",
        minHeight: 200,
        display: "flex", flexDirection: "column",
        transition: "background .2s ease",
      }}>
      <div style={{ marginBottom: 16, height: 36 }}>
        <svg width="34" height="42" viewBox="0 0 36 44" aria-hidden style={{ transform: hover ? "translateY(-2px) rotate(-4deg)" : "none", transition: "transform .25s ease" }}>
          <path d="M18 4 Q 14 8 16 12" stroke="var(--bark)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
          <path d="M18 5 Q 24 3 26 7 Q 22 9 18 7 Z" fill="var(--moss)"/>
          <circle cx="18" cy="26" r="13" fill="var(--sun)"/>
          <ellipse cx="14" cy="20" rx="2.5" ry="3.5" fill="rgba(255,255,255,0.45)"/>
          <circle cx="18" cy="26" r="13" fill="none" stroke="var(--bark)" strokeWidth="0.5" strokeDasharray="1 2.5" opacity="0.5"/>
        </svg>
      </div>
      <h4 style={{ fontSize: 20, lineHeight: 1.1, letterSpacing: "-0.01em", marginBottom: 10 }}>{name}</h4>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>{desc}</p>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   WHO IT'S FOR
   ───────────────────────────────────────────────────────── */
function WhoItsFor() {
  const groups = [
    "Community centers", "Parent–teacher associations", "Volunteer committees",
    "Local clubs &amp; chapters", "Booster organizations", "Neighborhood associations",
    "Small charities &amp; nonprofits", "Faith-based programs", "Mutual-aid groups",
    "Civic &amp; municipal programs", "Mission-driven startups", "Arts &amp; culture collectives",
  ];
  return (
    <section id="for" style={{ padding: "100px 40px", maxWidth: 1280, margin: "0 auto", borderTop: "1px solid var(--rule)" }}>
      <Reveal><Eyebrow>§ 02 — Who it's for</Eyebrow></Reveal>
      <Reveal delay={60}>
        <div className="split-2" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 80, alignItems: "end", marginBottom: 56 }}>
          <h2 style={{ fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.02em", maxWidth: 780 }}>
            Built for small teams doing <span className="serif-italic" style={{ color: "var(--moss)" }}>real work in their community.</span>
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 460 }}>
            If your team has fewer than ~15 staff, an annual budget under ~$2M, and no in-house design or marketing, you're exactly who we built this for.
          </p>
        </div>
      </Reveal>
      <Reveal delay={120}>
        <div className="who-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--bark)", borderLeft: "1px solid var(--rule)" }}>
          {groups.map((g, i) => (
            <div key={i} style={{
              padding: "20px 18px",
              borderRight: "1px solid var(--rule)",
              borderBottom: "1px solid var(--rule)",
              fontSize: 15, color: "var(--ink-2)",
              display: "flex", alignItems: "center", gap: 10,
            }}>
              <Leaf size={14} rotate={i * 25} color={i % 2 ? "var(--moss-2)" : "var(--moss)"}/>
              <span dangerouslySetInnerHTML={{ __html: g }}/>
            </div>
          ))}
        </div>
      </Reveal>
      <Reveal delay={240}>
        <p style={{ marginTop: 32, fontSize: 15, lineHeight: 1.6, color: "var(--ink-3)", maxWidth: 720, fontStyle: "italic", fontFamily: "'Newsreader', serif" }}>
          Not sure if you qualify? Email us and ask. We review every team personally.
        </p>
      </Reveal>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   SAVINGS
   ───────────────────────────────────────────────────────── */
function Savings() {
  const rows = [
    { label: "One event flyer",        diy: "$0 + 4 hrs of staff time",  free: "$400 – $900",   so: "Included" },
    { label: "Tri-fold brochure",      diy: "$0 + 6 hrs of staff time",  free: "$600 – $1,500", so: "Included" },
    { label: "Donor letter (drafted)", diy: "$0 + 3 hrs",                free: "$200 – $600",   so: "Included" },
    { label: "Simple website (5 pp)",  diy: "Not realistic",             free: "$2,000 – $8,000", so: "Included" },
    { label: "Monthly cost",           diy: "Burnout",                   free: "Project-by-project", so: "$12 flat" },
  ];
  return (
    <section style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "100px 40px" }}>
        <Reveal><Eyebrow>The numbers</Eyebrow></Reveal>
        <Reveal delay={60}>
          <h2 style={{ fontSize: "clamp(36px, 4.4vw, 60px)", lineHeight: 1.05, letterSpacing: "-0.02em", maxWidth: 880, marginBottom: 56 }}>
            Spend less time designing. <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>Spend more time on your mission.</span>
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 15, minWidth: 720 }}>
              <thead>
                <tr style={{ borderTop: "1px solid var(--bark)", borderBottom: "1px solid var(--bark)" }}>
                  <th style={th()}>Material</th>
                  <th style={th()}>DIY (Canva &amp; staff)</th>
                  <th style={th()}>Freelance designer</th>
                  <th style={{ ...th(), color: "var(--sun-deep)", background: "var(--cream)" }}>Service Orchard</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r, i) => (
                  <tr key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
                    <td style={td({ fontWeight: 500 })}>{r.label}</td>
                    <td style={td({ color: "var(--ink-3)" })}>{r.diy}</td>
                    <td style={td({ color: "var(--ink-3)" })}>{r.free}</td>
                    <td style={td({ color: "var(--bark)", fontWeight: 500, background: "var(--cream)" })}>{r.so}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ marginTop: 28, fontSize: 14, color: "var(--ink-3)", fontStyle: "italic", fontFamily: "'Newsreader', serif", maxWidth: 720 }}>
            Industry rate ranges based on typical small-market freelance design pricing. Subscription includes unlimited requests across every assistant — Designer, Writer, Builder, Social, Researcher — for one flat monthly rate.
          </p>
        </Reveal>
      </div>
    </section>
  );
}
function th() {
  return { textAlign: "left", padding: "16px 20px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-2)", fontWeight: 500 };
}
function td(extra = {}) {
  return { padding: "18px 20px", color: "var(--ink-2)", verticalAlign: "top", ...extra };
}

/* ─────────────────────────────────────────────────────────
   PRICING
   ───────────────────────────────────────────────────────── */
function TheOrchard() {
  return (
    <section id="orchard" style={{ background: "var(--bark)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(240,232,214,0.04) 1px, transparent 1px)",
        backgroundSize: "20px 20px", pointerEvents: "none",
      }}/>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "120px 40px", position: "relative" }}>
        <Reveal><Eyebrow color="rgba(240,232,214,0.55)">§ 03 — Simple pricing</Eyebrow></Reveal>
        <Reveal delay={60}>
          <h2 style={{ color: "var(--cream)", fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.02em", maxWidth: 1000, marginBottom: 24 }}>
            <span className="serif-italic" style={{ color: "var(--sun)" }}>Twelve dollars</span> per month. All assistants included.
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: "rgba(240,232,214,0.78)", maxWidth: 640, marginBottom: 56 }}>
            One subscription, five specialists — Designer, Writer, Builder, Social, Researcher. Send a request to any of them, as often as you like. No setup fees, no per-deliverable charges, no quantity math.
          </p>
        </Reveal>

        <Reveal delay={140}>
          <div className="price-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 60, alignItems: "center" }}>
            <PriceCard/>
            <Flywheel/>
          </div>
        </Reveal>

        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 96, paddingTop: 56, borderTop: "1px solid rgba(240,232,214,0.18)" }}>
          {[
            { k: "30-day money-back", v: "Try it for a full month. If it's not a fit, ask for your money back any time in the first 30 days — no forms, no questions, no fight." },
            { k: "Unlimited requests", v: "Email your inbox as often as you like. Every assistant works through your queue, usually within 24 hours." },
            { k: "Cancel anytime",   v: "Month-to-month. Cancel any time your needs change. No annual lock-in, no hoops." },
          ].map((b, i) => (
            <div key={i}>
              <div className="mono" style={{ color: "var(--sun)", marginBottom: 12 }}>{b.k}</div>
              <p style={{ color: "rgba(240,232,214,0.85)", fontSize: 15.5, lineHeight: 1.6, margin: 0 }}>{b.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PriceCard() {
  const assistants = [
    "Designer — flyers, brochures, postcards, menus",
    "Writer — letters, blog posts, invitations",
    "Builder — websites and landing pages",
    "Social — multi-platform post sets",
    "Researcher — briefs, data summaries, donor research",
  ];
  return (
    <div style={{ background: "var(--cream)", color: "var(--ink)", padding: "40px 36px", position: "relative", boxShadow: "0 24px 60px -24px rgba(0,0,0,0.4)" }}>
      <div style={{ position: "absolute", top: -16, right: 24 }}>
        <svg width="44" height="56" viewBox="0 0 44 56">
          <path d="M22 4 Q 17 9 19 14" stroke="var(--bark)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
          <path d="M22 6 Q 30 4 33 9 Q 27 12 22 9 Z" fill="var(--moss)"/>
          <circle cx="22" cy="32" r="16" fill="var(--sun)"/>
          <ellipse cx="17" cy="25" rx="3" ry="4" fill="rgba(255,255,255,0.45)"/>
          <circle cx="22" cy="32" r="16" fill="none" stroke="var(--bark)" strokeWidth="0.6" strokeDasharray="1 2.5" opacity="0.5"/>
        </svg>
      </div>
      <div className="mono" style={{ color: "var(--sun-deep)", marginBottom: 12 }}>Flat, per month</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8 }}>
        <span style={{ fontFamily: "'Newsreader', serif", fontSize: 24, color: "var(--ink-2)" }}>$</span>
        <span style={{ fontFamily: "'Newsreader', serif", fontSize: 96, lineHeight: 0.9, letterSpacing: "-0.04em", color: "var(--bark)" }}>12</span>
        <span className="serif-italic" style={{ color: "var(--ink-3)", fontSize: 18, marginLeft: 4 }}>/ month</span>
      </div>
      <div style={{ display: "inline-block", background: "var(--sun)", color: "var(--bark)", padding: "4px 10px", fontSize: 12, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 20 }}>
        30-day money-back
      </div>
      <div style={{ borderTop: "1px solid var(--rule)", paddingTop: 20, marginBottom: 24 }}>
        <div className="mono" style={{ color: "var(--ink-3)", marginBottom: 12 }}>What's included</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {assistants.map((a, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 10, padding: "8px 0", fontSize: 14, color: "var(--ink-2)" }}>
              <svg width="14" height="14" viewBox="0 0 14 14" style={{ marginTop: 4 }}>
                <circle cx="7" cy="7" r="5" fill="var(--sun)"/>
                <circle cx="7" cy="7" r="5" fill="none" stroke="var(--bark)" strokeWidth="0.5" strokeDasharray="1 1.5"/>
              </svg>
              <span>{a}</span>
            </li>
          ))}
        </ul>
      </div>
      <p style={{ fontSize: 13, color: "var(--ink-3)", fontFamily: "'Newsreader', serif", fontStyle: "italic", margin: 0 }}>
        Send any kind of request. We sort out which assistant should answer.
      </p>
    </div>
  );
}

function Flywheel() {
  const nodes = [
    { angle: -90, label: "Request",    sub: "EMAIL US",            pos: "top" },
    { angle: 0,   label: "Receive",    sub: "WITHIN 24 HOURS",     pos: "right" },
    { angle: 90,  label: "Refine",     sub: "REVISIONS WELCOME",   pos: "bottom" },
    { angle: 180, label: "Choose",     sub: "PICK YOUR ASSISTANTS", pos: "left" },
  ];
  const cx = 250, cy = 250, R = 165;
  return (
    <div style={{ position: "relative", aspectRatio: "1/1", maxWidth: 500, marginLeft: "auto" }}>
      <svg viewBox="0 0 500 500" width="100%" height="100%" aria-hidden style={{ overflow: "visible" }}>
        {[180, 150, 120, 90, 60].map((r, i) => (
          <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke="rgba(240,232,214,0.15)" strokeWidth="1"
                  strokeDasharray={i % 2 === 0 ? "none" : "2 4"}/>
        ))}
        <circle cx={cx} cy={cy} r="36" fill="var(--moss)"/>
        <circle cx={cx} cy={cy} r="36" fill="none" stroke="var(--sun)" strokeWidth="1" strokeDasharray="2 3"/>
        <text x={cx} y={cy - 4} textAnchor="middle" style={{ fontFamily: "'Newsreader', serif", fontSize: 16, fill: "var(--cream)", fontStyle: "italic" }}>How</text>
        <text x={cx} y={cy + 14} textAnchor="middle" style={{ fontFamily: "'Newsreader', serif", fontSize: 14, fill: "var(--sun)" }}>it works</text>

        {nodes.map((n, i) => {
          const rad = n.angle * Math.PI / 180;
          const nx = cx + R * Math.cos(rad);
          const ny = cy + R * Math.sin(rad);
          return (
            <g key={`n-${i}`}>
              <line x1={cx + 38 * Math.cos(rad)} y1={cy + 38 * Math.sin(rad)}
                    x2={nx - 14 * Math.cos(rad)} y2={ny - 14 * Math.sin(rad)}
                    stroke="var(--sun)" strokeWidth="0.8" strokeDasharray="2 3" opacity="0.6"/>
              <circle cx={nx} cy={ny} r="11" fill="var(--bark)" stroke="var(--sun)" strokeWidth="1.5"/>
              <circle cx={nx} cy={ny} r="4" fill="var(--sun)"/>
            </g>
          );
        })}

        {nodes.map((n, i) => {
          const rad = n.angle * Math.PI / 180;
          const nx = cx + R * Math.cos(rad);
          const ny = cy + R * Math.sin(rad);
          let tx = nx, ty = ny, anchor = "middle";
          if (n.pos === "left")  { anchor = "end";    tx = nx - 18; ty = ny; }
          if (n.pos === "right") { anchor = "start";  tx = nx + 18; ty = ny; }
          if (n.pos === "top")   { anchor = "middle"; tx = nx; ty = ny - 22; }
          if (n.pos === "bottom"){ anchor = "middle"; tx = nx; ty = ny + 30; }
          return (
            <g key={`l-${i}`}>
              <text x={tx} y={ty} textAnchor={anchor}
                    style={{ fontFamily: "'Newsreader', serif", fontSize: 17, fill: "var(--cream)", letterSpacing: "-0.005em" }}>
                {n.label}
              </text>
              <text x={tx} y={ty + 14} textAnchor={anchor}
                    style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, fill: "rgba(240,232,214,0.6)", letterSpacing: "0.08em" }}>
                {n.sub}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────────────────── */
function HowItWorks({ setRoute }) {
  const steps = [
    { n: "01", title: "Subscribe", body: "Tell us about your team and pay $12. Two minutes. Full refund anytime in the first 30 days if it isn't working." },
    { n: "02", title: "Request", body: "Email your dedicated inbox in plain language. \"We need a flyer for Saturday's gala.\" That's all you have to send." },
    { n: "03", title: "Receive", body: "A finished file lands in your inbox, usually within a day. Reply with revisions; we keep refining until it's right." },
  ];
  return (
    <section id="how" style={{ padding: "120px 40px", maxWidth: 1280, margin: "0 auto", borderTop: "1px solid var(--rule)" }}>
      <Reveal><Eyebrow>§ 04 — How it works</Eyebrow></Reveal>
      <Reveal delay={60}>
        <div className="split-2" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "end", marginBottom: 56 }}>
          <h2 style={{ fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.02em", maxWidth: 720 }}>
            Three steps. <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>No software to learn.</span>
          </h2>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 420 }}>
            No dashboard, no template library, no app to install. Just an email inbox and honest work.
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ position: "relative", height: 80, marginBottom: 24 }}>
          <svg viewBox="0 0 1200 80" width="100%" height="80" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
            <path d="M 60 60 Q 300 20, 600 50 Q 900 80, 1140 50"
                  stroke="var(--bark)" strokeWidth="2" fill="none" strokeLinecap="round"/>
          </svg>
          {[200, 600, 1000].map((cx, i) => (
            <div key={i} style={{ position: "absolute", left: `${(cx / 1200) * 100}%`, top: 24, transform: "translateX(-50%)" }}>
              <svg width="40" height="48" viewBox="0 0 40 48">
                <path d="M20 4 Q 16 8 18 12" stroke="var(--bark)" strokeWidth="1.5" fill="none"/>
                <circle cx="20" cy="28" r="14" fill="var(--sun)"/>
                <circle cx="20" cy="28" r="14" fill="none" stroke="var(--bark)" strokeWidth="0.5" strokeDasharray="1 2"/>
                <text x="20" y="32" textAnchor="middle" style={{ fontFamily: "'Newsreader', serif", fontSize: 14, fill: "var(--bark)", fontWeight: 500 }}>{i+1}</text>
              </svg>
            </div>
          ))}
        </div>
      </Reveal>

      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--bark)" }}>
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 100}>
            <div style={{ padding: "32px 28px 36px", borderRight: i < 2 ? "1px solid var(--rule)" : "none", minHeight: 220 }}>
              <div className="mono" style={{ color: "var(--sun-deep)", marginBottom: 16 }}>STEP {s.n}</div>
              <h3 style={{ fontSize: 22, letterSpacing: "-0.01em", marginBottom: 12 }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6 }}>{s.body}</p>
            </div>
          </Reveal>
        ))}
      </div>

      <div style={{ marginTop: 48, display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
        <Button onClick={() => setRoute("signup")}>Subscribe — $12 / month →</Button>
        <a href="mailto:hello@serviceorchard.com"
           style={{ fontSize: 14, color: "var(--ink-2)", textDecoration: "none", borderBottom: "1px solid var(--rule-2)", paddingBottom: 2 }}>
          or just email us
        </a>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────── */
function FAQ() {
  const items = [
    { q: "Who is actually creating my materials?",
      a: "A small team of designers and writers, working alongside AI tools. Real people review every deliverable before it goes out. The AI does the heavy lifting; humans guide the work and make sure it's something you'd be proud to send." },
    { q: "Do I need to know anything about AI?",
      a: "No. You email a request in plain English — \"we need a flyer for Saturday\" — and a finished file comes back. There's no software, no prompt-writing, no jargon. The technology is our problem; the result is yours." },
    { q: "How secure is my information?",
      a: "Your work and data stay yours. We don't sell, share, or train public models on what you send us. We share examples of our work only with explicit written permission, and you can ask us to delete your archive at any time." },
    { q: "What if I'm not satisfied with a deliverable?",
      a: "Reply to the email with what's off. We revise as many times as needed at no extra cost. If something genuinely isn't working, ask for your money back any time in the first 30 days — no questions, no forms. After that, you can cancel any month with a single email." },
    { q: "How long does each request take?",
      a: "Most deliverables come back within 24 hours. Larger projects — a multi-page website, a research brief — can take 2 to 5 business days. We tell you up front when something will need more time." },
    { q: "Can we use the work commercially?",
      a: "Yes. Everything we deliver is yours, free and clear, to use however your organization needs — print, web, public, fundraising, anywhere." },
    { q: "Why is this so much cheaper than hiring a freelancer?",
      a: "Because we use AI to do the parts of design and writing that don't need a human's judgment, and reserve human time for the parts that do. That makes the whole thing faster and cheaper without making it worse." },
    { q: "Is anyone turned away?",
      a: "Anyone can sign up. We're deliberately small, and if our queue gets long we'll be honest with you about turnaround. If we're a bad fit, our 30-day money-back means you can leave with a full refund — and we'll tell you up front if your needs are outside what we do well." },
  ];
  const [open, setOpen] = useStateH(0);
  return (
    <section id="faq" style={{ padding: "100px 40px", maxWidth: 1100, margin: "0 auto", borderTop: "1px solid var(--rule)" }}>
      <Reveal><Eyebrow>§ 05 — Common questions</Eyebrow></Reveal>
      <Reveal delay={60}>
        <h2 style={{ fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.02em", maxWidth: 820, marginBottom: 56 }}>
          Things people <span className="serif-italic" style={{ color: "var(--sun-deep)" }}>reasonably ask.</span>
        </h2>
      </Reveal>
      <div style={{ borderTop: "1px solid var(--bark)" }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: "100%", padding: "22px 0",
                  display: "grid", gridTemplateColumns: "32px 1fr 28px", gap: 20, alignItems: "center",
                  background: "none", border: "none", cursor: "pointer", textAlign: "left",
                  fontFamily: "inherit",
                }}>
                <span className="mono" style={{ color: "var(--sun-deep)" }}>{String(i+1).padStart(2,"0")}</span>
                <span style={{ fontSize: 19, fontFamily: "'Newsreader', serif", letterSpacing: "-0.01em", color: "var(--ink)" }}>{it.q}</span>
                <span style={{
                  width: 22, height: 22, borderRadius: "50%",
                  border: "1px solid var(--bark)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "var(--bark)", fontSize: 14, transition: "transform .2s ease",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                }}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 320 : 0, overflow: "hidden",
                transition: "max-height .35s ease, padding .25s ease",
                paddingLeft: 52, paddingRight: 48,
                paddingBottom: isOpen ? 24 : 0,
              }}>
                <p style={{ fontSize: 15.5, color: "var(--ink-2)", lineHeight: 1.65, margin: 0, maxWidth: 720 }}>{it.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────────────── */
function FinalCTA({ setRoute }) {
  return (
    <section style={{ background: "var(--moss)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <svg viewBox="0 0 1280 200" width="100%" height="200" preserveAspectRatio="none" style={{ position: "absolute", bottom: 0, left: 0, opacity: 0.18 }}>
        <path d="M 0 200 L 0 160 Q 100 120, 200 150 Q 300 180, 400 140 Q 500 110, 600 145 Q 700 175, 800 135 Q 900 105, 1000 150 Q 1100 180, 1280 145 L 1280 200 Z" fill="var(--bark)"/>
      </svg>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "140px 40px 120px", position: "relative" }}>
        <Reveal>
          <Eyebrow color="rgba(240,232,214,0.6)">Ready when you are</Eyebrow>
          <h2 style={{
            color: "var(--cream)",
            fontSize: "clamp(48px, 6.4vw, 100px)", lineHeight: 0.98,
            letterSpacing: "-0.03em", maxWidth: 1100, marginBottom: 32,
          }}>
            Twelve dollars. <span className="serif-italic" style={{ color: "var(--sun)" }}>See what comes back.</span>
          </h2>
          <p style={{ fontSize: 19, color: "rgba(240,232,214,0.78)", maxWidth: 580, marginBottom: 44 }}>
            Subscribe in two minutes. If we're not a fit in the first 30 days, full refund — no questions asked. Cancel any month after that with a single email.
          </p>
          <div style={{ display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
            <Button variant="primary" onClick={() => setRoute("signup")}>Start for $12 →</Button>
            <a href="mailto:hello@serviceorchard.com" style={{ color: "rgba(240,232,214,0.85)", fontSize: 14, textDecoration: "none", borderBottom: "1px solid rgba(240,232,214,0.3)", paddingBottom: 2 }}>
              hello@serviceorchard.com
            </a>
            <span style={{ color: "rgba(240,232,214,0.55)", fontSize: 14 }}>or call (210) 555-0139</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────── */
function Footer({ setRoute }) {
  return (
    <footer style={{ background: "var(--bark)", color: "rgba(240,232,214,0.75)", padding: "72px 40px 40px" }}>
      <div className="footer-grid" style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <Wordmark size={20} color="var(--cream)"/>
          <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.55, maxWidth: 280 }}>
            Affordable design, writing, and research for nonprofits, clubs, and small community teams. $12 per month — all assistants included.
          </p>
        </div>
        <FooterCol heading="The orchard" links={[
          { label: "What we make", href: "#fruit" },
          { label: "Who it's for", href: "#for" },
          { label: "Pricing", href: "#orchard" },
          { label: "How it works", href: "#how" },
          { label: "FAQ", href: "#faq" },
        ]}/>
        <FooterCol heading="Get started" links={[
          { label: "Subscribe — $12 / month", onClick: () => setRoute("signup") },
          { label: "hello@serviceorchard.com", href: "mailto:hello@serviceorchard.com" },
          { label: "(210) 555-0139", href: "tel:+12105550139" },
        ]}/>
        <FooterCol heading="Shrubnet family" links={[
          { label: "Thunderstaff ↗", href: "https://thunderstaff.com" },
          { label: "Shrubnet ↗", href: "https://shrubnet.com" },
        ]}/>
      </div>
      <div style={{ maxWidth: 1280, margin: "60px auto 0", paddingTop: 24, borderTop: "1px solid rgba(240,232,214,0.15)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "rgba(240,232,214,0.5)", flexWrap: "wrap", gap: 12 }}>
        <div>© 2026 Shrubnet LLC · Service Orchard</div>
        <div style={{ display: "flex", gap: 20 }}>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ heading, links }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--sun)", marginBottom: 20 }}>{heading}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {links.map((l, i) => (
          <li key={i}>
            {l.onClick ? (
              <button onClick={l.onClick} style={{ background: "none", border: "none", color: "rgba(240,232,214,0.85)", padding: 0, cursor: "pointer", fontSize: 14, fontFamily: "inherit", textAlign: "left" }}>{l.label}</button>
            ) : (
              <a href={l.href} style={{ color: "rgba(240,232,214,0.85)", textDecoration: "none", fontSize: 14 }}>{l.label}</a>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Nav, Hero, PainPoints, WhatWeMake, WhoItsFor, Savings, TheOrchard, HowItWorks, FAQ, FinalCTA, Footer });
