// sections.jsx — v7: cycling tasks deck, AI-can't-do, humans, no plumbing, no em dashes
const { useState: useStS, useEffect: useEffS, useRef: useRefS } = React;

function Nav() {
  const [scrolled, setScrolled] = useStS(false);
  useEffS(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="wrap nav-row">
        <div className="nav-left">
          <a href="#" className="logo"><span className="logo-mark"/><span>Workroom</span></a>
          <div className="nav-links">
            <a href="#now">Where you are</a>
            <a href="#future">What AI can do</a>
            <a href="#how">How we help</a>
            <a href="#book">Get started</a>
          </div>
        </div>
        <div className="nav-right">
          <a href="#book" className="btn btn-primary btn-mini">Book free session <Icon.arrow/></a>
        </div>
      </div>
    </nav>
  );
}

/* 01 — WHERE YOU ARE NOW */
function Now() {
  const items = [
    { k: "FRAGMENTED",
      t: "Three people using ChatGPT, two on Claude, one on Copilot because IT bought it. Nobody comparing notes.",
      icon: (
        <svg viewBox="0 0 40 40" fill="none">
          <circle cx="12" cy="12" r="6" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="28" cy="14" r="4" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="14" cy="28" r="5" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="29" cy="27" r="3.5" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ) },
    { k: "NO SHARED PROMPTS",
      t: "The good prompts live in someone's DMs. When they leave, they take them. Nothing compounds.",
      icon: (
        <svg viewBox="0 0 40 40" fill="none">
          <rect x="6" y="10" width="22" height="16" rx="2" stroke="currentColor" strokeWidth="1.5"/>
          <path d="M10 30 L14 26 H28" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="32" cy="18" r="4" stroke="currentColor" strokeWidth="1.5" strokeDasharray="1.5 2"/>
          <path d="M12 15 H20 M12 19 H22 M12 23 H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ) },
    { k: "OLD TOOLS",
      t: "The team's using what worked 18 months ago. The real game changers aren't on their laptops.",
      icon: (
        <svg viewBox="0 0 40 40" fill="none">
          <rect x="8" y="8" width="24" height="22" rx="2" stroke="currentColor" strokeWidth="1.5"/>
          <path d="M8 14 H32" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="12" cy="11" r="0.8" fill="currentColor"/>
          <circle cx="15" cy="11" r="0.8" fill="currentColor"/>
          <path d="M13 20 L20 27 L27 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.5 2"/>
          <path d="M29 32 L33 36 M33 32 L29 36" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ) },
    { k: "NO PLAN",
      t: "Fifty newsletters, a Slack channel called #ai, lots of saved articles. Nothing anyone's executing.",
      icon: (
        <svg viewBox="0 0 40 40" fill="none">
          <path d="M8 32 L12 20 L18 28 L24 14 L30 26 L34 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="12" cy="20" r="1.2" fill="currentColor"/>
          <circle cx="18" cy="28" r="1.2" fill="currentColor"/>
          <circle cx="24" cy="14" r="1.2" fill="currentColor"/>
          <circle cx="30" cy="26" r="1.2" fill="currentColor"/>
          <path d="M6 34 H34" stroke="currentColor" strokeWidth="1" strokeOpacity="0.4"/>
        </svg>
      ) },
  ];
  return (
    <section id="now">
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <div className="section-num">01</div>
            <div className="section-head-right">
              <div className="section-kicker">WHERE YOU ARE</div>
              <h2 className="section-title">You've <em>tried AI.</em> It hasn't really stuck.</h2>
              <p className="section-lede">Most teams we meet are here. They've done a bit of everything, and none of it's compounding.</p>
            </div>
          </div>
        </Reveal>
        <div className="now-grid">
          {items.map((it, i) => (
            <Reveal key={i} className="now-card" delay={i * 80}>
              <div className="now-card-icon">{it.icon}</div>
              <div className="now-k">{it.k}</div>
              <p>{it.t}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 02 — THE SHIFT : cycling deck of concrete tasks */
const TASKS = [
  { k: "FINANCE", who: "Nisha, your bookkeeper",
    t: "Reconciling the bank feed against Xero every Friday morning.",
    before: "45 minutes of copy-paste-check",
    after: "4 minutes. She reviews the exceptions.",
    kpi: "45 min → 4 min" },
  { k: "OPS", who: "Mark, who does the invoicing",
    t: "Chasing the thirty three overdue invoices in the aged debtors report.",
    before: "Half a day a week, often skipped",
    after: "Runs itself. Mark handles the awkward ones.",
    kpi: "Half a day → zero" },
  { k: "SALES", who: "Your inbound form",
    t: "Turning a Typeform lead into an enriched, scored CRM record with a draft reply.",
    before: "Goes to someone's inbox, replied to in 3 days",
    after: "Record, research, reply draft in 90 seconds.",
    kpi: "3 days → 90 sec" },
  { k: "CONTENT", who: "Tom, your marketer",
    t: "Writing next month's twelve SEO briefs from analytics and competitor pages.",
    before: "One full working week, reluctantly",
    after: "Thirty minutes to review drafts",
    kpi: "1 week → 30 min" },
  { k: "CLIENT OPS", who: "Priya, client lead",
    t: "The monthly client report: numbers pulled, commentary written, branded PDF.",
    before: "A whole day, every client, every month",
    after: "Twenty minutes of edits in her voice",
    kpi: "8h → 20 min" },
  { k: "HIRING", who: "Whoever's hiring",
    t: "First pass through eighty applicants against the actual job description.",
    before: "Five hours of skimming CVs",
    after: "Fifteen minutes of reviewing the shortlist",
    kpi: "5h → 15 min" },
  { k: "LEGAL", who: "You, reading a contract",
    t: "Flagging the four clauses your lawyer will actually care about.",
    before: "An hour, and you miss two of them",
    after: "Two minutes, nothing missed",
    kpi: "1h → 2 min" },
  { k: "MARKETING", who: "Tom again",
    t: "Turning one podcast episode into a month of content across LinkedIn, the newsletter and X.",
    before: "Two days of agency time",
    after: "An hour. In your voice.",
    kpi: "2 days → 1h" },
  { k: "SUPPORT", who: "Ellie, on support",
    t: "Triaging overnight tickets and drafting the replies against your knowledge base.",
    before: "Ellie's whole morning gone",
    after: "Drafts waiting. She hits send or edits.",
    kpi: "3h → 20 min" },
];

function Shift() {
  const [idx, setIdx] = useStS(0);
  const [paused, setPaused] = useStS(false);
  const n = TASKS.length;

  useEffS(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % n), 4200);
    return () => clearInterval(id);
  }, [paused, n]);

  // Drag/swipe
  const stageRef = useRefS(null);
  const dragRef = useRefS({ startX: 0, dragging: false });
  const [drag, setDrag] = useStS(0);

  const onDown = (e) => {
    dragRef.current = { startX: e.touches ? e.touches[0].clientX : e.clientX, dragging: true };
    setPaused(true);
  };
  const onMove = (e) => {
    if (!dragRef.current.dragging) return;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    const d = x - dragRef.current.startX;
    // Snap once past a small threshold, don't let the card drag too far
    if (Math.abs(d) > 40) {
      dragRef.current.dragging = false;
      setDrag(0);
      if (d > 0) setIdx(i => (i - 1 + n) % n);
      else setIdx(i => (i + 1) % n);
      setTimeout(() => setPaused(false), 8000);
      return;
    }
    setDrag(d);
  };
  const onUp = () => {
    if (!dragRef.current.dragging) return;
    dragRef.current.dragging = false;
    setDrag(0);
    setTimeout(() => setPaused(false), 8000);
  };

  const go = (delta) => {
    setPaused(true);
    setIdx(i => (i + delta + n) % n);
    setTimeout(() => setPaused(false), 8000);
  };

  return (
    <section id="future">
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <div className="section-num">02</div>
            <div className="section-head-right">
              <div className="section-kicker">WHAT AI CAN DO</div>
              <h2 className="section-title">You've heard the hype. <em>What can it actually do?</em></h2>
              <p className="section-lede">Not "write a LinkedIn post." The recurring, expensive, boring work your team does every week. Real jobs, real people, real before and after.</p>
            </div>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div className="task-deck"
            onMouseDown={onDown} onMouseMove={onMove}
            onMouseUp={onUp} onMouseLeave={onUp}
            onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
            ref={stageRef}
          >
            <div className="task-deck-stage">
              {TASKS.map((task, i) => {
                const offset = ((i - idx + n) % n);
                const rel = offset > n / 2 ? offset - n : offset;
                const z = 100 - Math.abs(rel);
                const isActive = rel === 0;
                const tx = rel * 110 + (isActive ? drag * 0.4 : 0);
                const scale = isActive ? 1 : 0.92;
                const visible = Math.abs(rel) <= 1;
                const opacity = isActive ? 1 : (visible ? 0 : 0);
                return (
                  <article key={i}
                    className={`task-slab ${isActive ? "is-active" : ""}`}
                    style={{
                      transform: `translateX(${tx}%) scale(${scale})`,
                      zIndex: z,
                      opacity,
                      pointerEvents: isActive ? "auto" : "none",
                    }}
                  >
                    <div className="ts-top">
                      <span className="ts-k">{task.k}</span>
                      <span className="ts-who">{task.who}</span>
                    </div>
                    <h3 className="ts-t">{task.t}</h3>
                    <div className="ts-ba">
                      <div className="ts-ba-row ts-before">
                        <span className="ts-label">Before</span>
                        <span className="ts-val">{task.before}</span>
                      </div>
                      <div className="ts-ba-row ts-after">
                        <span className="ts-label">With Workroom</span>
                        <span className="ts-val">{task.after}</span>
                      </div>
                    </div>
                    <div className="ts-kpi">
                      <span className="ts-kpi-dot"/>
                      <span>{task.kpi}</span>
                    </div>
                  </article>
                );
              })}
            </div>

            <div className="task-deck-chrome">
              <button className="tdc-nav" onClick={() => go(-1)} aria-label="Previous">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M9 2 L4 7 L9 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
              </button>
              <div className="tdc-dots">
                {TASKS.map((_, i) => (
                  <button key={i}
                    className={`tdc-dot ${i === idx ? "is-active" : ""}`}
                    onClick={() => { setPaused(true); setIdx(i); setTimeout(() => setPaused(false), 8000); }}
                    aria-label={`Task ${i+1}`}
                  />
                ))}
              </div>
              <div className="tdc-count">
                <span className="tdc-count-n">{String(idx+1).padStart(2,"0")}</span>
                <span className="tdc-count-sep">/</span>
                <span>{String(n).padStart(2,"0")}</span>
              </div>
              <button className="tdc-nav" onClick={() => go(1)} aria-label="Next">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M5 2 L10 7 L5 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
              </button>
            </div>
          </div>
        </Reveal>

        <Reveal delay={220}>
          <div className="shift-foot">
            <div className="sf-lead">This is <em>30 to 40 percent</em> of your team's week, being done by hand.</div>
            <div className="sf-body">
              AI can't do everything. It's still bad at the things that actually move the business: meeting clients, reading the room, making the judgement calls, getting in front of a camera. The work is to migrate your team <em>away from</em> the stuff above, and <em>towards</em> the stuff only they can do.
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* 03 — HOW WE HELP */
function How() {
  const pillars = [
    {
      k: "01",
      name: "A shared operating system",
      desc: "One place your team works from, connected to Notion, Gmail, HubSpot, Slack and Drive. Prompts versioned, context shared, new hires live on day one.",
    },
    {
      k: "02",
      name: "Training from people who've done it",
      desc: "Not a generic AI course. Senior operators from marketing, finance, sales and ops sit with your team, in their actual work, and show them how.",
    },
    {
      k: "03",
      name: "We keep you current",
      desc: "AI moves weekly. We test the new tools, kill the ones that aren't earning their place, and update your workflows every month. You stop reading newsletters.",
    },
  ];

  // People: placeholder avatars using the design system — tasteful, no stock photos
  const people = [
    { name: "Alex Robinson", role: "Marketing, ex head of growth", tone: "#C96A4A" },
    { name: "Jen Mercer",   role: "Finance, ex CFO",              tone: "#7EA876" },
    { name: "Sam Okafor",   role: "Sales ops, ex RevOps lead",    tone: "#D4A24E" },
    { name: "Priya Shah",   role: "Client ops, ex agency MD",     tone: "#6C8BB0" },
  ];

  return (
    <section id="how">
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <div className="section-num">03</div>
            <div className="section-head-right">
              <div className="section-kicker">HOW WE HELP</div>
              <h2 className="section-title">It's the <em>people,</em> not the tools.</h2>
              <p className="section-lede">The unlock isn't software. It's someone senior sitting next to your team, in their actual work, and showing them how. Everything else is a supporting act.</p>
            </div>
          </div>
        </Reveal>

        <div className="pillars">
          {pillars.map((p, i) => (
            <Reveal key={i} className="pillar" delay={i * 100}>
              <div className="pillar-head">
                <span className="pillar-k">{p.k}</span>
                <h3>{p.name}</h3>
              </div>
              <p className="pillar-desc">{p.desc}</p>
            </Reveal>
          ))}
        </div>

        <Reveal delay={280}>
          <div className="people-card">
            <div className="people-card-head">
              <div>
                <div className="how-foot-k">WHO YOU WORK WITH</div>
                <p className="people-lede">A senior operator who's already <em>done the job</em> you're trying to fix. Finance people fix finance. Content people fix content. Ten years or more in the discipline, no exceptions.</p>
              </div>
              <div className="people-badge">
                <span className="pb-dot"/>
                <span>Available this month</span>
              </div>
            </div>

            <div className="people-row">
              {people.map((p, i) => (
                <div key={i} className="person" style={{"--person-tone": p.tone}}>
                  <div className="person-av">
                    <div className="person-av-bg"/>
                    <div className="person-av-in">
                      <span>{p.name.split(" ").map(s=>s[0]).join("")}</span>
                    </div>
                    <span className="person-live"/>
                  </div>
                  <div className="person-t">
                    <div className="person-name">{p.name}</div>
                    <div className="person-role">{p.role}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="people-foot">
              <span className="pf-k">Not career AI consultants. Not generalists.</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* 05 — THE WORKING SESSION (was: Getting Started) */
function Start() {
  return (
    <section id="offer">
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <div className="section-num">04</div>
            <div className="section-head-right">
              <div className="section-kicker">THE WORKING SESSION</div>
              <h2 className="section-title">Still sceptical? <em>Let us show you in 60 minutes.</em></h2>
              <p className="section-lede">You've read the articles, seen the demos, maybe got burned by a tool that didn't deliver. Book a free working session. Bring a real problem. We'll solve it live with your team, in your tools.</p>
            </div>
          </div>
        </Reveal>

        <div className="start-card">
          <div className="start-card-l">
            <div className="start-kicker">THE WORKING SESSION</div>
            <div className="start-price">Free</div>
            <div className="start-price-sub">
              <div>60 minutes</div>
              <div>one of your people</div>
              <div>one of your problems</div>
              <div>on the call together</div>
            </div>
            <div className="start-glyph" aria-hidden="true">
              <svg viewBox="0 0 80 80" width="80" height="80">
                <circle cx="40" cy="40" r="36" fill="none" stroke="currentColor" strokeOpacity="0.25" strokeDasharray="2 4"/>
                <circle cx="40" cy="40" r="22" fill="none" stroke="currentColor" strokeOpacity="0.6"/>
                <circle cx="40" cy="40" r="5" fill="currentColor"/>
              </svg>
            </div>
          </div>
          <div className="start-card-r">
            <ol className="start-list">
              <li><span>01</span>
                <div>
                  <b>Tell us what's stuck.</b>
                  <em>Finance, content, ops, sales. Wherever it's costing you.</em>
                </div>
              </li>
              <li><span>02</span>
                <div>
                  <b>We pair you with the right person.</b>
                  <em>Someone who's done that job and done it with AI.</em>
                </div>
              </li>
              <li><span>03</span>
                <div>
                  <b>We solve it, live.</b>
                  <em>In your tools, with your data, on the call together.</em>
                </div>
              </li>
              <li><span>04</span>
                <div>
                  <b>You keep the solution.</b>
                  <em>If it clicked, we talk about what's next. If not, you still took something home.</em>
                </div>
              </li>
            </ol>
            <a className="btn btn-primary" href="#book">Book the session <Icon.arrow/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
function FAQ() {
  const items = [
    { q: "Is the 60 minute session really free?", a: "Yes. No deck, no fee, no catch. You bring a real problem, we solve it with your team. If it's useful, we talk about what ongoing work looks like. If not, you keep the solution anyway." },
    { q: "How much does the ongoing retainer cost?", a: "It depends on team size and scope. Most teams of 10 to 50 land between £4,800 and £9,500 per month, all in: tools, training, monthly updates, ongoing support. You get a clear number after the first session." },
    { q: "Do we need technical people on our team?", a: "No. Most of the work lands with operators: heads of ops, content leads, finance, customer success. The whole point is that the team you already have gets better, faster, less overwhelmed." },
    { q: "What tools do you install?", a: "Usually Claude as the core, connected to what you already use (Notion, Gmail, HubSpot, Slack, Drive). We're not tied to any vendor. We'll tell you honestly when something isn't worth it." },
    { q: "How long until we see a difference?", a: "Day one, if the free session lands. Week four, your team ships real workflows without us on the call. By month three, you've forgotten what it felt like before." },
    { q: "What if we already have an AI tool or consultant?", a: "Great. We'll tell you if what you have is working and you should keep it. We sit alongside your existing team and tools, not instead of them." },
    { q: "What about security and our data?", a: "Business tier everything. Your data stays yours, no training, SOC2 ready. We send your IT lead the doc before the first call so it's a clean yes." },
  ];
  const [open, setOpen] = useStS(0);
  return (
    <section id="faq">
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <div className="section-num">05</div>
            <div className="section-head-right">
              <div className="section-kicker">FAQ</div>
              <h2 className="section-title">Frequently <em>asked.</em></h2>
            </div>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="faq-list">
            {items.map((it, i) => (
              <div
                key={i}
                className={`faq-item ${open === i ? "is-open" : ""}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q"><span>{it.q}</span><span className="faq-toggle">+</span></div>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* CTA */
function CTA() {
  return (
    <section id="book">
      <div className="wrap">
        <Reveal>
          <div className="cta-block">
            <div className="t-eyebrow" style={{marginBottom:18, color:"var(--accent)"}}>FREE · 60 MINUTES · ONE REAL PROBLEM</div>
            <h2 className="cta-tagline">Book the <em>working session.</em></h2>
            <p className="cta-sub">Bring something your team is stuck on. We'll solve it live, in an hour, with the tools we'd install. You take the solution home either way.</p>
            <div className="cta-ctas">
              <a className="btn btn-primary" href="https://cal.com/alex-robinson/workroom-session" target="_blank" rel="noreferrer">
                Book the session <Icon.arrow/>
              </a>
              <a className="btn btn-ghost" href="mailto:hello@useworkroom.com">
                Or email hello@useworkroom.com
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-row">
          <div className="foot-col foot-brand">
            <a href="#" className="logo"><span className="logo-mark"/><span>Workroom</span></a>
            <p>An operating system, the training, and someone keeping you current, so your team actually uses AI.</p>
          </div>
          <div className="foot-col">
            <h5>The page</h5>
            <a href="#now">Where you are</a>
            <a href="#future">What AI can do</a>
            <a href="#how">How we help</a>
            <a href="#book">Get started</a>
          </div>
          <div className="foot-col">
            <h5>Contact</h5>
            <a href="mailto:hello@useworkroom.com">hello@useworkroom.com</a>
            <a href="#book">Book a session</a>
          </div>
        </div>
        <div className="foot-fine">
          <span>© 2026 Workroom Ltd</span>
          <span>useworkroom.com</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Now, Shift, How, Start, FAQ, CTA, Footer });