// 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-horizontal-dark-small-use.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"/>
          <span className="nav__mobile-mark" aria-hidden="true"><FsrMark /></span>
        </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'})}>
          <span className="nav__cta-full">Start a Conversation</span>
          <span className="nav__cta-short">Start</span>
        </button>
      </div>
    </nav>
  );
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
const HEADLINES = [
  {
    title: "Operational workflow support for data centre 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 data centre 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 data centre 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</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">Admin should not take the energy meant for delivery.</h2>
          </div>
          <p className="lead">
            Complex data centre delivery is already demanding: commissioning equipment, coordinating
            teams, and protecting project milestones. That pressure is compounded when trackers,
            approvals, evidence packs, and reports have to be managed on top of the work. FSR helps
            optimise and reduce that operational load so focus stays on the systems, decisions, and
            milestones that move delivery forward.
          </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">When the system works, it disappears into delivery.</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, with services shaped around
            the workflow rather than limited to a fixed list.
          </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
   ───────────────────────────────────────────────────────────── */
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 supports data centre delivery teams across the UK and Europe with operational
              workflow visibility, QA coordination, and documentation support. The work is grounded
              in hands-on experience across installation, management, and commissioning of standby
              and power-delivery systems.
            </p>
            <p className="about__body">
              FSR grew from a simple observation: high-stress delivery environments do not need more
              disconnected admin. They need AI-assisted systems that make evidence, actions, and
              reporting easier to run, so experienced teams can spend more time delivering the work.
            </p>
          </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 data centre 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:hello@flowsleeprepeat.ai">hello@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 data centre 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:hello@flowsleeprepeat.ai">hello@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,
});