/* global React, Tag, CompanyLogo, LogoMarks, Confidence, NeroLogo, NeroMark, FigLabel, ReceiptChip, VerdictCard, Transcript, EmotionTimeline, InsightCard, VideoTile */

// ============================================================
// NAV
// ============================================================

function Nav({ onCTA }) {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  const toTop = (e) => {
    e.preventDefault();
    close();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
    if (window.location.hash) history.replaceState(null, "", window.location.pathname);
  };
  const links = [
    { href: "#platform", label: "Method" },
    { href: "#modes", label: "Study Types" },
    { href: "#report", label: "Sample Report" },
    { href: "/blog", label: "Resources" },
  ];
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a href="/" className="nav__home" onClick={toTop} aria-label="NeroView — back to top">
          <NeroLogo />
        </a>
        <span className="nav__study">STUDY NV-0612 · LIVE</span>
        <div className="nav__links">
          {links.map((l) => <a key={l.href} className="nav__link" href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav__cta">
          <button className="btn btn--ghost" onClick={() => onCTA && onCTA("signin")}>Sign in</button>
          <button className="btn btn--primary" onClick={() => onCTA && onCTA("demo")}>Get a demo</button>
        </div>
        <button className="nav__burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          {links.map((l) => <a key={l.href} className="nav__link" href={l.href} onClick={close}>{l.label}</a>)}
          <div className="nav__mobile-cta">
            <button className="btn btn--ghost" onClick={() => { close(); onCTA && onCTA("signin"); }}>Sign in</button>
            <button className="btn btn--primary" onClick={() => { close(); onCTA && onCTA("demo"); }}>Get a demo</button>
          </div>
        </div>
      )}
    </nav>
  );
}

// ============================================================
// FOOTER SUBSCRIBE — field notes opt-in (POST /api/subscribe)
// ============================================================

function FooterSubscribe() {
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | loading | done | error
  const [errMsg, setErrMsg] = React.useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (status === "loading" || status === "done") return;
    setStatus("loading");
    setErrMsg("");
    try {
      const res = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, source: "footer" }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error(err.error === "rate_limited" ? "Too many requests — try again shortly." : err.error || "Couldn't subscribe");
      }
      setStatus("done");
    } catch (err) {
      setStatus("error");
      setErrMsg(err.message || "Something went wrong");
    }
  };

  return (
    <form className="footsub" onSubmit={submit}>
      <div className="footsub__label">FIELD NOTES · ONE PATTERN A WEEK</div>
      <div className="footsub__row">
        <input
          type="email"
          placeholder="you@team.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          disabled={status === "loading" || status === "done"}
          aria-label="Email for field notes"
        />
        <button className="btn btn--ghost" type="submit" disabled={status === "loading" || status === "done"}>
          {status === "loading" ? "…" : status === "done" ? "✓" : "Subscribe"}
        </button>
      </div>
      <div className="footsub__note">
        {status === "done"
          ? "SUBSCRIBED — SEE YOU FRIDAY."
          : status === "error"
          ? errMsg.toUpperCase()
          : "NO MARKETING · UNSUBSCRIBE ANYTIME"}
      </div>
    </form>
  );
}

// ============================================================
// FOOTER
// ============================================================

