// Sections for the Consumer Pulse Methodology landing page.

/* ── Responsive styles ───────────────────────────────────── */
const RESPONSIVE_CSS = `
  .pulse-hero-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .pulse-inside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
  }
  .pulse-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .pulse-proof-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--av-rule);
    border-radius: 16px;
    overflow: hidden;
  }
  .pulse-proof-card {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pulse-proof-card + .pulse-proof-card {
    border-left: 1px solid var(--av-rule);
  }
  .pulse-download-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .pulse-upsell-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .pulse-logo-bar-inner {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
  }
  .pulse-cover-col {
    display: flex;
    justify-content: center;
    padding: 20px 40px;
  }

  @media (max-width: 900px) {
    .pulse-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 48px 24px 64px !important;
    }
    .pulse-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .pulse-cover-col {
      display: none;
    }
    .pulse-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .pulse-stats-grid > div {
      border-right: none !important;
      border-bottom: 1px solid var(--av-rule);
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 20px;
      padding-top: 20px;
    }
    .pulse-stats-grid > div:first-child { padding-top: 0; }
    .pulse-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .pulse-proof-cards {
      grid-template-columns: 1fr;
    }
    .pulse-proof-card + .pulse-proof-card {
      border-left: none;
      border-top: 1px solid var(--av-rule);
    }
    .pulse-proof-card {
      padding: 28px 24px;
    }
    .pulse-proof-section {
      padding: 64px 24px 48px !important;
    }
    .pulse-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .pulse-logo-bar-section {
      padding: 24px 24px 48px !important;
    }
    .pulse-download-bar {
      flex-direction: column;
      align-items: flex-start;
    }
    .pulse-download-bar a {
      width: 100%;
      justify-content: center;
    }
    .pulse-upsell-bar {
      flex-direction: column;
      align-items: flex-start;
    }
    .pulse-inside-copy {
      max-width: 100% !important;
    }
    .pulse-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
  }

  @media (max-width: 480px) {
    .pulse-hero-grid {
      padding: 36px 20px 56px !important;
    }
    .pulse-inside-grid {
      padding: 48px 20px !important;
    }
    .pulse-proof-section {
      padding: 56px 20px 40px !important;
    }
    .pulse-closing-inner {
      padding: 64px 20px 56px !important;
    }
    .pulse-logo-bar-section {
      padding: 20px 20px 40px !important;
    }
    .pulse-logo-bar-inner {
      gap: 20px;
    }
    .pulse-footer {
      padding: 24px 20px !important;
    }
  }
`;

const ResponsiveStyles = () => (
  <style dangerouslySetInnerHTML={{ __html: RESPONSIVE_CSS }} />
);

