// sections.jsx — FSR landing page sections
// Loaded after React + Babel.

/* ─────────────────────────────────────────────────────────────
   Inline icons
   ───────────────────────────────────────────────────────────── */
const Ico = {
  check: (p={}) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>,
  clock: (p={}) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14" strokeLinecap="round"/></svg>,
  arrow: (p={}) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>,
  doc:   (p={}) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><polyline points="14 3 14 8 19 8"/></svg>,
  scatter: (p={}) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="5" cy="6" r="1.2"/><circle cx="13" cy="4" r="1.2"/><circle cx="19" cy="9" r="1.2"/><circle cx="8" cy="14" r="1.2"/><circle cx="16" cy="17" r="1.2"/><circle cx="5" cy="19" r="1.2"/></svg>,
  bars:    (p={}) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><line x1="5" y1="20" x2="5" y2="14"/><line x1="11" y1="20" x2="11" y2="8"/><line x1="17" y1="20" x2="17" y2="11"/></svg>,
  eye:     (p={}) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>,
  alert:   (p={}) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 2 2 21h20L12 2z"/><line x1="12" y1="10" x2="12" y2="14"/><circle cx="12" cy="17.5" r="0.5" fill="currentColor"/></svg>,
  folders: (p={}) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 8a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>,
};

/* ─────────────────────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────────────────────── */
function FsrMark() {
  return (
    <span className="fsr-mark" aria-label="fsr">
      <span style={{letterSpacing: "-0.04em"}}>[</span>
      <span className="fsr-dot" aria-hidden="true"></span>
      <span>fsr]</span>
    </span>
  );
}

