/* global React, Tag, CompanyLogo, LogoMarks, Confidence, InteractiveDemo, NeroLogo, NeroMark */

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

function Nav({ onCTA }) {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <NeroLogo />
        <div className="nav__links">
          <a className="nav__link" href="#platform">Platform</a>
          <a className="nav__link" href="#modes">Research Modes</a>
          <a className="nav__link" href="#use-cases">Use Cases</a>
          <a className="nav__link" href="#customers">Customers</a>
          <a className="nav__link" href="blog/index.html">Resources</a>
          <a className="nav__link" href="#trust">Security &amp; Ethics</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>
      </div>
    </nav>
  );
}

// ============================================================
// SOCIAL PROOF / STATS BAR
// ============================================================

function SocialProof() {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="proofbar">
          <div className="proofbar__inner">
            <div className="proofbar__label">RESEARCH TEAMS USING NEROVIEW</div>
            <div className="proofbar__logos">
              <CompanyLogo name="Northwind" mark={LogoMarks.triangle} />
              <CompanyLogo name="Octant" mark={LogoMarks.dot} />
              <CompanyLogo name="Marlow" mark={LogoMarks.bars} />
              <CompanyLogo name="Verra" mark={LogoMarks.rings} />
              <CompanyLogo name="Halcyon" mark={LogoMarks.slash} />
              <CompanyLogo name="Stoneridge" mark={LogoMarks.square} />
            </div>
          </div>
        </div>

        <div className="proofbar__stats">
          <Stat value="120k" sup="+" label="Interviews moderated" />
          <Stat value="35" label="Languages supported" />
          <Stat value="4.2" sup="d avg" label="Question to executive PDF" />
          <Stat value="100" sup="%" label="Source-linked AI outputs" />
        </div>
      </div>
    </section>
  );
}

function Stat({ value, sup, label }) {
  return (
    <div className="proofbar__stat">
      <div className="proofbar__stat-value">
        {value}{sup && <sup>{sup}</sup>}
      </div>
      <div className="proofbar__stat-label">{label}</div>
    </div>
  );
}

// ============================================================
// PROBLEM SECTION
// ============================================================

