/* global React, VideoTile, EmotionTimeline, Transcript, Confidence, InsightCard, Tag */
const { useMemo: _useMemo } = React;

// ============================================================
// HEADLINE OPTIONS
// ============================================================

const HEADLINES = {
  signals: {
    h: ["From customer signals", "to confident decisions."],
    accent: 1, // which line gets the accent treatment
  },
  receipts: {
    h: ["AI research,", "with receipts."],
    accent: 1,
  },
  mean: {
    h: ["See what customers", "really mean."],
    accent: 1,
  },
  evidence: {
    h: ["Every insight", "has evidence."],
    accent: 1,
  },
  watch: {
    h: ["Watch less.", "Understand more."],
    accent: 1,
  },
};

// ============================================================
// HERO COMPONENT
// ============================================================

function Hero({ tweaks, onCTA }) {
  const headline = HEADLINES[tweaks.headline] || HEADLINES.signals;

  return (
    <section className="hero">
      <div className="hero__bg-grid" />
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="eyebrow">EVIDENCE-BACKED · AI RESEARCH</div>
            <h1 className="display display-xl" style={{ marginTop: 24 }}>
              {headline.h.map((line, i) => (
                <div key={i} style={{ color: i === headline.accent ? "var(--fg)" : "var(--fg-muted)" }}>
                  {line}
                </div>
              ))}
            </h1>
            <p className="hero__sub">
              NeroView runs AI-powered interviews, UX tests, synthetic focus groups, and concept studies — then turns every customer moment into <strong>evidence-backed decisions</strong>.
            </p>
            <div className="hero__ctas">
              <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
              </button>
            </div>
            <div className="hero__trustline">
              <span className="hero__trustline-dot" />
              EVERY INSIGHT TRACEABLE TO QUOTES, CLIPS &amp; SOURCE EVIDENCE
            </div>
          </div>

          <div className="hero__visual">
            <HeroVisual variant={tweaks.heroVariant} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HERO VISUAL VARIANTS
// ============================================================

function HeroVisual({ variant }) {
  if (variant === "constellation") return <HeroConstellation />;
  if (variant === "pipeline") return <HeroPipelineViz />;
  if (variant === "report") return <HeroReportEmerging />;
  return <HeroComposed />;
}

// --- variant A: composed product mockup with connector lines
function HeroComposed() {
  return (
    <div className="heroviz">
      {/* Video tile, top-left */}
      <div style={{ position: "absolute", top: "0%", left: "0%", width: "62%" }}>
        <div className="card" style={{ padding: 12 }}>
          <VideoTile participant="P-042 · Sarah K." duration="04:32" />
          <div style={{ marginTop: 10, display: "flex", gap: 6, flexWrap: "wrap" }}>
            <Tag dot accent>HESITATION · 02:14</Tag>
            <Tag>Mid-mkt SaaS</Tag>
          </div>
        </div>
      </div>

      {/* Transcript card, mid-right */}
      <div style={{ position: "absolute", top: "8%", right: "0%", width: "48%" }}>
        <div className="card">
          <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>

      {/* Emotion timeline, middle */}
      <div style={{ position: "absolute", top: "44%", left: "8%", right: "12%" }}>
        <div className="card">
          <EmotionTimeline moments={[0.18, 0.42, 0.61, 0.85]} />
        </div>
      </div>

      {/* Insight card, bottom */}
      <div style={{ position: "absolute", bottom: "0%", left: "0%", width: "92%" }}>
        <InsightCard
          accent
          title="Pricing-page clarity drives mid-funnel churn"
          clips={14}
          participants={8}
          segments={3}
          confidence={0.86}
        >
          <p style={{ fontSize: 13, color: "var(--fg-muted)", lineHeight: 1.5, margin: "0 0 4px" }}>
            Across 8 mid-market SaaS participants, hesitation spiked when the pricing page failed to surface "what's included" before the CTA.
          </p>
        </InsightCard>
      </div>

      {/* connector lines */}
      <svg className="heroviz__connector" viewBox="0 0 100 110" preserveAspectRatio="none">
        <defs>
          <linearGradient id="hcon" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.6" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.15" />
          </linearGradient>
        </defs>
        <path d="M 40 32 C 55 36, 70 30, 78 28" stroke="url(#hcon)" strokeWidth="0.4" fill="none" strokeDasharray="0.8 1.2" />
        <path d="M 50 56 C 50 70, 45 78, 38 90" stroke="url(#hcon)" strokeWidth="0.4" fill="none" strokeDasharray="0.8 1.2" />
        <path d="M 78 38 C 70 60, 60 76, 60 88" stroke="url(#hcon)" strokeWidth="0.4" fill="none" strokeDasharray="0.8 1.2" />
      </svg>
    </div>
  );
}

// --- variant B: constellation of evidence cards
function HeroConstellation() {
  const items = [
    { x: 5, y: 4, w: 38, h: 14, t: "“It wasn't clear what I was paying for.”", k: "QUOTE · P-042", a: false },
    { x: 50, y: 0, w: 44, h: 16, t: "Pricing-page friction (14 clips)", k: "CLUSTER", a: true },
    { x: 2, y: 24, w: 30, h: 12, t: "Hesitation +42% at CTA", k: "SIGNAL", a: false },
    { x: 36, y: 22, w: 28, h: 10, t: "Mid-market", k: "SEGMENT", a: false },
    { x: 70, y: 22, w: 26, h: 10, t: "8 / 12 agree", k: "SEGMENT", a: false },
    { x: 8, y: 40, w: 56, h: 18, t: "Surface 'what's included' above the pricing CTA", k: "RECOMMENDATION", a: true },
    { x: 70, y: 42, w: 28, h: 12, t: "Confidence 86%", k: "EVIDENCE", a: false },
    { x: 4, y: 64, w: 34, h: 12, t: "Reaction · 02:14", k: "VIDEO MOMENT", a: false },
    { x: 44, y: 64, w: 50, h: 14, t: "21 supporting clips · 8 participants", k: "SOURCE TRAIL", a: false },
    { x: 14, y: 82, w: 70, h: 14, t: "Ready: Executive PDF · 12 slides", k: "REPORT", a: true },
  ];
  return (
    <div className="heroviz">
      <svg className="heroviz__connector" viewBox="0 0 100 100" preserveAspectRatio="none">
        {items.flatMap((it, i) =>
          items.slice(i + 1).map((jt, j) => {
            // only connect close pairs for restraint
            const dx = it.x - jt.x, dy = it.y - jt.y;
            const d = Math.sqrt(dx * dx + dy * dy);
            if (d > 30 || d < 8) return null;
            return (
              <line key={`${i}-${j}`} x1={it.x + it.w / 2} y1={it.y + it.h / 2} x2={jt.x + jt.w / 2} y2={jt.y + jt.h / 2}
                stroke="var(--accent)" strokeOpacity="0.15" strokeWidth="0.2" strokeDasharray="0.6 0.8" />
            );
          })
        )}
      </svg>
      {items.map((it, i) => (
        <div key={i} className={`card ${it.a ? "card--accent" : ""}`} style={{
          position: "absolute",
          left: `${it.x}%`, top: `${it.y}%`,
          width: `${it.w}%`,
          padding: "10px 12px",
          fontSize: 12,
        }}>
          <div className="card__label" style={{ marginBottom: 6, fontSize: 9.5 }}>
            <span className="card__label-dot"></span>{it.k}
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.3, letterSpacing: "-0.005em" }}>{it.t}</div>
        </div>
      ))}
    </div>
  );
}

