// Mid sections: Problem/Solution, What we do, Why DealVault, Marquee

function ProblemSolution() {
  return (
    <section id="problem">
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>01 / The problem</span>
        </div>

        <div className="split-2">
          <div className="reveal">
            <h2 className="h-section">
              Founders get dozens of cold pitches from agencies every week.
            </h2>
            <p className="body-l" style={{ marginTop: 28, color: "var(--muted)" }}>
              We help you navigate it with clarity. No more spending weeks researching
              outlets, KOLs, and agencies — only to chase introductions that go cold.
            </p>
          </div>

          <div className="reveal reveal-delay-2">
            {[
              { k: "Without DealVault", items: [
                "Cold inbox of agency pitches",
                "Weeks researching media, KOLs, communities",
                "Generic decks and unclear rates",
                "Retainers before any proof of fit",
              ], muted: true },
              { k: "With DealVault", items: [
                "One short brief on Monday",
                "Curated shortlist by Friday",
                "Rates, audience data, formats included",
                "Direct warm intros — $0 to you",
              ], muted: false },
            ].map((col, i) => (
              <div key={col.k} style={{ marginBottom: i === 0 ? 24 : 0 }}>
                <div className="label" style={{ marginBottom: 14, color: col.muted ? "var(--muted-2)" : "var(--accent)" }}>{col.k}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                  {col.items.map((it) => (
                    <li
                      key={it}
                      style={{
                        display: "flex",
                        gap: 12,
                        alignItems: "flex-start",
                        fontSize: 15,
                        color: col.muted ? "var(--muted)" : "var(--ink)",
                        textDecoration: col.muted ? "line-through" : "none",
                        textDecorationColor: "var(--line-2)",
                      }}
                    >
                      <span style={{
                        width: 14, height: 14, borderRadius: 99,
                        background: col.muted ? "transparent" : "var(--ink)",
                        border: col.muted ? "1px solid var(--line-2)" : "1px solid var(--ink)",
                        flexShrink: 0,
                        marginTop: 4,
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        color: "var(--bg)",
                      }}>
                        {!col.muted && <Check size={9} />}
                      </span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatWeDo() {
  const rows = [
    { idx: "A", t: "We match Fintech & Web3 startups",
      d: "Specialist matchmaking with vetted media and agency partners. We work with international companies across the verticals we know best." },
    { idx: "B", t: "You send us a short brief",
      d: "Product, target audience, budget range, timeline. That's it — no decks, no long discovery calls." },
    { idx: "C", t: "We come back with a curated shortlist",
      d: "Partners who actually fit your vertical, stage, and budget — with rates, audience data, format options, and direct contacts." },
  ];
  return (
    <section id="what" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>02 / What we do</span>
        </div>

        <h2 className="h-section reveal" style={{ maxWidth: "20ch" }}>
          A curated shortlist instead of a cold inbox.
        </h2>

        <div style={{ marginTop: 56 }}>
          {rows.map((r) => (
            <div key={r.idx} className="feature-row reveal">
              <div className="idx">— {r.idx}</div>
              <div>
                <h3 className="h-card">{r.t}</h3>
                <p className="body-m" style={{ marginTop: 12, color: "var(--muted)", maxWidth: "60ch" }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyDealVault() {
  const cards = [
    {
      num: "01",
      kicker: "Speed",
      headline: <>5 days <br/><span style={{ color: "var(--muted)" }}>to shortlist</span></>,
      title: "Brief on Monday. Shortlist by Friday.",
      desc: "With rates, audience data, format options, and contacts ready to go. No back-and-forth, no waiting weeks.",
      points: ["Curated, not aggregated", "Direct partner contacts", "Rates &amp; audience data included"],
    },
    {
      num: "02",
      kicker: "Expertise",
      headline: <>Web3 &amp; Fintech <br/><span style={{ color: "var(--muted)" }}>native</span></>,
      title: "We speak the stack you're navigating.",
      desc: "Regulatory constraints, KOL dynamics, Crypto Twitter, Telegram communities, compliance specifics. No educating required.",
      points: ["6+ years vertical experience", "Vetted partner pool", "Operator-screened"],
    },
    {
      num: "03",
      kicker: "Alignment",
      headline: <><span style={{ color: "var(--accent)" }}>$0</span> <br/><span style={{ color: "var(--muted)" }}>for our clients</span></>,
      title: "Direct to agency and media owners.",
      desc: "No middlemen, no slow back-and-forth. B2B referral on the partner side keeps incentives aligned with yours.",
      points: ["No retainer", "No subscription", "Standard B2B referral"],
    },
  ];
  return (
    <section id="why">
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>03 / Why DealVault</span>
        </div>

        <div className="spread reveal" style={{ alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
          <h2 className="h-section" style={{ maxWidth: "18ch" }}>
            Three things that change the math.
          </h2>
          <p className="body-m" style={{ maxWidth: "38ch", color: "var(--muted)" }}>
            Speed, vertical expertise, and incentives that line up with yours.
            Nothing fancy &mdash; just the things that fix what's broken about partner sourcing today.
          </p>
        </div>

        <div className="why-grid">
          {cards.map((c, i) => (
            <article key={c.num} className={`why-tile reveal reveal-delay-${i + 1}`}>
              <div className="why-tile__top">
                <span className="mono why-tile__num">{c.num}</span>
                <span className="mono why-tile__kicker">{c.kicker}</span>
              </div>
              <div className="why-tile__headline">{c.headline}</div>
              <div className="why-tile__body">
                <h3 className="why-tile__title">{c.title}</h3>
                <p className="why-tile__desc">{c.desc}</p>
              </div>
              <ul className="why-tile__points">
                {c.points.map((p) => (
                  <li key={p}>
                    <span className="why-tile__check"><Check size={10} /></span>
                    <span dangerouslySetInnerHTML={{ __html: p }} />
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function VerticalsMarquee() {
  const items = ["FinTech", "Start-Up", "Web3", "KOLs"];
  const Star = () => <span className="star">✦</span>;
  return (
    <div className="marquee-mask" aria-hidden="true">
      <div className="marquee">
        {[0,1].map((k) => (
          <React.Fragment key={k}>
            {items.map((it, i) => (
              <React.Fragment key={k + "-" + i}>
                <span>{it}</span>
                <Star />
              </React.Fragment>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

window.ProblemSolution = ProblemSolution;
window.WhatWeDo = WhatWeDo;
window.WhyDealVault = WhyDealVault;
window.VerticalsMarquee = VerticalsMarquee;