/* CleanDeen — public marketing site: Nav, Hero, Approach */
const { useState: usePub } = React;

function Nav({ onHome }) {
  const [open, setOpen] = usePub(false);
  const links = [["How it works", "#difference"], ["Service area", "#areas"], ["FAQ", "#faq"]];
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <Wordmark onClick={onHome} />
        <nav className="nav-links">
          {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="nav-cta">
          <a href="#book" className="btn btn-primary btn-sm">Book a call</a>
        </div>
        <button className="nav-burger" onClick={() => setOpen(!open)}>{open ? <Ic.x /> : <Ic.menu />}</button>
      </div>
      {open && (
        <div className="nav-mobile">
          {links.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
          <a href="#book" className="btn btn-primary" onClick={() => setOpen(false)}>Book a call</a>
        </div>
      )}
    </header>
  );
}

function Hero() {
  const [phase, setPhase] = usePub("before");
  const room = window.CD.ROOMS[0];
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <h1 className="hero-h1">We test what you <em>can't see</em></h1>
          <p className="hero-sub">
            CleanDeen is a cleaning company local to the greater Boston area. We swab and culture your surfaces before and after every visit, so the contamination you can't see is something you can actually check.
          </p>
          <div className="hero-actions">
            <a href="#book" className="btn btn-primary btn-lg">Book a free call<Ic.arrow style={{ width: 18, height: 18 }} /></a>
            <a href="#difference" className="btn btn-ghost btn-lg">See how it works</a>
          </div>
          <p className="hero-note">
            Lab-verified microbial testing on every visit. Green-Seal eco products as standard. No long contract required.
          </p>
          <div className="hero-tagline">Tested, not trusted</div>
        </div>

        <div className="hero-visual">
          <div className="card hero-demo">
            <div className="flex between center" style={{ padding: "16px 18px 0" }}>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--brown-600)" }}>{room.name}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-mute)" }}>Live microbial map</div>
              </div>
              <div className="seg" style={{ transform: "scale(.9)", transformOrigin: "right" }}>
                <button className={phase === "before" ? "on" : ""} onClick={() => setPhase("before")}>Before</button>
                <button className={phase === "after" ? "on" : ""} onClick={() => setPhase("after")}>After</button>
              </div>
            </div>
            <IsoRoom room={room} phase={phase} interactive expandable infoOnSelect />
            <div style={{ padding: "0 18px 18px" }}>
              <IsoLegend />
              <div className="hero-demo-stat">
                {phase === "before"
                  ? <><Ic.drop style={{ width: 16, height: 16, color: "var(--sev-high)" }} /><span><strong>High load</strong> detected across the high-contact zone &amp; carpet field</span></>
                  : <><Ic.check style={{ width: 16, height: 16, color: "var(--sev-clean)" }} /><span><strong>Cleared.</strong> Re-cultured surfaces show near-zero microbial load</span></>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Difference() {
  const rows = [
    {
      title: "Microbial culture testing",
      body: "Every visit starts and ends with a swab. We plate the samples in a lab and photograph the results, so you can see what was living on the surface before we arrived and what is left afterwards. It is the part of the job most cleaners skip.",
    },
    {
      title: "Plans built around the room",
      body: "A locker room and a carpeted hall fail in completely different ways. We scope each space by how it is used and how wet it gets, then write the protocol for that room rather than applying one checklist across the building.",
    },
    {
      title: "Eco products and relationship pricing",
      body: "Our standard product line is Green-Seal-compatible and safe around staff, children and animals. Rates come out of ongoing conversation about your space and how often it needs attention, and never out of contract length.",
    },
  ];
  const steps = [
    ["01", "Baseline culture", "We swab the high-touch surfaces in every room and plate them in the lab."],
    ["02", "Deep clean and sterilize", "Eco-certified deep clean, carpet extraction where needed, surface sterilization."],
    ["03", "Re-culture", "The same zones get swabbed again, so the comparison is genuinely like for like."],
    ["04", "Proof report", "You get the before and after plates and a clean score, emailed as a written report."],
  ];
  return (
    <section id="difference" className="section">
      <div className="wrap">
        <div className="approach">
          <div className="approach-intro">
            <span className="eyebrow">Our approach</span>
            <h2 className="sec-title approach-h">How the work actually runs</h2>
            <p className="muted approach-p">
              Most cleaning is judged by how a room looks and smells when the crew leaves. We would rather hand you a lab result.
            </p>
          </div>
          <div className="approach-list">
            {rows.map((r, i) => (
              <div key={i} className="approach-row">
                <h3 className="ar-t">{r.title}</h3>
                <p className="ar-b">{r.body}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="protocol">
          <div className="protocol-head">
            <h3 className="protocol-h">The four passes of a visit</h3>
            <p className="muted" style={{ fontSize: 14.5 }}>Same sequence every time, so the numbers stay comparable from month to month.</p>
          </div>
          <ol className="protocol-list">
            {steps.map(([n, t, d]) => (
              <li key={n} className="protocol-step">
                <span className="pl-n">{n}</span>
                <div>
                  <div className="pl-t">{t}</div>
                  <p className="pl-d">{d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Difference });