// --- variant C: animated pipeline (clips clustering to report)
function HeroPipelineViz() {
  return (
    <div className="heroviz">
      <div className="card" style={{ height: "100%", padding: 24 }}>
        <div className="card__label" style={{ marginBottom: 24 }}>
          <span className="card__label-dot"></span> PIPELINE · LIVE
        </div>

        {/* Raw signals row */}
        <div style={{ display: "flex", gap: 6, marginBottom: 32, flexWrap: "wrap" }}>
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} style={{
              width: 26, height: 36,
              background: "var(--bg-elev-2)",
              border: "1px solid var(--border)",
              borderRadius: 4,
              flex: "0 0 auto",
              opacity: 0.4 + (i % 5) * 0.12,
            }} />
          ))}
        </div>

        <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em", marginBottom: 10 }}>
          ↓ DETECT MOMENTS
        </div>

        {/* Clusters row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 28 }}>
          {[
            { t: "Pricing clarity", c: 14, a: true },
            { t: "Onboarding friction", c: 9, a: false },
            { t: "Trust signals", c: 6, a: false },
          ].map((c, i) => (
            <div key={i} className={`card ${c.a ? "card--accent" : ""}`} style={{ padding: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{c.t}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-muted)", marginTop: 6 }}>{c.c} CLIPS · CLUSTER</div>
            </div>
          ))}
        </div>

        <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em", marginBottom: 10 }}>
          ↓ CLUSTER + SCORE
        </div>

        {/* Final report card */}
        <div className="card card--accent" style={{ padding: 16 }}>
          <div className="card__label"><span className="card__label-dot" /> EXECUTIVE REPORT · READY</div>
          <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em", margin: "6px 0" }}>
            Pricing-page clarity is the #1 driver of mid-funnel churn
          </div>
          <Confidence pct={0.86} />
        </div>
      </div>
    </div>
  );
}

// --- variant D: report-emerging from raw data
function HeroReportEmerging() {
  return (
    <div className="heroviz">
      {/* background: source materials fanning out */}
      <div style={{ position: "absolute", inset: "0% 0% 35% 0%", overflow: "hidden", borderRadius: "var(--radius-md)" }}>
        {Array.from({ length: 9 }).map((_, i) => {
          const rot = (i - 4) * 4;
          const ox = (i - 4) * 12;
          return (
            <div key={i} className="card" style={{
              position: "absolute",
              left: `${20 + ox}px`,
              top: `${10 + Math.abs(i - 4) * 4}px`,
              width: "62%",
              padding: 12,
              transform: `rotate(${rot}deg)`,
              opacity: i === 4 ? 1 : 0.4,
              zIndex: i === 4 ? 5 : 1,
            }}>
              <div className="card__label" style={{ marginBottom: 6 }}>
                <span className="card__label-dot" /> P-{String(40 + i).padStart(3, "0")}
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.35, color: "var(--fg-muted)" }}>
                {i === 4
                  ? "\"It wasn't clear what I was paying for, so I closed the tab.\""
                  : "[ participant snippet ]"}
              </div>
            </div>
          );
        })}
      </div>

      {/* foreground report */}
      <div className="card card--accent" style={{ position: "absolute", bottom: 0, left: "5%", width: "90%", padding: 24 }}>
        <div className="card__label"><span className="card__label-dot" /> EXECUTIVE REPORT · v3</div>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.15, margin: "8px 0 12px" }}>
          Pricing clarity drives 41% of mid-funnel churn
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
          <Tag dot accent>14 SUPPORTING CLIPS</Tag>
          <Tag>8 PARTICIPANTS</Tag>
          <Tag>3 SEGMENTS</Tag>
        </div>
        <Confidence pct={0.86} />
      </div>
    </div>
  );
}

Object.assign(window, { Hero, HeroVisual, HEADLINES });