/* ── NavBar ──────────────────────────────────────────────── */
const NavBar = () => (
  <>
    <ResponsiveStyles />
    <header style={{
      background: "var(--av-canvas)",
      borderBottom: "1px solid var(--av-rule)",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "0 40px", height: 75,
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <a href="https://algoverde.ai" aria-label="AlgoVerde — home"
          style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
          <PulseLogo width={170} />
        </a>
      </div>
    </header>
  </>
);

/* ── Hero ─────────────────────────────────────────────────── */
const HeroSection = ({ hl, Italic, t, accent, scrollToForm, formRef }) => (
  <section>
    <div className="pulse-hero-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "64px 40px 96px" }}>
      {/* Left — copy */}
      <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <PulseEyebrow color={t.accentColor}>{t.eyebrowText}</PulseEyebrow>

        <h1 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(40px, 7vw, 96px)", lineHeight: 0.98, letterSpacing: "-0.035em",
          color: "var(--av-ink)", margin: 0, textWrap: "balance",
        }}>
          {hl.lead}<br />
          {hl.body && <>{hl.body} </>}<Italic>{hl.accent}</Italic>?
        </h1>

        <p style={{
          fontSize: "clamp(16px, 2vw, 20px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
          fontFamily: "var(--font-sans)", margin: 0, textWrap: "pretty",
        }}>
          We published the Consumer Pulse — now here's the full methodology.
          How GenAI Personas work, how we validated the numbers, and why this
          approach delivers research in hours instead of months.
        </p>

        {/* CTA row */}
        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <button onClick={scrollToForm} style={{
            background: "var(--av-ink)", color: "#fff", border: "none",
            padding: "16px 26px", borderRadius: 10, fontSize: 15, fontWeight: 500,
            cursor: "pointer", fontFamily: "var(--font-sans)",
            display: "flex", alignItems: "center", gap: 12,
            transition: "background 160ms ease, transform 160ms ease",
            letterSpacing: "-0.005em",
          }}
            onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.transform = "translateY(-1px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "var(--av-ink)"; e.currentTarget.style.transform = "none"; }}
          >
            <span>{t.ctaLabel}</span>
            <span style={{ fontSize: 16 }}>→</span>
          </button>
          <a href="#consumer-pulse" style={{
            fontSize: 14, fontWeight: 500, color: "var(--av-ink-soft)",
            textDecoration: "none", padding: "14px 8px",
            display: "inline-flex", alignItems: "center", gap: 8,
            transition: "color 160ms ease",
          }}
            onMouseEnter={(e) => e.currentTarget.style.color = accent}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--av-ink-soft)"}
          >
            <span>Read the Consumer Pulse free</span>
            <span>↓</span>
          </a>
        </div>

        {/* Proof row */}
        <div className="pulse-stats-grid" style={{
          marginTop: 24, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
        }}>
          {[
            { k: "Precision", v: <>±<span style={{ color: "var(--av-ember)" }}>1</span> pt</>, note: "Headline finding variance across 3 independent runs" },
            { k: "External validation", v: <>7 sources</>, note: "CBS/YouGov, Gallup, Conference Board, Marist, BLS, Fed, U. of Michigan" },
            { k: "Time to insight", v: <>Hours, not <span style={{ color: "var(--av-ember)" }}>weeks</span></>, note: "vs. 6–12 weeks for traditional fieldwork" },
          ].map((s, i) => (
            <div key={i} style={{
              paddingRight: 24, borderRight: i < 2 ? "1px solid var(--av-rule)" : "none",
              paddingLeft: i > 0 ? 24 : 0,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--av-ink-muted)", marginBottom: 10,
              }}>{s.k}</div>
              <div style={{
                fontSize: 24, fontWeight: 600, letterSpacing: "-0.018em",
                color: "var(--av-ink)", lineHeight: 1.1, marginBottom: 8,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.45 }}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right — form */}
      <div ref={formRef} style={{ position: "relative" }}>
        <PulseEmailForm accentColor={t.accentColor} />
      </div>
    </div>
  </section>
);

