function FeaturedResearch({ onDownload }) {
  const [email, setEmail] = useState("");
  const [touched, setTouched] = useState(false);
  const [done, setDone] = useState(false);
  const valid = isValidEmail(email);

  function submit(e) {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;
    // delegate to modal flow if caller provided
    if (onDownload) {
      onDownload(email);
      return;
    }
    setDone(true);
  }

  return (
    <section id="featured" style={{ background: PALETTE.paper, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto", padding: "96px 32px",
      }} className="vst-section">
        <div style={{ marginBottom: 40, maxWidth: 760 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Featured Research · May 2026</Eyebrow>
          <h2 className="vst-h2" style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 44, fontWeight: 600,
            lineHeight: 1.12, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0,
            textWrap: "balance",
          }}>
            Mexican AI Server Imports — Industry Brief.
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 18, lineHeight: 1.6,
            color: PALETTE.mute1, marginTop: 16, marginBottom: 0,
          }}>
            First public snapshot. <span style={{ color: PALETTE.navy, fontWeight: 600 }}>USD 329.56B</span> aggregate,
            <span style={{ color: PALETTE.navy, fontWeight: 600 }}> +64.9% YoY</span>, Top 100 importers anonymized.
            Methodology and caveats explicit.
          </p>
        </div>

        <div className="vst-grid-2" style={{
          display: "grid", gridTemplateColumns: "minmax(0, 480px) 1fr", gap: 0,
          background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
          borderTop: `2px solid ${PALETTE.amber}`,
          boxShadow: "0 1px 0 rgba(10,25,41,.04), 0 2px 6px rgba(10,25,41,.05)",
        }}>
          {/* Cover preview */}
          <div style={{
            background: PALETTE.navy, color: PALETTE.paper,
            padding: 36, position: "relative", overflow: "hidden",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: 520, borderRight: `1px solid ${PALETTE.rule}`,
          }}>
            <CoverPreview/>
          </div>

          {/* Content + form */}
          <div style={{ padding: "40px 40px 36px" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 20 }}>
              <span style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                background: PALETTE.amber100, color: "#7A4500",
                padding: "4px 8px", borderRadius: 2, letterSpacing: ".04em",
                fontWeight: 600,
              }}>LM3 · LEAD MAGNET</span>
              <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: PALETTE.mute2 }}>FREE</span>
            </div>

            <h3 style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 24, fontWeight: 600,
              color: PALETTE.navy, margin: "0 0 8px", letterSpacing: "-.012em", lineHeight: 1.2,
            }}>What's inside the ≈ 25-page snapshot</h3>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 14.5, lineHeight: 1.6,
              color: PALETTE.mute1, margin: "0 0 22px",
            }}>
              The same methodology used in our paid R003 reports — applied to a public, anonymized
              cut of the data. No paywall, no follow-up sales sequence.
            </p>

            <ul style={{ margin: "0 0 24px", padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
              {[
                "Top 100 importers — ranked, anonymized, sector-tagged",
                "HS-code breakdown for AI servers + accelerators (8471, 8517.62, 8542.31, 8542.32)",
                "Quarterly flow charts with disclosed coverage band",
                "Side-by-side: SAT declarations vs Banxico balance-of-payments",
                "Methodology appendix + revision policy",
              ].map(line => (
                <li key={line} style={{ display: "flex", gap: 10, fontFamily: "Inter, sans-serif", fontSize: 13.5, color: PALETTE.ink, lineHeight: 1.5 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={PALETTE.green} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 4 }}><path d="M20 6L9 17l-5-5"/></svg>
                  <span>{line}</span>
                </li>
              ))}
            </ul>

            <hr style={{ border: 0, borderTop: `1px solid ${PALETTE.rule}`, margin: "0 0 18px" }}/>

            <div style={{
              display: "flex", flexWrap: "wrap", gap: 14,
              fontFamily: "JetBrains Mono, monospace", fontSize: 11,
              color: PALETTE.mute1, marginBottom: 18, letterSpacing: ".02em",
            }}>
              <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                ≈ 25 PAGES
              </span>
              <span style={{ color: PALETTE.rule2 }}>·</span>
              <span>LFPDPPP 2025 COMPLIANT</span>
              <span style={{ color: PALETTE.rule2 }}>·</span>
              <span>IMMEX VERIFIED · MAR 2026</span>
            </div>

            {/* Form */}
            {!done ? (
              <form onSubmit={submit} style={{ marginTop: 4 }}>
                <div style={{ display: "flex", gap: 8, alignItems: "stretch" }}>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    onBlur={() => setTouched(true)}
                    placeholder="Work email"
                    aria-label="Work email"
                    style={{
                      flex: 1, minWidth: 0,
                      border: `1px solid ${touched && !valid ? PALETTE.red : PALETTE.rule2}`,
                      borderRadius: 4, padding: "12px 14px",
                      fontFamily: "Inter, sans-serif", fontSize: 15,
                      color: PALETTE.navy, background: PALETTE.white, outline: "none",
                    }}
                  />
                  <PrimaryButton type="submit">
                    Download PDF <span className="vst-link-arrow">→</span>
                  </PrimaryButton>
                </div>
                {touched && !valid && (
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: PALETTE.red, marginTop: 6 }}>
                    Please enter a valid work email address.
                  </div>
                )}
              </form>
            ) : (
              <div style={{
                background: PALETTE.amber100, color: "#7A4500",
                padding: "12px 14px", borderRadius: 4,
                fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 500,
              }}>Sent. Check your inbox for the PDF.</div>
            )}

            <div style={{
              display: "flex", alignItems: "center", gap: 10, marginTop: 18,
              fontFamily: "Inter, sans-serif", fontSize: 12, color: PALETTE.mute1, lineHeight: 1.55,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, color: PALETTE.mute2 }}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              <span>
                Single-email-only delivery. No marketing list. We send revisions when methodology changes — that's it.
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoverPreview() {
  // editorial mock cover with hairline annotated chart
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 16, position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: PALETTE.amber500, letterSpacing: ".14em", fontWeight: 600 }}>LM3 · MX-AI-2026-Q1</div>
            <div style={{ fontFamily: "Inter, sans-serif", fontSize: 10, color: "rgba(250,249,245,.5)", letterSpacing: ".14em", fontWeight: 600, marginTop: 6 }}>VS·TRADE INTELLIGENCE</div>
          </div>
          <div style={{ fontFamily: "Inter, sans-serif", fontSize: 9, color: "rgba(250,249,245,.5)", letterSpacing: ".14em", textAlign: "right" }}>
            PUBLIC<br/>SNAPSHOT
          </div>
        </div>

        <div style={{ borderTop: "2px solid rgba(255,160,0,.6)", paddingTop: 22, marginTop: 6 }}>
          <div style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 28, fontWeight: 600,
            lineHeight: 1.1, color: PALETTE.paper, letterSpacing: "-.018em",
          }}>
            Mexican AI Server Imports
          </div>
          <div style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 18, fontWeight: 400,
            color: "rgba(250,249,245,.6)", marginTop: 4, fontStyle: "italic",
          }}>
            Industry Brief — Top 100, anonymized
          </div>
        </div>
      </div>

      {/* Annotated cover chart */}
      <div style={{ position: "relative", marginTop: 28, height: 200 }}>
        <svg viewBox="0 0 460 220" width="100%" height="100%">
          <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(250,249,245,.4)">
            <text x="0" y="14">USD B</text>
            <text x="0" y="64">300</text>
            <text x="0" y="114">200</text>
            <text x="0" y="164">100</text>
          </g>
          {/* gridlines */}
          {[20, 70, 120, 170].map(y => (
            <line key={y} x1="30" x2="460" y1={y} y2={y} stroke="rgba(228,226,218,.1)" strokeWidth="0.6"/>
          ))}
          {/* bars */}
          {[
            { x: 50, h: 38 },
            { x: 100, h: 56 },
            { x: 150, h: 72 },
            { x: 200, h: 92 },
            { x: 250, h: 118 },
            { x: 300, h: 136 },
            { x: 350, h: 152 },
            { x: 400, h: 168 },
          ].map((b, i) => (
            <rect key={i} x={b.x} y={180 - b.h} width="22" height={b.h} fill={i === 7 ? PALETTE.amber500 : "#0B5FFF"} fillOpacity={i === 7 ? 1 : 0.6}/>
          ))}
          {/* annotation */}
          <line x1="411" y1="12" x2="411" y2="180" stroke="rgba(255,160,0,.5)" strokeWidth="0.6" strokeDasharray="2 2"/>
          <text x="416" y="18" fontFamily="Inter, sans-serif" fontSize="9" fill={PALETTE.amber500} fontWeight="600">+64.9%</text>
          <text x="30" y="208" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(250,249,245,.4)">2024 Q1 → 2026 Q1</text>
        </svg>
      </div>

      <div style={{
        marginTop: 22, paddingTop: 16,
        borderTop: "1px solid rgba(228,226,218,.12)",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
      }}>
        <div style={{ fontFamily: "Inter, sans-serif", fontSize: 10, color: "rgba(250,249,245,.5)", letterSpacing: ".14em", fontWeight: 600 }}>
          ≈ 25 PAGES · MAY 2026
        </div>
        <Logo inverse size={14}/>
      </div>
    </>
  );
}

window.FeaturedResearch = FeaturedResearch;