/* global React, ReactDOM, BlogNav, Newsletter, Footer, Tag, Confidence, EmotionTimeline, Transcript */

function BlogReportTpl({ report }) {
  const [cite, setCite] = React.useState(null); // which citation is open
  const cites = report.cites || {};

  const recommendation = report.recommendation || {};

  return (
    <div className="blog-page app" data-density="comfortable">
      <BlogNav active="blog" />

      {/* HERO */}
      <header className="rpt-hero">
        <div className="container">
          <div className="rpt-hero__grid">
            <div>
              <div className="article__lane">
                <b>SAMPLE REPORT</b>
                {(report.lane || []).map((l) => (
                  <React.Fragment key={l}>
                    <span>·</span>
                    <span>{l}</span>
                  </React.Fragment>
                ))}
              </div>
              <h1 className="rpt-hero__title">{report.title}</h1>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                {(report.heroTags || []).map((t, i) => (
                  <Tag key={t.label} dot={i === 0} accent={i === 0}>{t.label}</Tag>
                ))}
              </div>
            </div>

            <dl className="rpt-hero__meta">
              {(report.heroMeta || []).map((m) => (
                <div key={m.dt}><dt>{m.dt}</dt><dd>{m.dd}</dd></div>
              ))}
            </dl>
          </div>
        </div>
      </header>

      {/* EXECUTIVE SUMMARY */}
      <section className="rpt-summary">
        <div className="container">
          <div className="eyebrow">EXECUTIVE SUMMARY · OPEN</div>
          <p className="rpt-summary__lead" style={{ marginTop: 20 }}>
            {report.summaryPre}{" "}
            <button className={"report-open__cite" + (cite === "c1" ? " is-open" : "")} onClick={() => setCite(cite === "c1" ? null : "c1")} aria-expanded={cite === "c1"}>{(cites.c1 && cites.c1.label) || "[C1]"}</button>,{" "}
            {report.summaryMid}{" "}
            <button className={"report-open__cite" + (cite === "c2" ? " is-open" : "")} onClick={() => setCite(cite === "c2" ? null : "c2")} aria-expanded={cite === "c2"}>{(cites.c2 && cites.c2.label) || "[C2]"}</button>.{" "}
            {report.summaryPost}
          </p>
          {cite && cites[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="rpt-summary__stats">
            {(report.stats || []).map((s) => (
              <div key={s.l} className="rpt-summary__stat">
                <div className="rpt-summary__stat-value">{s.v}</div>
                <div className="rpt-summary__stat-label">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* KEY FINDINGS */}
      <section className="rpt-findings">
        <div className="container">
          <div className="eyebrow">KEY FINDINGS · OPEN</div>
          <h2 style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", marginTop: 16, marginBottom: 8, maxWidth: "26ch", lineHeight: 1.05 }}>
            {report.findingsHeading}
          </h2>
          <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "60ch", lineHeight: 1.5 }}>
            {report.findingsIntro}
          </p>

          <div className="rpt-findings__grid">
            {(report.findings || []).map((f) => (
              <article key={f.num} className={"rpt-finding" + (f.hi ? " rpt-finding--hi" : "")}>
                <div className="rpt-finding__head">
                  <span className="rpt-finding__num">{f.num}</span>
                  <Tag dot={!!f.tagAccent} accent={!!f.tagAccent}>{f.tag}</Tag>
                </div>
                <h3 className="rpt-finding__title">{f.title}</h3>
                <p className="rpt-finding__quote">"{f.verbatim}"</p>
                <div className="rpt-finding__meta">
                  {(f.meta || []).map((m) => <span key={m}>{m}</span>)}
                </div>
                {f.timeline ? (
                  <EmotionTimeline moments={f.timeline} />
                ) : f.confidence != null ? (
                  <Confidence pct={f.confidence} label={f.confidenceLabel || "SHARE OF RESPONDENTS"} />
                ) : null}
              </article>
            ))}
          </div>

          {recommendation.title && (
            <div style={{ marginTop: 32 }}>
              <h3 style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.01em" }}>{recommendation.heading}</h3>
              <div className="card card--accent" style={{ marginTop: 14 }}>
                <div className="card__label"><span className="card__label-dot" /> RECOMMENDATION · DEFENSIBLE</div>
                <p style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.005em", marginTop: 6, marginBottom: 12 }}>
                  {recommendation.body}
                </p>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {(recommendation.tags || []).map((t, i) => (
                    <Tag key={t} dot={i === 0} accent={i === 0}>{t}</Tag>
                  ))}
                </div>
                {recommendation.confidence != null && (
                  <Confidence pct={recommendation.confidence} label={recommendation.confidenceLabel || "EVIDENCE STRENGTH"} />
                )}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* SAMPLE OF EVIDENCE */}
      {(report.evidence || []).length > 0 && (
        <section className="rpt-findings">
          <div className="container">
            <div className="eyebrow">EVIDENCE PREVIEW · OPEN</div>
            <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 16, marginBottom: 24, maxWidth: "30ch" }}>
              {report.evidenceHeading}
            </h2>
            {(report.evidence || []).map((ev, i) => (
              <div key={i} className="card" style={{ maxWidth: 760, marginBottom: 16 }}>
                <Transcript time={ev.time || "—"} speaker={ev.speaker}>
                  {ev.body}
                </Transcript>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
                  {(ev.tags || []).map((t, j) => (
                    <Tag key={t} dot={j === 0} accent={j === 0}>{t}</Tag>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* PERSONAS */}
      {(report.personas || []).length > 0 && (
        <section className="rpt-findings">
          <div className="container">
            <div className="eyebrow">PERSONAS · OPEN</div>
            <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 16, marginBottom: 8, maxWidth: "32ch" }}>
              {report.personasHeading}
            </h2>
            <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "60ch", lineHeight: 1.5, marginBottom: 24 }}>
              {report.personasIntro}
            </p>
            <div className="rpt-findings__grid">
              {(report.personas || []).map((p) => (
                <article key={p.name} className="rpt-finding">
                  <div className="rpt-finding__head"><span className="rpt-finding__num">{p.share}</span><Tag dot={p.tag === "MAIN PERSONA"} accent={p.tag === "MAIN PERSONA"}>{p.tag}</Tag></div>
                  <h3 className="rpt-finding__title">{p.name}</h3>
                  <p className="rpt-finding__quote">"{p.quote}"</p>
                  <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, margin: 0 }}>{p.about}</p>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* GATE → get your own study (we don't share client reports; routes to the demo) */}
      <section className="rpt-gate" style={{ background: "color-mix(in oklab, var(--accent) 4%, var(--bg))" }}>
        <div className="rpt-gate__fade" />
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="rpt-gate__eyebrow">YOUR STUDY, YOUR CUSTOMERS</div>
          <h2 className="rpt-gate__title">This is one real study, anonymized. The next one could be about your customers.</h2>
          <p className="rpt-gate__desc">
            We don't share client reports — but we'll run a study like this one on your audience and hand you the
            full evidence trail: every finding traceable to a clip, a transcript, and a segment. Book a 30-minute
            working session and we'll scope it against a real question of yours.
          </p>
          <div style={{ marginTop: 8 }}>
            <a className="btn btn--primary btn--lg" href="/#demo">Get a demo <span className="btn-arrow">→</span></a>
          </div>
        </div>
      </section>

      {/* RELATED */}
      {(report.related || []).length > 0 && (
        <section className="related">
          <div className="container">
            <div className="related__title">RELATED REPORTS · SAME LANE</div>
            <div className="related__grid">
              {(report.related || []).map((r) => (
                <a key={r.href + r.title} className={"postcard" + (r.report ? " postcard--report" : "")} href={r.href}>
                  <div className="postcard__lane"><span>{r.lane}</span><span>{r.date}</span></div>
                  <h3 className="postcard__title">{r.title}</h3>
                  <p className="postcard__excerpt">{r.excerpt}</p>
                  <div className="postcard__meta"><strong>{r.author}</strong><span>{r.meta}</span></div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <div className="container">
        <Newsletter />
      </div>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogReportTpl report={window.__REPORT__} />);