function Footer() {
  const cols = [
    { h: "01 · PLATFORM", items: [
      { t: "Method", href: "/#platform" },
      { t: "Study types", href: "/#modes" },
    ] },
    { h: "02 · EVIDENCE", items: [
      { t: "Sample reports", href: "/blog/sample-report.html" },
      { t: "Methodology", href: "/blog/index.html" },
      { t: "Blog", href: "/blog/index.html" },
    ] },
    { h: "03 · COMPANY", items: [
      { t: "Contact", href: "/#demo" },
    ] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <NeroLogo />
            <p className="footer__tag">The Evidence Engine for AI-powered research. Every insight traceable to source evidence.</p>
            <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
              <Tag dot>SOC 2 IN PROGRESS</Tag>
              <Tag>GDPR-AWARE</Tag>
            </div>
            <FooterSubscribe />
          </div>
          {cols.map((c) => (
            <div key={c.h} className="footer__col">
              <div className="footer__col-h">{c.h}</div>
              <ul>
                {c.items.map((it) => <li key={it.t}><a href={it.href}>{it.t}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 NEROVIEW · VICTRIXTECH</span>
          <span>NEROVIEW.COM · PLATFORM.NEROVIEW.COM</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// 02 — RECEIPT STRIP. Numbers with receipts, not vibes.
// ============================================================

function ReceiptStrip() {
  const receipts = [
    { stat: "3 days", label: "to a verdict", source: { ref: "STUDY NV-0589 · TIMELINE", body: "Brief approved June 9, report delivered June 12. Median across recent studies: 3 days." } },
    { stat: "256", label: "real people per study", source: { ref: "STUDY NV-0612 · ROSTER", body: "n=256 AI-moderated sessions, 35–55 min each, 4 segments, 3 languages." } },
    { stat: "84%", label: "cheaper than an agency", source: { ref: "NV-0589 · COST MEMO", body: "Same brief quoted at $38k / 8 weeks by a traditional panel agency. NeroView: 3 days." } },
    { stat: "86%", label: "typical confidence", source: { ref: "NV-0612 · INSIGHT 03", body: "Median confidence across insights, computed per insight from clip count, segment spread, and counter-evidence checks." }, align: "right" },
  ];
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="receiptstrip">
          <div className="receiptstrip__label">THE NUMBERS, WITH RECEIPTS — CLICK ONE</div>
          <div className="receiptstrip__row">
            {receipts.map((r) => <ReceiptChip key={r.label} {...r} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 03 — EXHIBIT A: one study, fully traceable
// ============================================================

function ExhibitA() {
  const [active, setActive] = React.useState(0);
  const refs = [React.useRef(null), React.useRef(null), React.useRef(null)];
  React.useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter((e) => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActive(Number(visible[0].target.dataset.beat));
      },
      { rootMargin: "-40% 0px -40% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] }
    );
    refs.forEach((r) => r.current && io.observe(r.current));
    return () => io.disconnect();
  }, []);

  const beats = ["THE MOMENT", "THE PATTERN", "THE DECISION"];
  return (
    <section className="section" id="exhibit-a">
      <div className="container">
        <div className="exhibit__head">
          <div className="eyebrow">EXHIBIT A · STUDY NV-0612</div>
          <h2 className="display display-lg" style={{ marginTop: 16 }}>The clip at 02:14.</h2>
          <p className="body-lg" style={{ marginTop: 16 }}>
            One study, start to verdict. Every step below links back to the one before it.
          </p>
        </div>
        <div className="exhibit__grid">
          <div className="exhibit__rail">
            {beats.map((b, i) => (
              <div key={b} className={"exhibit__rail-item" + (active === i ? " is-active" : "")}>
                <span className="exhibit__rail-n">{String(i + 1).padStart(2, "0")}</span>{b}
              </div>
            ))}
          </div>
          <div className="exhibit__beats">
            <div className="exhibit__beat" data-beat="0" ref={refs[0]}>
              <FigLabel n={1}>THE MOMENT — P-042, 02:14</FigLabel>
              <div className="exhibit__beat-row">
                <div className="card" style={{ padding: 12, flex: "0 0 44%" }}>
                  <VideoTile participant="P-042 · Sarah K." duration="04:32" />
                </div>
                <div className="card" style={{ flex: 1 }}>
                  <Transcript time="02:14" speaker="P-042">
                    "I'd probably look around for a cheaper option here — <span className="transcript__highlight">the pricing page didn't explain what's actually included</span> in the team plan."
                  </Transcript>
                </div>
              </div>
            </div>
            <div className="exhibit__beat" data-beat="1" ref={refs[1]}>
              <FigLabel n={2}>THE PATTERN — 14 CLIPS, 4 SEGMENTS</FigLabel>
              <div className="card">
                <EmotionTimeline moments={[0.12, 0.31, 0.38, 0.46, 0.52, 0.61, 0.74, 0.85]} />
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 12 }}>
                  <Tag dot accent>PRICING CLARITY · 14 CLIPS</Tag>
                  <Tag>MID-MKT SAAS · 9</Tag>
                  <Tag>ENTERPRISE · 5</Tag>
                </div>
              </div>
            </div>
            <div className="exhibit__beat" data-beat="2" ref={refs[2]}>
              <FigLabel n={3}>THE DECISION — SHIPPED TO THE CMO</FigLabel>
              <VerdictCard
                id="NV-0612"
                title="Rewrite the team-plan pricing page before raising prices. Clarity, not cost, is the objection."
                receipts={["86% CONF", "14 CLIPS", "N=48", "4 SEGMENTS"]}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 04 — THE METHOD: Ask → Evidence → Verdict
// ============================================================

function TheMethod() {
  return (
    <section className="section" id="platform">
      <div className="container">
        <div className="eyebrow">THE METHOD</div>
        <h2 className="display display-lg" style={{ marginTop: 16 }}>Ask. Evidence. Verdict.</h2>
        <div className="method__grid">
          <div className="method__step">
            <FigLabel n={1}>ASK</FigLabel>
            <h3 className="method__h">The AI runs the interviews.</h3>
            <p className="method__p">Adaptive, agency-grade moderation across text, voice, and video. It probes; it doesn't read a script.</p>
            <div className="card">
              <div className="method__chat">
                <p className="method__q">"You said 'it works, mostly' — what breaks?"</p>
                <p className="method__a">"Honestly… the export. Every Friday."</p>
              </div>
            </div>
          </div>
          <div className="method__step">
            <FigLabel n={2}>EVIDENCE</FigLabel>
            <h3 className="method__h">Every moment becomes a receipt.</h3>
            <p className="method__p">Clips, transcripts, emotion signals, and segment patterns — indexed and traceable.</p>
            <div className="card">
              <EmotionTimeline moments={[0.18, 0.42, 0.61, 0.85]} />
              <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
                <Tag dot accent>HESITATION · 02:14</Tag>
                <Tag>EXPORT · 9 MENTIONS</Tag>
              </div>
            </div>
          </div>
          <div className="method__step">
            <FigLabel n={3}>VERDICT</FigLabel>
            <h3 className="method__h">You get a decision, not a dashboard.</h3>
            <p className="method__p">Reports that close meetings. Every claim carries its evidence trail.</p>
            <VerdictCard
              id="NV-0589"
              title="Hold the launch. Fix onboarding step 3 first."
              receipts={["91% CONF", "9 CLIPS", "N=36"]}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 05 — CAPABILITIES, AS STUDY TYPES (artifacts, not icons)
// ============================================================

function StudyTypes() {
  const types = [
    { id: "modes-interviews", label: "INTERVIEWS", techTag: "AI-MODERATED", sub: "Get interview depth without waiting weeks.", h: "Depth at survey speed.", artifact: (
      <div>
        <div className="card__label"><span className="card__label-dot" /> AI-MODERATED INTERVIEW · P-042</div>
        <div className="method__chat" style={{ marginTop: 12 }}>
          <p className="method__q">NeroView: "You paused on the team plan — what made you hesitate?"</p>
          <p className="method__a">P-042: "I couldn't tell what 'team' actually includes. I'd want to ask someone before I paid."</p>
        </div>
      </div>) },
    { id: "modes-ux", label: "UX TESTS", techTag: "AGENTIC RESEARCH MODE", sub: "Catch the friction before it becomes a cancellation.", h: "Watch the struggle, not the star rating.", artifact: (
      <div><EmotionTimeline moments={[0.22, 0.48, 0.71]} height={44} /><div style={{ marginTop: 10 }}><Tag dot accent>RAGE-CLICK · 01:47</Tag></div></div>) },
    { id: "modes-focus", label: "FOCUS GROUPS", techTag: "SYNTHETIC PANEL", sub: "Kill the weak ideas before you spend a dollar recruiting.", h: "Pressure-test before you recruit.", artifact: (
      <div className="studytype__chips"><Tag>SEGMENT A — SKEPTICAL</Tag><Tag>SEGMENT B — PRICE-ANCHORED</Tag><Tag dot accent>CONSENSUS: NAMING CONFUSES</Tag></div>) },
    { id: "modes-concept", label: "CONCEPT TESTS", techTag: "CONCEPT STUDIES", sub: "Know which variant wins before engineering builds the wrong one.", h: "Verdicts on the thing itself.", artifact: (
      <InsightCard title="Variant B wins on clarity, loses on trust." clips={11} participants={32} segments={4} confidence={0.79} />) },
  ];
  return (
    <section className="section" id="modes">
      <div className="container">
        <div className="eyebrow">STUDY TYPES</div>
        <h2 className="display display-lg" style={{ marginTop: 16 }}>Four ways to ask.<br />One evidence trail.</h2>
        <div className="studytypes__grid">
          {types.map((t) => (
            <div key={t.id} className="studytype card">
              <span className="studytype__tech">{t.techTag}</span>
              <h3 className="studytype__label-big">{t.label}</h3>
              <p className="studytype__h">{t.h}</p>
              <p className="studytype__sub">{t.sub}</p>
              <div className="studytype__artifact">{t.artifact}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 06 — DASHBOARD VS. DECISION (the one dark section)
// ============================================================

// "What you have" = a believable but undifferentiated BI dashboard (noise).
const DASH_TILES = [
  { type: "kpi", n: "12,481", l: "DAU", dir: "up" },
  { type: "bars", l: "traffic", v: [40, 72, 55, 90, 34, 66, 50] },
  { type: "gauge", n: "63%", l: "uptime", pct: 63 },
  { type: "bars", l: "sessions", v: [80, 45, 62, 30, 75, 52, 64] },
  { type: "kpi", n: "47", l: "NPS", dir: "up" },
  { type: "bars", l: "funnel", v: [22, 44, 60, 95, 70, 48, 33] },
  { type: "gauge", n: "3.2%", l: "CVR", pct: 32, dir: "down" },
  { type: "spark", l: "retention", v: [20, 34, 28, 52, 44, 66, 58, 78] },
  { type: "kpi", n: "18,402", l: "events", dir: "up" },
];

function DashboardVsDecision() {
  return (
    <section className="section section--ink">
      <div className="container">
        <div className="dvd__grid">
          <div className="dvd__noise">
            <div className="dvd__noise-label">WHAT YOU HAVE</div>
            <div className="dvd__dash" aria-hidden="true">
              {DASH_TILES.map((t, i) => (
                <div key={i} className="dvd__tile">
                  {t.type === "kpi" && (
                    <div className="dvd__kpi-n">{t.n}<span className="dvd__arrow">{t.dir === "down" ? "▼" : "▲"}</span></div>
                  )}
                  {t.type === "bars" && (
                    <div className="dvd__bars">{t.v.map((h, j) => <i key={j} style={{ height: h + "%" }} />)}</div>
                  )}
                  {t.type === "spark" && (
                    <svg className="dvd__spark" viewBox="0 0 100 34" preserveAspectRatio="none">
                      <polyline points={t.v.map((y, j) => `${(j / (t.v.length - 1)) * 100},${34 - (y / 100) * 30}`).join(" ")} fill="none" stroke="currentColor" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
                    </svg>
                  )}
                  {t.type === "gauge" && (
                    <div className="dvd__gauge">
                      <svg viewBox="0 0 36 36">
                        <circle className="dvd__gauge-track" cx="18" cy="18" r="15" pathLength="100" />
                        <circle className="dvd__gauge-val" cx="18" cy="18" r="15" pathLength="100" style={{ strokeDasharray: `${t.pct} 100` }} />
                      </svg>
                      <span className="dvd__gauge-n">{t.n}</span>
                    </div>
                  )}
                  <div className="dvd__tile-label">{t.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="dvd__verdict">
            <div className="dvd__noise-label" style={{ color: "var(--accent-2)" }}>WHAT YOU NEED</div>
            <h2 className="dvd__h">Dashboards open meetings.<br />Verdicts close them.</h2>
            <div className="dvd__receipts">
              <span>86% CONF</span><span>14 CLIPS</span><span>N=48</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 07 — THE REPORT, OPEN
// ============================================================

function ReportOpen() {
  const [cite, setCite] = React.useState(null); // which citation is open
  const cites = {
    c1: { ref: "CLIP 02:14 · P-042", body: "“…the pricing page didn’t explain what’s actually included in the team plan.”" },
    c2: { ref: "PATTERN · 14 CLIPS / 4 SEGMENTS", body: "Pricing-clarity hesitation appears in 14 of 48 sessions, concentrated in mid-market SaaS (9) and enterprise (5)." },
  };
  return (
    <section className="section" id="report">
      <div className="container">
        <div className="eyebrow">EXHIBIT B · THE DELIVERABLE</div>
        <h2 className="display display-lg" style={{ marginTop: 16 }}>Read a real report.</h2>
        <p className="body-lg" style={{ marginTop: 16 }}>Not a dashboard export. A document with a spine — every claim cited. This is a live page from one. Click a citation.</p>
        <div className="report-open card" style={{ marginTop: 48 }}>
          <div className="report-open__head">
            <span className="report-open__id">NV-0612 · PRICING PAGE STUDY · P.3 OF 14</span>
            <Confidence pct={0.86} />
          </div>
          <h3 className="report-open__h">Finding 03 — Clarity, not cost, is the objection.</h3>
          <p className="report-open__body">
            Participants did not balk at the number. They balked at not knowing what the number buys.
            Hesitation clusters at the team-plan comparison table
            <button className={"report-open__cite" + (cite === "c1" ? " is-open" : "")} onClick={() => setCite(cite === "c1" ? null : "c1")} aria-expanded={cite === "c1"}>[CLIP 02:14]</button>
            and recurs across segments
            <button className={"report-open__cite" + (cite === "c2" ? " is-open" : "")} onClick={() => setCite(cite === "c2" ? null : "c2")} aria-expanded={cite === "c2"}>[14 CLIPS]</button>.
          </p>
          {cite && (
            <div className="report-open__evidence">
              <div className="report-open__evidence-ref">{cites[cite].ref}</div>
              <div className="report-open__evidence-body">{cites[cite].body}</div>
            </div>
          )}
          <div className="report-open__foot">
            <a className="btn btn--primary" href="/blog/sample-report.html">Get the full report <span className="btn-arrow">&rarr;</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 08 — WORD FROM THE ROOM (testimonial slots + respondent proof)
// ============================================================

// Real, approved customer testimonials (verbatim, from the company deck —
// cleared for public display: name + photo + quote). Do not reword.
// Photos live in /assets and are mapped per person.
const NAMED_QUOTES = [
  {
    quote: "NeroView will get you the data you're looking for, along with 'so what' insights that really matter. They'll be fast and thorough. I was really impressed with their reach and ability to preemptively make sense of the data even though they weren't native experts in our field. Smart people!",
    name: "Jeff Epstein",
    role: "Functional Product Marketer · Boutique Consulting",
    photo: "assets/jeff-epstein.jpg",
  },
  {
    quote: "I admittedly went into this with equal portions of curious and dubious, but after looking through the results and dipping into the actual answers, I am very impressed. A great deal of nuance was captured that adds depth to the traditional “rate these 50 statements on a scale of 1–5”.",
    name: "Marketing Director",
    role: "Jazwares",
    photo: "assets/jazwares-md.jpg",
  },
  {
    quote: "NeroView was able to take the questions I had and things I wanted to test and synthesize them down into a group of really great questions that yielded some really impressive and unexpected insights. I will definitely be using NeroView again.",
    name: "Michael Rothwell",
    role: "Founder & CEO · Acreditex",
    photo: "assets/michael-rothwell.jpg",
  },
  {
    quote: "Working with NeroView, I felt like I had a strategic partner. Ronny and his team were proactive, provided clear and helpful suggestions, and were creative in interpreting the output. The raw data acted as the basis for actionable insights we provided to our client. I will definitely use NeroView again and consider them a preferred research partner for future studies.",
    name: "Seth Greenwald",
    role: "VP / NY Managing Director · Advention BP",
    photo: "assets/seth-greenwald.jpg",
  },
  {
    quote: "We worked with NeroView to test our website messaging — old site versus new. They guided us through every step, and within less than a week we already had the results. Even a small sample gave us feedback that let us fine-tune our messaging with confidence. They delivered on their promise: faster, more affordable, and higher-quality insights than traditional research.",
    name: "Natasha Yuhjtman",
    role: "Founder & CEO · MeetGia.AI",
    photo: "assets/natasha-yuhjtman.jpg",
  },
  {
    quote: "I see great potential for capabilities of this nature to better guide companies in their ad material development and understand more of the ‘why’ behind campaign success or lack of. Furthermore, this type of data not only provides indicators of how well an ad is received, but points to which aspects of campaigns can draw, excite, etc. — thus informing future campaign development.",
    name: "Amanda Buonopane",
    role: "Director, Strategic Insights · Rich Products",
    photo: "assets/amanda-buonopane.jpg",
  },
];
// Set to an approved illustrative participant still (treated image URL) to show
// a face in the evidence frame. null => existing CSS silhouette. Never an invented face.
const PARTICIPANT_FACE_SRC = null;

function WordFromRoom() {
  return (
    <section className="section" id="customers">
      <div className="container">
        <div className="eyebrow">WORD FROM THE ROOM</div>

        {/* Band 1 — named, real customers: real photo + real quote */}
        <div className="room__named-grid reveal">
          {NAMED_QUOTES.map((c) => (
            <div key={c.name + c.role} className="room__quote card">
              <div className="room__mark" aria-hidden="true">“</div>
              <p className="room__q">{c.quote}</p>
              <div className="room__person">
                <img className="room__avatar" src={c.photo} alt={c.name} loading="lazy" />
                <div className="room__attr-named">{c.name}<span className="room__attr-role">{c.role}</span></div>
              </div>
            </div>
          ))}
        </div>

        <div className="room__divider" />

        {/* Band 2 — the other side of the interview: illustrative participant frame */}
        <div className="room__participant reveal">
          <div className="figlabel"><span className="figlabel__n">FROM THE OTHER SIDE</span><span className="figlabel__t">OF THE INTERVIEW</span></div>
          <div className="room__participant-row">
            <div className="room__participant-frame">
              <VideoTile participant="P-042" duration="02:14" imageSrc={PARTICIPANT_FACE_SRC} imageAlt="" />
              <div className="room__illus-label">ILLUSTRATIVE PARTICIPANT FRAME</div>
            </div>
            <div className="room__participant-quote">
              <p className="room__q">"It felt like talking to a person who was actually listening."</p>
              <div className="room__attr-mono">STUDY PARTICIPANT · POST-SESSION SURVEY</div>
            </div>
          </div>
        </div>

        <div className="room__trust">
          <Tag dot>SOC 2 IN PROGRESS</Tag>
          <Tag>GDPR-AWARE</Tag>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CALENDLY — inline scheduler (the conversion point)
// ============================================================

const CALENDLY_URL = "https://calendly.com/ronny-kaynan/30min";

function CalendlyInline() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const CSS_HREF = "https://assets.calendly.com/assets/external/widget.css";
    const JS_SRC = "https://assets.calendly.com/assets/external/widget.js";

    if (!document.querySelector(`link[href="${CSS_HREF}"]`)) {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = CSS_HREF;
      document.head.appendChild(link);
    }

    const init = () => {
      if (!window.Calendly || !ref.current) return;
      ref.current.innerHTML = ""; // guard against double-init (StrictMode / re-mount)
      window.Calendly.initInlineWidget({ url: CALENDLY_URL, parentElement: ref.current });
    };

    if (window.Calendly) {
      init();
      return;
    }
    let script = document.querySelector(`script[src="${JS_SRC}"]`);
    if (script) {
      script.addEventListener("load", init, { once: true });
    } else {
      script = document.createElement("script");
      script.src = JS_SRC;
      script.async = true;
      script.addEventListener("load", init, { once: true });
      document.body.appendChild(script);
    }
  }, []);

  return (
    <div className="calendly-embed" id="demo">
      <div ref={ref} className="calendly-embed__widget" aria-label="Schedule a NeroView demo" />
      <noscript>
        <a className="btn btn--primary btn--lg" href={CALENDLY_URL} target="_blank" rel="noopener">
          Book a demo on Calendly <span className="btn-arrow">&rarr;</span>
        </a>
      </noscript>
    </div>
  );
}

// ============================================================
// 09 — CLOSE
// ============================================================

function CloseCTA({ onCTA }) {
  return (
    <section className="section" id="close">
      <div className="container" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ display: "inline-flex" }}>NEXT DECISION</div>
        <h2 className="display display-xl" style={{ marginTop: 24 }}>
          The verdict on your desk<br /><span style={{ color: "var(--accent)" }}>by Friday.</span>
        </h2>
        <p className="close__lede">
          Pick a time and we'll run the evidence trail on a real study of yours —
          no slides, no demo theater.
        </p>
        <CalendlyInline />
        <button className="close__signin" onClick={() => onCTA && onCTA("signin")}>
          Already a customer? Sign in to the platform &rarr;
        </button>
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, ReceiptStrip, ExhibitA, TheMethod, StudyTypes,
  DashboardVsDecision, ReportOpen, WordFromRoom, CloseCTA, Footer,
});