/* ── Inside the Methodology ──────────────────────────────── */
const InsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="pulse-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="pulse-cover-col">
        <MethodologyCover width={280} rotate={-4} />
      </div>
      <div className="pulse-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <PulseEyebrow color={t.accentColor}>Inside the methodology</PulseEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          How we built it.<br />
          Why the numbers <Italic>hold up</Italic>.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          The full methodology behind the AV Consumer Pulse: GenAI Personas,
          triple-run validation, and cross-checks against 7 external data sources.
          Everything your team needs to evaluate the approach.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "The Problem Traditional Research Can't Solve",
            "GenAI Personas: How They're Built",
            "Three Runs, Seven Sources, One Number",
            "CPG & Automotive Use Cases",
            "Persistent Personas: The Advantage",
            "Traditional vs. AlgoVerde Comparison",
          ].map((title, i) => (
            <PulseTocChip key={i} idx={["i","ii","iii","iv","v","vi"][i]} color={t.accentColor}>
              {title}
            </PulseTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── Proof / Consumer Pulse free download ────────────────── */
const ProofSection = ({ accent, Italic, t, scrollToForm }) => (
  <section id="consumer-pulse" className="pulse-proof-section"
    style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>
    <div style={{ marginBottom: 48, maxWidth: 720 }}>
      <PulseEyebrow color={t.accentColor}>Free download · no form required</PulseEyebrow>
      <h2 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(36px, 5vw, 52px)", letterSpacing: "-0.028em", lineHeight: 1.02,
        marginTop: 18, marginBottom: 0,
      }}>
        Start with the <Italic>findings</Italic>.
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55,
        marginTop: 16,
      }}>
        The AV Consumer Pulse — Spring 2026 is free to download. No email, no gate.
        Read the findings first, then come back for the methodology behind them.
      </p>
    </div>

    {/* Findings preview cards */}
    <div className="pulse-proof-cards">
      {[
        { stat: "82", unit: "%", label: "Gas impact · lower-income", note: "Vehicle-dependent consumers reporting significant or major household impact" },
        { stat: "3–4", unit: "%", label: "Gas impact · upper-income", note: "Same week, same $4.45/gal — a 78-point spread" },
        { stat: "49.8", unit: "", label: "Consumer sentiment", note: "University of Michigan index — a 74-year record low, April 2026" },
      ].map((row, i) => (
        <div key={i} className="pulse-proof-card">
          <div style={{
            fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
            textTransform: "uppercase", color: "var(--av-ink-muted)",
          }}>{row.label}</div>
          <div style={{
            display: "flex", alignItems: "baseline", gap: 4,
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(48px, 6vw, 64px)", letterSpacing: "-0.04em", lineHeight: 0.95,
            color: "var(--av-ink)", fontVariantNumeric: "tabular-nums",
          }}>
            {row.stat}
            {row.unit && <span style={{ fontSize: 28, fontWeight: 500, color: accent }}>{row.unit}</span>}
          </div>
          <div style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.5 }}>{row.note}</div>
        </div>
      ))}
    </div>

    {/* Free download CTA */}
    <div className="pulse-download-bar" style={{
      marginTop: 32, padding: "24px 28px",
      background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 12,
    }}>
      <div>
        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--av-ink)", marginBottom: 4 }}>
          AV Consumer Pulse · Spring 2026
        </div>
        <div style={{ fontSize: 13, color: "var(--av-ink-muted)" }}>
          Free · 5-page PDF · A Tale of Two Americas
        </div>
      </div>
      <a href="assets/av-consumer-pulse-spring-2026.pdf" target="_blank" rel="noopener noreferrer"
        id="consumer-pulse-download" style={{
          background: "var(--av-canvas)", color: "var(--av-ink)", border: "1px solid var(--av-rule)",
          padding: "14px 22px", borderRadius: 10, fontSize: 14, fontWeight: 500,
          textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10,
          transition: "border-color 160ms ease, transform 160ms ease",
          fontFamily: "var(--font-sans)",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.transform = "translateY(-1px)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--av-rule)"; e.currentTarget.style.transform = "none"; }}
      >
        <span>Download free</span>
        <span>↓</span>
      </a>
    </div>

    {/* Upsell to methodology */}
    <div className="pulse-upsell-bar" style={{
      marginTop: 16, padding: "20px 28px",
      background: pulseAccent(t.accentColor).soft, borderRadius: 12,
    }}>
      <span style={{ fontSize: 14, color: "var(--av-ink-soft)" }}>
        Want the full methodology? GenAI Personas, validation process, use cases, ROI data.
      </span>
      <a href="#" onClick={(e) => { e.preventDefault(); scrollToForm(); }} style={{
        fontSize: 14, fontWeight: 600, color: accent,
        textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
        whiteSpace: "nowrap",
      }}>
        <span>Get the methodology</span>
        <span>→</span>
      </a>
    </div>
  </section>
);

/* ── Closing CTA ─────────────────────────────────────────── */
const ClosingCTA = ({ t, accent, accentTint, scrollToForm, Italic }) => (
  <section style={{
    background: "var(--av-bg-dark)", color: "#fff", position: "relative", overflow: "hidden",
  }}>
    <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: accent }}></div>
    <div className="pulse-closing-inner" style={{
      maxWidth: 1320, margin: "0 auto", padding: "96px 40px 88px",
      display: "flex", flexDirection: "column", alignItems: "center",
      gap: 36, textAlign: "center",
    }}>
      <PulseEyebrow color="muted">Get the methodology</PulseEyebrow>
      <h2 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(32px, 5vw, 64px)", letterSpacing: "-0.03em", lineHeight: 1.05,
        margin: 0, color: "#fff", maxWidth: 900, textWrap: "balance",
      }}>
        Speed without rigor produces noise. Rigor without speed produces{" "}
        <span style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
          color: accentTint,
        }}>outdated insights</span>.
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.55,
        margin: 0,
      }}>
        The methodology paper explains exactly how AlgoVerde delivers both.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <button onClick={scrollToForm} style={{
          background: "#fff", color: "var(--av-ink)", border: "none",
          padding: "18px 32px", borderRadius: 10, fontSize: 16, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)",
          display: "inline-flex", alignItems: "center", gap: 14,
          transition: "transform 160ms ease, background 160ms ease",
          letterSpacing: "-0.005em",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = accentTint; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.background = "#fff"; }}
        >
          <span>{t.ctaLabel}</span>
          <span style={{ fontSize: 16 }}>→</span>
        </button>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>
          Free · 6-page PDF · Full methodology + use cases
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { NavBar, HeroSection, InsideSection, ProofSection, ClosingCTA });