function Nav({ heroTheme }) {
  const dark = heroTheme !== 'light';
  const lockupSrc = dark ? 'assets/fsr-lockup-dark.svg' : 'assets/fsr-lockup.svg';
  return (
    <nav className={`nav ${dark ? '' : 'nav--light'}`}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand" aria-label="Flow Sleep Repeat Ltd — operations management">
          <img className="nav__lockup" src={lockupSrc} alt="Flow Sleep Repeat Ltd — operations management"/>
        </a>
        <div className="nav__links">
          <a href="#services">Services</a>
          <a href="#deliverables">Deliverables</a>
          <a href="#process">Process</a>
          <a href="#about">About</a>
        </div>
        <button className="nav__cta" onClick={() => document.getElementById('contact')?.scrollIntoView({behavior:'smooth', block:'start'})}>
          Start a Conversation
        </button>
      </div>
    </nav>
  );
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
const HEADLINES = [
  {
    title: "Operational workflow support for datacenter delivery teams.",
    sub:   "FSR helps delivery teams reduce operational overhead through structured reporting, QA visibility, documentation coordination, and workflow support.",
  },
  {
    title: "Structure, visibility, and documentation — built for delivery teams.",
    sub:   "We sit alongside datacenter delivery teams to bring order to trackers, QA evidence, and operational documentation so execution stays the focus.",
  },
  {
    title: "Reduce operational overhead. Stay focused on delivery.",
    sub:   "FSR provides reporting, QA tracking, RAMS support and documentation coordination for datacenter delivery teams — quietly, in the background.",
  },
];

function HeroVisualCards() {
  return (
    <React.Fragment>
      <div className="hv-card hv-pipeline">
        <div className="hv-card__hd">
          <div className="hv-card__title">Delivery pipeline · DC-04</div>
          <span className="hv-card__title" style={{color:'var(--teal)'}}>● live</span>
        </div>
        <div className="stages">
          <div className="stage"><div className="node"><Ico.check/></div>Survey</div>
          <div className="stage"><div className="node"><Ico.check/></div>Design</div>
          <div className="stage"><div className="node"><Ico.check/></div>Build</div>
          <div className="stage stage--current"><div className="node"><Ico.clock/></div>Test</div>
          <div className="stage stage--pending"><div className="node">5</div>Handover</div>
        </div>
      </div>

      <div className="hv-card hv-stats">
        <div className="hv-card__hd">
          <div className="hv-card__title">Delivery overview</div>
        </div>
        <div className="stat-row">
          <div className="stat"><span className="lbl">Projects</span><span className="val">24</span><span className="sub">Active</span></div>
          <div className="stat"><span className="lbl">Milestones</span><span className="val">126</span><span className="sub">On track</span></div>
          <div className="stat"><span className="lbl">Approvals</span><span className="val">18</span><span className="sub sub--amber">Pending</span></div>
          <div className="stat"><span className="lbl">Risks</span><span className="val">7</span><span className="sub sub--amber">Open</span></div>
        </div>
      </div>

      <div className="hv-card hv-approval">
        <div className="hv-card__hd">
          <div className="hv-card__title">Approval chain</div>
        </div>
        <div className="rows">
          <div className="row"><div className="avatar"></div><div className="bar" style={{'--w':'100%'}}></div><Ico.check style={{color:'var(--teal)'}}/></div>
          <div className="row"><div className="avatar"></div><div className="bar" style={{'--w':'100%'}}></div><Ico.check style={{color:'var(--teal)'}}/></div>
          <div className="row row--pending"><div className="avatar"></div><div className="bar" style={{'--w':'62%'}}></div><Ico.clock style={{color:'var(--amber)'}}/></div>
          <div className="row"><div className="avatar"></div><div className="bar" style={{'--w':'0%'}}></div><Ico.clock style={{color:'var(--slate-3, #64748B)'}}/></div>
        </div>
      </div>

      <div className="hv-card hv-actions">
        <div className="hv-card__hd">
          <div className="hv-card__title">Action tracker</div>
          <span className="hv-card__title" style={{color:'var(--ink-on-dark-mute)'}}>WK 47</span>
        </div>
        <ul>
          <li><span className="chk"><Ico.check/></span>Review test results — Level 2 cooling</li>
          <li><span className="chk"><Ico.check/></span>Approve method statements</li>
          <li><span className="chk chk--pending"><Ico.clock/></span>Verify inspections — Hall B</li>
          <li><span className="chk chk--pending"><Ico.clock/></span>Issue NCRs to subcontractor</li>
          <li><span className="chk chk--open"></span>Close out punch-list actions</li>
          <li><span className="chk chk--open"></span>Prepare handover pack</li>
        </ul>
      </div>

      <div className="hv-card hv-donut">
        <div className="hv-donut__viz">
          <svg viewBox="0 0 36 36" width="92" height="92">
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#1E2933" strokeWidth="3.2"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--teal)" strokeWidth="3.2"
              strokeDasharray="78 100" strokeDashoffset="25" transform="rotate(-90 18 18)" strokeLinecap="butt"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--amber)" strokeWidth="3.2"
              strokeDasharray="14 100" strokeDashoffset="-53" transform="rotate(-90 18 18)" strokeLinecap="butt"/>
          </svg>
          <div className="hv-donut__num">78%</div>
        </div>
        <div className="hv-donut__legend">
          <span>Complete · 78%</span>
          <span className="amber">Pending · 14%</span>
          <span className="mute">Blocked · 8%</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function HeroVisualDashboard() {
  return (
    <div className="hv-card hv-pipeline">
      <div className="hv-card__hd">
        <div className="hv-card__title">Operations overview · DC-04</div>
        <span className="hv-card__title" style={{color:'var(--teal)'}}>● live</span>
      </div>
      <div className="hv-dashboard">
        <div className="stages">
          <div className="stage"><div className="node"><Ico.check/></div>Survey</div>
          <div className="stage"><div className="node"><Ico.check/></div>Design</div>
          <div className="stage"><div className="node"><Ico.check/></div>Build</div>
          <div className="stage stage--current"><div className="node"><Ico.clock/></div>Test</div>
          <div className="stage stage--pending"><div className="node">5</div>Handover</div>
        </div>
        <div className="stat-row" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginTop: 14, paddingTop:18, borderTop:'1px solid var(--hairline-dark)'}}>
          <div className="stat"><span className="lbl" style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-on-dark-mute)'}}>Projects</span><span style={{fontSize:24, fontWeight:600, color:'var(--off-white)', letterSpacing:'-0.02em'}}>24</span><span style={{fontSize:11, color:'var(--teal)'}}>Active</span></div>
          <div className="stat"><span className="lbl" style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-on-dark-mute)'}}>Milestones</span><span style={{fontSize:24, fontWeight:600, color:'var(--off-white)', letterSpacing:'-0.02em'}}>126</span><span style={{fontSize:11, color:'var(--teal)'}}>On track</span></div>
          <div className="stat"><span className="lbl" style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-on-dark-mute)'}}>Approvals</span><span style={{fontSize:24, fontWeight:600, color:'var(--off-white)', letterSpacing:'-0.02em'}}>18</span><span style={{fontSize:11, color:'var(--amber)'}}>Pending</span></div>
          <div className="stat"><span className="lbl" style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-on-dark-mute)'}}>Risks</span><span style={{fontSize:24, fontWeight:600, color:'var(--off-white)', letterSpacing:'-0.02em'}}>7</span><span style={{fontSize:11, color:'var(--amber)'}}>Open</span></div>
        </div>
      </div>
    </div>
  );
}