function ProblemSection() {
  const pains = [
    "Recruiting takes weeks, not hours.",
    "Interviews generate hours of footage nobody watches.",
    "UX tests reveal problems too late in the cycle.",
    "Surveys tell you what — never why.",
    "Reports arrive after the decision was already made.",
    "AI summaries are hard to trust without source evidence.",
  ];

  return (
    <section className="section section--light">
      <div className="container">
        <div className="problem__grid">
          <div>
            <div className="eyebrow">THE WORKFLOW PROBLEM</div>
            <h2 className="display display-lg" style={{ marginTop: 20 }}>
              Research isn't broken.<br/>
              <span style={{ color: "var(--fg-muted)" }}>The workflow around it is.</span>
            </h2>
            <p className="body-lg" style={{ marginTop: 28 }}>
              Every research team feels the same drag: time disappears between question and decision. NeroView compresses the entire loop — from raw signal to defensible report — without sacrificing the evidence.
            </p>
          </div>
          <ul className="problem__list">
            {pains.map((p, i) => (
              <li key={i} className="problem__item">
                <span className="problem__item-num">{String(i + 1).padStart(2, "0")} / 06</span>
                <span className="problem__item-text problem__item-strike">{p}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// EVIDENCE ENGINE PIPELINE
// ============================================================

function EvidenceEngine() {
  const steps = [
    { n: "01", t: "Ask",          d: "Frame the question" },
    { n: "02", t: "Recruit",      d: "Real panel or synthetic" },
    { n: "03", t: "Interview",    d: "AI-moderated · multilingual" },
    { n: "04", t: "Detect",       d: "Moments that matter", accent: true },
    { n: "05", t: "Cluster",      d: "Patterns by segment", accent: true },
    { n: "06", t: "Report",       d: "Executive-ready PDF" },
    { n: "07", t: "Prove",        d: "Trace every claim", accent: true },
  ];

  return (
    <section className="section" id="platform">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">THE EVIDENCE ENGINE</div>
            <h2 className="s-head__title">
              The full loop from customer signal to <em style={{ fontStyle: "normal", color: "var(--accent)" }}>defensible</em> decision.
            </h2>
          </div>
          <p className="s-head__desc">
            NeroView captures customer signals across every research mode, detects the moments that matter, clusters patterns by segment, and assembles executive-ready reports your team can defend in the room.
          </p>
        </div>

        <div className="pipeline">
          <div className="pipeline__steps">
            {steps.map((s) => (
              <div key={s.n} className={`pipeline__step ${s.accent ? "pipeline__step--accent" : ""}`}>
                <div className="pipeline__step-num">{s.n}</div>
                <h4 className="pipeline__step-title">{s.t}</h4>
                <div className="pipeline__step-desc">{s.d}</div>
              </div>
            ))}
          </div>
          <div className="pipeline__caption">
            <span>SIGNAL → MOMENT → PATTERN → DECISION</span>
            <span>EVERY STEP SOURCE-LINKED</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// RESEARCH MODES (4)
// ============================================================

function ResearchModes() {
  const modes = [
    {
      n: "Mode 01",
      tag: "QUALITATIVE",
      title: "AI-Moderated Interviews",
      desc: "Go deep with hundreds of participants at once. Dynamic follow-ups, voice or text, 35 languages, resumable sessions, automatic synthesis.",
      bullets: ["Voice + text", "35 langs", "Auto-synthesis", "Resumable"],
    },
    {
      n: "Mode 02",
      tag: "AGENTIC",
      title: "Agentic UX Testing",
      desc: "Let AI agents test your live site before real users suffer through it. Friction detection, automated critique, regression monitoring across releases.",
      bullets: ["Real tasks", "Friction map", "Task scoring", "Drift watch"],
    },
    {
      n: "Mode 03",
      tag: "REACTIVE",
      title: "Concept &amp; Video Testing",
      desc: "Measure what people feel, not only what they say. Reaction analysis, attention timelines, qualitative follow-up, segment comparison.",
      bullets: ["Emotion signals", "Attention curve", "Quote capture", "Segments"],
    },
    {
      n: "Mode 04",
      tag: "EXPLORATORY",
      title: "Synthetic Focus Groups",
      desc: "Explore hypotheses and sharpen studies before going live with real participants. Persona debate, bias checks, fast iteration.",
      bullets: ["Persona debate", "Hypothesis gen", "Bias audit", "Pre-flight"],
    },
  ];

  return (
    <section className="section section--light" id="modes">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">RESEARCH MODES</div>
            <h2 className="s-head__title">
              One platform. Four ways to understand your audience.
            </h2>
          </div>
          <p className="s-head__desc">
            Pick one mode or run them in concert. Synthetic exploration sharpens the question. Human research validates what matters. Every output traces back to source evidence.
          </p>
        </div>

        <div className="modes__grid">
          {modes.map((m) => (
            <article key={m.n} className="mode">
              <div className="mode__num">
                <span>{m.n}</span>
                <span className="mode__num-tag">{m.tag}</span>
              </div>
              <h3 className="mode__title" dangerouslySetInnerHTML={{ __html: m.title }} />
              <p className="mode__desc">{m.desc}</p>
              <div className="mode__bullets">
                {m.bullets.map((b, i) => <Tag key={i}>{b}</Tag>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// INTERACTIVE WOW DEMO
// ============================================================

function DemoSection() {
  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">TRY IT LIVE</div>
            <h2 className="s-head__title">
              Watch the platform turn a question into evidence.
            </h2>
          </div>
          <p className="s-head__desc">
            Three live demos — audit a real URL, generate a study plan, or scrub a concept-test reaction. The full platform does this with real participants, real clips, and source-linked exports.
          </p>
        </div>
        <div style={{ marginTop: 32 }}>
          <InteractiveDemo />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SAMPLE REPORT
// ============================================================

function SampleReport() {
  const toc = [
    { n: "01", t: "Executive summary", active: true },
    { n: "02", t: "Key findings" },
    { n: "03", t: "Pricing-page friction" },
    { n: "04", t: "Onboarding friction" },
    { n: "05", t: "Trust signals" },
    { n: "06", t: "Segment differences" },
    { n: "07", t: "Recommendations" },
    { n: "08", t: "Source evidence" },
    { n: "09", t: "Methodology" },
  ];

  return (
    <section className="section section--light">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">SAMPLE OUTPUT</div>
            <h2 className="s-head__title">
              See the report your stakeholders actually want.
            </h2>
          </div>
          <p className="s-head__desc">
            Executive summary, key findings, supporting quotes, attention timelines, segment comparison, recommended actions. Export to PDF, PPTX, CSV, or push to your tools.
          </p>
        </div>

        <div className="report">
          <aside className="report__side">
            <div className="report__side-head">CONTENTS · 09 SECTIONS</div>
            <ul className="report__toc">
              {toc.map((s) => (
                <li key={s.n} className={s.active ? "active" : ""}>
                  <span><span className="report__toc-num">{s.n}</span> &nbsp; {s.t}</span>
                  {s.active && <span className="report__toc-num" style={{ color: "var(--accent)" }}>●</span>}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 32 }}>
              <div className="report__side-head">EXPORT</div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                <Tag>PDF</Tag><Tag>PPTX</Tag><Tag>CSV</Tag><Tag>Webhook</Tag>
              </div>
            </div>
          </aside>

          <div className="report__main">
            <div className="card__label"><span className="card__label-dot" /> EXECUTIVE SUMMARY · v3 FINAL</div>
            <h3 className="report__title" style={{ marginTop: 8 }}>
              Pricing-page clarity is the #1 driver of mid-funnel churn for mid-market SaaS buyers.
            </h3>
            <div className="report__sub">
              <span>48 participants</span>
              <span>3 segments</span>
              <span>21 clips</span>
              <span>Sep 12 → Sep 24, 2026</span>
            </div>

            <div className="report__findings">
              <div className="finding finding--accent">
                <div className="finding__head">
                  <span>FINDING 01</span>
                  <Tag dot accent>HIGH IMPACT</Tag>
                </div>
                <h4 className="finding__title">"What's included" is unclear before the CTA</h4>
                <p className="finding__quote">"I didn't know what I was paying for so I closed the tab and never came back."</p>
                <div className="finding__meta">
                  <span>14 clips</span><span>8 participants</span><span>87% confidence</span>
                </div>
              </div>

              <div className="finding">
                <div className="finding__head"><span>FINDING 02</span><Tag>MED IMPACT</Tag></div>
                <h4 className="finding__title">Team-plan tier triggers most hesitation</h4>
                <p className="finding__quote">"I'd want to talk to someone before committing to that one."</p>
                <div className="finding__meta"><span>9 clips</span><span>6 participants</span><span>74%</span></div>
              </div>

              <div className="finding">
                <div className="finding__head"><span>FINDING 03</span><Tag>MED IMPACT</Tag></div>
                <h4 className="finding__title">Trust signals work — when visible</h4>
                <p className="finding__quote">"Seeing the logos right above the CTA was reassuring."</p>
                <div className="finding__meta"><span>6 clips</span><span>5 participants</span><span>69%</span></div>
              </div>

              <div className="finding">
                <div className="finding__head"><span>FINDING 04</span><Tag>LOW IMPACT</Tag></div>
                <h4 className="finding__title">Annual toggle is overlooked</h4>
                <p className="finding__quote">"I didn't even see there was a yearly option."</p>
                <div className="finding__meta"><span>4 clips</span><span>3 participants</span><span>62%</span></div>
              </div>
            </div>

            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn--primary">Download sample report (PDF)</button>
              <button className="btn btn--ghost">Open in platform</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TRUST / ETHICS
// ============================================================

function TrustSection() {
  const items = [
    { i: "🔒", t: "Source-linked AI outputs", d: "Every recommendation traces back to clips, quotes, behaviors, and segment patterns. Nothing is unsourced." },
    { i: "✓",  t: "Consent-first participants", d: "Every participant flow surfaces consent, scope, and right-to-delete before video, voice, or behavioral data is captured." },
    { i: "⚙",  t: "Human-reviewable analysis", d: "Researchers can edit, challenge, or reject any AI cluster. Outputs are defensible, not magical." },
    { i: "EU", t: "GDPR-aware workflows", d: "Region-pinned storage, deletion controls, audit logs, and consent-first participant data handling." },
    { i: "•",  t: "Role-based access", d: "Granular permissions across study, segment, clip, and export levels. Client portal access scoped per study." },
    { i: "⚖",  t: "Bias &amp; fairness checks", d: "Synthetic-versus-human parity scoring, demographic skew flags, and audit-friendly methodology cards." },
  ];

  return (
    <section className="section" id="trust">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">SECURITY · ETHICS · DEFENSIBILITY</div>
            <h2 className="s-head__title">
              Built for research you can defend.
            </h2>
          </div>
          <p className="s-head__desc">
            AI accelerates research only if buyers, stakeholders, and regulators can trust the output. NeroView is engineered around traceability, consent, and human review.
          </p>
        </div>

        <div className="trust__grid">
          {items.map((c, i) => (
            <div key={i} className="trust__cell">
              <div className="trust__cell-icon" style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{c.i}</div>
              <h4 className="trust__cell-title" dangerouslySetInnerHTML={{ __html: c.t }} />
              <p className="trust__cell-desc">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TESTIMONIALS
// ============================================================

function Testimonials() {
  const quotes = [
    {
      q: "We compressed a 6-week consumer study into 4 days, and every recommendation in the deck was clickable back to a real participant clip.",
      who: "Head of Insights",
      where: "Mid-market CPG · 200 person research org",
      studyType: "VIDEO + INTERVIEW STUDY · 48 PARTICIPANTS",
    },
    {
      q: "Stakeholders stopped pushing back on AI summaries the moment we could show them the source quotes behind every claim.",
      who: "Director, UX Research",
      where: "B2B SaaS · series C",
      studyType: "AGENTIC UX AUDIT · 12 CRITICAL FLOWS",
    },
    {
      q: "Synthetic focus groups let us kill three bad messaging angles before spending a dollar on recruiting. The fourth one tested through the roof.",
      who: "VP Brand",
      where: "Consumer fintech",
      studyType: "SYNTHETIC + CONCEPT TEST",
    },
  ];
  return (
    <section className="section section--light" id="customers">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">CUSTOMERS</div>
            <h2 className="s-head__title">
              Research teams that already stopped guessing.
            </h2>
          </div>
          <p className="s-head__desc">
            Quotes shared with permission. Names redacted where requested. Sample report and full case studies available on request.
          </p>
        </div>
        <div style={{ marginTop: 24 }}>
          {quotes.map((t, i) => (
            <div className="tquote" key={i}>
              <p className="tquote__text">{t.q}</p>
              <div className="tquote__attr">
                <strong>{t.who}</strong>
                {t.where}<br />
                <span style={{ color: "var(--accent)" }}>{t.studyType}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// USE CASES
// ============================================================

function UseCases() {
  const cases = [
    { l: "PRODUCT", t: "Product discovery", d: "Run rapid generative interviews to validate problem-space before committing to a roadmap.", c: 12 },
    { l: "DESIGN",  t: "UX testing &amp; audits", d: "Surface friction across real flows with agentic critique and human follow-up.", c: 8 },
    { l: "GROWTH",  t: "Website conversion research", d: "Diagnose drop-off with combined behavioral + qualitative evidence.", c: 9 },
    { l: "BRAND",   t: "Message &amp; concept testing", d: "Test claim variants and creative against real reactions before launch.", c: 6 },
    { l: "VIDEO",   t: "Video &amp; ad testing", d: "Attention curves, emotion signals, and qualitative follow-up in one study.", c: 7 },
    { l: "BRAND",   t: "Brand perception studies", d: "Track how positioning lands across segments and over time.", c: 5 },
    { l: "EARLY",   t: "Synthetic early-stage research", d: "Stress-test direction before spending recruiting budget.", c: 11 },
    { l: "GLOBAL",  t: "Multilingual research", d: "35 languages, locale-aware moderation, comparable cross-market synthesis.", c: 4 },
    { l: "AGENCY",  t: "Client-ready agency research", d: "Branded portals, evidence trails, and exec deliverables your clients can defend.", c: 6 },
  ];
  return (
    <section className="section" id="use-cases">
      <div className="container">
        <div className="s-head">
          <div>
            <div className="eyebrow">USE CASES</div>
            <h2 className="s-head__title">
              Built for every place a decision needs evidence.
            </h2>
          </div>
          <p className="s-head__desc">
            Each use case includes a methodology guide, study template, sample report, and recommended export. Every output is source-linked.
          </p>
        </div>

        <div className="uc__grid">
          {cases.map((c, i) => (
            <a key={i} className="uc" href="#">
              <div className="uc__label">{c.l}</div>
              <h3 className="uc__title" dangerouslySetInnerHTML={{ __html: c.t }} />
              <p className="uc__desc">{c.d}</p>
              <div className="uc__arrow">{c.c} sample reports →</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================

function FinalCTA({ onCTA }) {
  return (
    <section className="finalcta section--light">
      <div className="finalcta__bg" />
      <div className="container finalcta__inner">
        <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>NEXT DECISION</div>
        <h2 className="finalcta__title" style={{ marginTop: 24 }}>
          Make your next decision<br/>
          <span style={{ color: "var(--accent)" }}>with evidence.</span>
        </h2>
        <p className="finalcta__sub">
          Run interviews, UX tests, concept studies, and synthetic exploration in one AI-powered research platform. Every claim sourced. Every recommendation defensible.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="btn btn--primary btn--lg" onClick={() => onCTA && onCTA("demo")}>
            Get a demo <span className="btn-arrow">→</span>
          </button>
          <button className="btn btn--ghost btn--lg" onClick={() => onCTA && onCTA("signin")}>Sign in to platform</button>
        </div>
      </div>
    </section>
  );
}

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

function Footer() {
  const cols = [
    { h: "Platform", items: ["Overview", "Research modes", "Integrations", "Security", "Pricing"] },
    { h: "Modes",    items: ["AI Interviews", "Agentic UX Testing", "Concept & Video", "Synthetic Focus Groups"] },
    { h: "Resources",items: ["Sample reports", "Methodology", "Blog", "Help center", "Changelog"] },
    { h: "Company",  items: ["About", "Customers", "Careers", "Contact", "Press"] },
  ];
  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>
          </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}><a href="#">{it}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 NEROVIEW · VICTRIXTECH</span>
          <span>NEROVIEW.COM · PLATFORM.NEROVIEW.COM</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, SocialProof, ProblemSection, EvidenceEngine, ResearchModes,
  DemoSection, SampleReport, TrustSection, Testimonials, UseCases,
  FinalCTA, Footer,
});