function Hero({ t }) {
  const h = HEADLINES[t.headline] || HEADLINES[0];
  const heroClass = `hero hero--${t.heroVariant}`;
  return (
    <section className={heroClass} id="top">
      <div className="hero__bg"></div>
      <div className="hero__grid"></div>
      <div className="hero__dots"></div>
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="eyebrow">Flow Sleep Repeat Ltd · 2026</span>
          <h1 className="hero__title">{h.title}</h1>
          <p className="hero__sub">{h.sub}</p>
          <div className="hero__ctas">
            <button className="btn btn-primary" onClick={() => document.getElementById('contact')?.scrollIntoView({behavior:'smooth'})}>
              Start a Conversation <span className="btn-arrow">→</span>
            </button>
            <a href="#services" className="btn btn-ghost">View services</a>
          </div>
          <div className="hero__meta">
            <div>For<b>Datacenter delivery</b></div>
            <div>Built around<b>Operational visibility</b></div>
            <div>Engaged via<b>Flexible support</b></div>
          </div>
        </div>
        {t.heroVariant !== 'minimal' && (
          <div className="hero__visual">
            {t.heroVariant === 'dashboard' ? <HeroVisualDashboard/> : <HeroVisualCards/>}
          </div>
        )}
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Pain points
   ───────────────────────────────────────────────────────────── */
const PAINS = [
  { num: "01", title: "Fragmented trackers",       desc: "Spreadsheets, emails and chat threads all carrying different versions of the same truth.", ico: 'folders' },
  { num: "02", title: "Reporting inconsistency",   desc: "Each week the report looks different. Status changes meaning between teams.", ico: 'bars' },
  { num: "03", title: "QA visibility gaps",        desc: "Inspection status, NCRs and approvals scattered across systems and sites.", ico: 'eye' },
  { num: "04", title: "Operational overload",      desc: "Delivery managers spending the day chasing updates instead of running the project.", ico: 'alert' },
  { num: "05", title: "Document coordination delays", desc: "Submissions slip. Revisions get missed. Handover packs come together too late.", ico: 'scatter' },
];

function Pain() {
  return (
    <section className="section pain" id="pain">
      <div className="container">
        <div className="pain__hd">
          <div>
            <span className="eyebrow">The problem</span>
            <h2 className="h-section pain__hd-title">Delivery teams aren't short of effort.<br/>They're short of structure.</h2>
          </div>
          <p className="lead">
            On most datacenter delivery programmes, operational overhead is the silent tax — the hours
            lost to reconciling trackers, chasing approvals, and stitching together the documents that
            should already be in one place.
          </p>
        </div>
        <div className="pain__grid">
          {PAINS.map(p => (
            <div key={p.num} className="pain__item reveal">
              <div className="pain__icon">{Ico[p.ico]({})}</div>
              <div className="pain__num">{p.num}</div>
              <div className="pain__title">{p.title}</div>
              <div className="pain__desc">{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Services
   ───────────────────────────────────────────────────────────── */
const SERVICES = [
  {
    num: "Service 01",
    title: "Operational Visibility Support",
    desc:  "We build the reporting cadence and visibility layer that lets delivery managers see status without chasing it.",
    items: ["Reporting workflows", "Project dashboards", "Action tracking", "Workflow visibility"],
  },
  {
    num: "Service 02",
    title: "QA / Documentation Coordination",
    desc:  "We coordinate QA evidence and documentation so submissions move on time and nothing falls between teams.",
    items: ["QA tracking support", "Documentation oversight", "Status tracking", "Submission coordination"],
  },
  {
    num: "Service 03",
    title: "Batch Testing Reports",
    desc:  "We consolidate test results, witness records and commissioning evidence into structured batch reports ready for submission.",
    items: ["Test result consolidation", "Witness test tracking", "Commissioning evidence", "Submission-ready summaries"],
  },
  {
    num: "Service 04",
    title: "RAMS & Operational Documentation",
    desc:  "We draft, revise and structure RAMS, lifting plans, and other operational documents to submission-ready quality.",
    items: ["RAMS drafting", "RAMS revisions", "Lifting plans", "Submission-ready documentation"],
  },
];

function Services({ style }) {
  return (
    <section className="section services" id="services">
      <div className="container">
        <div className="services__hd">
          <span className="eyebrow">What we do</span>
          <h2 className="h-section services__hd-title">Four quiet capabilities that change how delivery feels.</h2>
          <p className="lead services__hd-lead">
            FSR is not a project manager, an engineering consultancy, or a staffing agency. We provide
            focused operational support that sits behind your delivery team.
          </p>
        </div>

        {style === 'numbered' ? (
          <div className="svc-list">
            {SERVICES.map((s, i) => (
              <div key={i} className="svc-list__item reveal">
                <div className="svc-list__num">{s.num.replace('Service ', '').padStart(2, '0')} ——</div>
                <div>
                  <div className="svc-list__title">{s.title}</div>
                  <div className="svc-list__chips">
                    {s.items.map(it => <span key={it} className="svc-list__chip">{it}</span>)}
                  </div>
                </div>
                <div className="svc-list__desc">{s.desc}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className="svc-cards">
            {SERVICES.map((s, i) => (
              <div key={i} className="svc-card reveal">
                <div className="svc-card__num">{s.num}</div>
                <h3 className="h-card svc-card__title">{s.title}</h3>
                <p className="svc-card__desc">{s.desc}</p>
                <ul className="svc-card__list">
                  {s.items.map(it => <li key={it}>{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Example deliverables
   ───────────────────────────────────────────────────────────── */
function Deliverables() {
  return (
    <section className="section deliverables" id="deliverables">
      <div className="container">
        <div className="deliverables__hd">
          <span className="eyebrow">Example deliverables</span>
          <h2 className="h-section deliverables__hd-title">Operationally useful, not visually loud.</h2>
          <p className="lead deliverables__hd-lead">
            A look at the kind of structured artifacts we produce — the working surfaces that bring
            delivery overhead under control.
          </p>
        </div>

        <div className="del-grid">
          {/* Weekly Operational Report */}
          <div className="del-card del-report reveal">
            <div className="del-card__hd">
              <div>
                <div className="del-card__kicker">Wk 47 · DC-04</div>
                <div className="del-card__title" style={{marginTop:6}}>Weekly Operational Report</div>
              </div>
              <span className="pill"><span className="dot"></span>Issued Mon 09:00</span>
            </div>
            <div className="rep-meta">
              <div className="item"><div className="lbl">Milestones met</div><div className="val teal">12<span style={{fontSize:14, color:'var(--ink-on-dark-mute)'}}>/14</span></div></div>
              <div className="item"><div className="lbl">Approvals open</div><div className="val amber">18</div></div>
              <div className="item"><div className="lbl">Open risks</div><div className="val">7</div></div>
            </div>
            <div className="rep-bars">
              <div className="row"><span>Cooling — Hall A</span><div className="bar" style={{'--w':'92%'}}></div><span className="val">92%</span></div>
              <div className="row"><span>Power — Lvl 2</span><div className="bar" style={{'--w':'74%'}}></div><span className="val">74%</span></div>
              <div className="row amber"><span>Networking</span><div className="bar" style={{'--w':'48%'}}></div><span className="val">48%</span></div>
              <div className="row"><span>Fire suppression</span><div className="bar" style={{'--w':'86%'}}></div><span className="val">86%</span></div>
            </div>
          </div>

          {/* Action Tracker */}
          <div className="del-card del-actions reveal">
            <div className="del-card__hd">
              <div>
                <div className="del-card__kicker">Live · 42 actions</div>
                <div className="del-card__title" style={{marginTop:6}}>Action Tracker</div>
              </div>
              <span className="pill"><span className="dot"></span>Updated 14m ago</span>
            </div>
            <table>
              <thead>
                <tr><th>ID</th><th>Action</th><th>Owner</th><th>Status</th></tr>
              </thead>
              <tbody>
                <tr><td className="id">A-118</td><td>Cooling commissioning sign-off</td><td>JT</td><td><span className="status"><span className="d"></span>Closed</span></td></tr>
                <tr><td className="id">A-119</td><td>NCR-04 close-out — Hall B</td><td>MK</td><td><span className="status open"><span className="d"></span>Open</span></td></tr>
                <tr><td className="id">A-120</td><td>RAMS rev. 03 — Crane lift</td><td>PS</td><td><span className="status due"><span className="d"></span>Due</span></td></tr>
                <tr><td className="id">A-121</td><td>Inspection batch upload</td><td>RD</td><td><span className="status open"><span className="d"></span>Open</span></td></tr>
                <tr><td className="id">A-122</td><td>Handover pack — Section 4</td><td>JT</td><td><span className="status"><span className="d"></span>Closed</span></td></tr>
              </tbody>
            </table>
          </div>

          {/* QA Dashboard */}
          <div className="del-card del-qa reveal">
            <div className="del-card__hd">
              <div>
                <div className="del-card__kicker">QA · DC-04</div>
                <div className="del-card__title" style={{marginTop:6}}>QA Dashboard</div>
              </div>
              <span className="pill"><span className="dot"></span>96% evidence trail</span>
            </div>
            <div className="qa-row">
              <div className="qa-tile">
                <div className="lbl">Inspections</div>
                <div className="val">412</div>
                <div className="delta">+38 this week</div>
              </div>
              <div className="qa-tile">
                <div className="lbl">Open NCRs</div>
                <div className="val" style={{color:'var(--amber)'}}>9</div>
                <div className="delta" style={{color:'var(--amber)'}}>3 over 7 days</div>
              </div>
            </div>
            <div className="qa-list">
              <div className="row"><span>ITP — Mechanical, Lvl 2</span><span className="badge">Verified</span></div>
              <div className="row amber"><span>NCR-07 — Cable tray spacing</span><span className="badge">Pending</span></div>
              <div className="row"><span>Witness test — UPS string A</span><span className="badge">Verified</span></div>
              <div className="row"><span>ITP — Cooling, Hall A</span><span className="badge">Verified</span></div>
            </div>
          </div>

          {/* Documentation Visibility */}
          <div className="del-card del-docs reveal">
            <div className="del-card__hd">
              <div>
                <div className="del-card__kicker">Submissions · 124 docs</div>
                <div className="del-card__title" style={{marginTop:6}}>Documentation Visibility</div>
              </div>
              <span className="pill"><span className="dot"></span>3 due this week</span>
            </div>
            <div className="docs-list">
              <div className="doc-row">
                <Ico.doc className="ico"/><span>RAMS — High-voltage cable pulls</span><span className="ver">v04</span><span className="st"><Ico.check/></span>
              </div>
              <div className="doc-row amber">
                <Ico.doc className="ico"/><span>Lifting plan — Generator skid</span><span className="ver">v02</span><span className="st"><Ico.clock/></span>
              </div>
              <div className="doc-row">
                <Ico.doc className="ico"/><span>Method statement — Switchgear</span><span className="ver">v06</span><span className="st"><Ico.check/></span>
              </div>
              <div className="doc-row amber">
                <Ico.doc className="ico"/><span>Inspection plan — Fire suppression</span><span className="ver">v01</span><span className="st"><Ico.clock/></span>
              </div>
              <div className="doc-row">
                <Ico.doc className="ico"/><span>Handover record — Section 4</span><span className="ver">v01</span><span className="st"><Ico.check/></span>
              </div>
              <div className="doc-row open">
                <Ico.doc className="ico"/><span>RAMS — Crane lift, plant room 2</span><span className="ver">draft</span><span className="st"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Process
   ───────────────────────────────────────────────────────────── */
const PROCESS = [
  { num: "01", title: "Understand workflow bottlenecks", desc: "We start by sitting with your team and tracing where overhead actually lives — the trackers, the handoffs, the documents that block delivery."},
  { num: "02", title: "Structure operational visibility", desc: "We design the reporting cadence, dashboards, and documentation flow that fit how your delivery team already works."},
  { num: "03", title: "Support delivery coordination",    desc: "Then we run the operational layer with you — quietly, week to week — so your team can stay focused on execution."},
];

function Process({ style }) {
  return (
    <section className="section process" id="process">
      <div className="container">
        <div className="process__hd">
          <span className="eyebrow">How we work</span>
          <h2 className="h-section process__hd-title">Three steps. Calmly applied.</h2>
        </div>

        {style === 'vertical' ? (
          <div className="proc-v">
            {PROCESS.map(p => (
              <div key={p.num} className="proc-v__step reveal">
                <div className="proc-v__node">{p.num}</div>
                <div className="proc-v__title">{p.title}</div>
                <div className="proc-v__desc">{p.desc}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className="proc-h">
            {PROCESS.map(p => (
              <div key={p.num} className="proc-h__step reveal">
                <div className="proc-h__node">{p.num}</div>
                <div className="proc-h__title">{p.title}</div>
                <div className="proc-h__desc">{p.desc}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   About / Founder
   ───────────────────────────────────────────────────────────── */
function About() {
  return (
    <section className="section about" id="about">
      <div className="container">
        <div className="about__inner">
          <div>
            <span className="eyebrow">About FSR</span>
            <h2 className="h-section about__title">A focused operation, not a consultancy.</h2>
          </div>
          <div>
            <p className="about__lead">
              FSR Ltd was founded in 2026 to support operational workflow visibility, QA coordination,
              and documentation support for datacenter delivery teams. We engage flexibly — embedded
              alongside your team, sized to the programme.
            </p>
            <div className="about__meta">
              <div className="item"><div className="lbl">Founder</div><div className="val">Paul Sims</div></div>
              <div className="item"><div className="lbl">Location</div><div className="val">United Kingdom</div></div>
              <div className="item"><div className="lbl">Founded</div><div className="val">2026</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Closing CTA + Contact form
   ───────────────────────────────────────────────────────────── */
function Contact() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({name: '', email: '', org: '', message: ''});

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSent(true);
  };

  return (
    <section className="section cta" id="contact">
      <div className="container">
        <div className="cta__inner">
          <div>
            <span className="eyebrow">Start a conversation</span>
            <h2 className="h-section cta__title">Have a delivery programme with operational overhead you want to quiet down?</h2>
            <p className="lead cta__lead">
              We're a flexible operational support partner for datacenter delivery environments.
              The shortest path is a 20-minute conversation about your workflow.
            </p>
            <div className="cta__direct">
              <div className="lbl">Direct</div>
              <a href="mailto:paul@flowsleeprepeat.ai">paul@flowsleeprepeat.ai</a>
              <div className="lbl" style={{marginTop:14}}>Based in</div>
              <div style={{fontSize:15, color:'var(--ink-on-dark-soft)'}}>United Kingdom · GMT/BST</div>
            </div>
          </div>

          <form className="form" onSubmit={onSubmit}>
            <div className="form__title">Or send a short note</div>
            {sent ? (
              <div className="form__success">
                <span className="ico"><Ico.check/></span>
                Thanks {form.name.split(' ')[0]}. We'll come back within one working day.
              </div>
            ) : (
              <React.Fragment>
                <div className="form__row">
                  <div className="field">
                    <label htmlFor="f-name">Name</label>
                    <input id="f-name" type="text" placeholder="Your name" value={form.name}
                      onChange={e=>setForm({...form, name: e.target.value})} required/>
                  </div>
                  <div className="field">
                    <label htmlFor="f-org">Organisation</label>
                    <input id="f-org" type="text" placeholder="Company or programme" value={form.org}
                      onChange={e=>setForm({...form, org: e.target.value})}/>
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="f-email">Email</label>
                  <input id="f-email" type="email" placeholder="you@company.com" value={form.email}
                    onChange={e=>setForm({...form, email: e.target.value})} required/>
                </div>
                <div className="field">
                  <label htmlFor="f-msg">Workflow challenge</label>
                  <textarea id="f-msg" placeholder="Where does operational overhead show up on your programme?" value={form.message}
                    onChange={e=>setForm({...form, message: e.target.value})}/>
                </div>
                <div className="form__submit">
                  <span className="form__note">We reply within one working day.</span>
                  <button type="submit" className="btn btn-primary">Send <span className="btn-arrow">→</span></button>
                </div>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot__top">
          <div className="foot__brand">
            <img src="assets/fsr-lockup-dark.svg" alt="Flow Sleep Repeat Ltd — operations management"/>
            <p className="foot__tag">
              Operational workflow support for datacenter delivery teams.
            </p>
          </div>
          <div className="foot__col">
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Operational Visibility</a></li>
              <li><a href="#services">QA Coordination</a></li>
              <li><a href="#services">RAMS Support</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h5>Company</h5>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#deliverables">Deliverables</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:paul@flowsleeprepeat.ai">paul@flowsleeprepeat.ai</a></li>
              <li>United Kingdom</li>
              <li><a href="#contact">Start a conversation</a></li>
            </ul>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 Flow Sleep Repeat Ltd. All rights reserved.</span>
          <span>Company registered in the United Kingdom.</span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────────────────────────
   Reveal-on-scroll observer
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   Reveal-on-scroll removed — content is visible by default.
   Subtle motion lives in the hero background (CSS only).
   ───────────────────────────────────────────────────────────── */
function useRevealOnScroll() { /* no-op */ }

// Export
Object.assign(window, {
  Nav, Hero, Pain, Services, Deliverables, Process, About, Contact, Footer,
  useRevealOnScroll,
});