// Team, Honest Part, FAQ, Final CTA, Footer

function Team() {
  const team = [
    {
      initial: "D",
      name: "Dmitrii",
      role: "Co-founder · Partner side",
      bio: "6+ years in Fintech and Web3 marketing. Hands-on experience running campaigns across the same media stack you are trying to navigate. Knows which outlets convert and which only look like they do.",
      email: "dmitrii@dealvault.tech",
    },
    {
      initial: "K",
      name: "Konstantin",
      role: "Co-founder · Client side",
      bio: "4+ years in Web3 projects. Deep operational network across crypto media, communities, KOLs, and agencies. Built and screened the partner pool. Manages every relationship before a client name reaches the table.",
      email: "konstantin@dealvault.tech",
    },
  ];
  return (
    <section id="team">
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>05 / Our team</span>
        </div>

        <div className="reveal" style={{ marginBottom: 48 }}>
          <h2 className="h-section" style={{ maxWidth: "16ch" }}>
            Our team.
          </h2>
        </div>

        <div className="team-grid">
          {team.map((m, i) => (
            <div key={m.name} className={`team-card reveal reveal-delay-${i + 1}`}>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <div className="team-avatar">{m.initial}</div>
                <div>
                  <div className="h-card" style={{ fontSize: 24 }}>{m.name}</div>
                  <div className="label" style={{ marginTop: 6 }}>{m.role}</div>
                </div>
              </div>
              <p className="body-m" style={{ color: "var(--muted)" }}>{m.bio}</p>
              <a
                href={`mailto:${m.email}`}
                className="mono"
                style={{ fontSize: 13, color: "var(--ink)", letterSpacing: "0.02em", display: "inline-flex", alignItems: "center", gap: 8, borderTop: "1px solid var(--line)", paddingTop: 18 }}
              >
                {m.email}
                <ArrowUR size={12} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HonestPart() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>06 / The honest part</span>
        </div>

        <div className="honest reveal">
          <div>
            <div className="label" style={{ color: "var(--accent)", marginBottom: 28 }}>It's free for our clients</div>
            <div className="big">
              You don't pay us.
              <br/>
              <span className="accent">They do.</span>
            </div>
            <p className="body-m" style={{ marginTop: 28, color: "color-mix(in srgb, var(--bg) 75%, transparent)", maxWidth: "44ch" }}>
              Standard B2B referral model on the partner side. It keeps our
              incentive aligned with yours: bad fits cost us future referrals,
              so we only bring partners who can deliver.
            </p>
          </div>

          <div>
            <div className="row">
              <div className="key">For you</div>
              <div className="val">
                Zero cost. Zero retainer. Zero subscription. The shortlist, the
                intros, and the support through closing — all free.
              </div>
            </div>
            <div className="row">
              <div className="key">For us</div>
              <div className="val">
                Standard B2B referral on the partner side. Incentives stay
                aligned: bad fits cost us future referrals.
              </div>
            </div>
            <div className="row">
              <div className="key">For them</div>
              <div className="val">
                Qualified, vertical-fit clients arrive with a brief that's
                already structured. Less time pitching, more time delivering.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Really, $0 to me as the client?",
      a: "Yes. We earn a standard B2B referral fee from the agencies and media partners on closed engagements. You get the shortlist, the intros, and our hands-on support without any retainer, subscription, or hidden cost.",
    },
    {
      q: "How is this different from a directory or RFP platform?",
      a: "We're not a list of links. Every partner on our shortlist is screened, contacted, and confirmed against your specific brief — vertical fit, stage, budget, format, availability — before we ever send their name to you.",
    },
    {
      q: "Why only Fintech and Web3?",
      a: "Because that's where we have operational depth: regulatory constraints, KOL dynamics, Crypto Twitter, Telegram communities, compliance specifics. We'd rather be excellent in two verticals than mediocre across many.",
    },
    {
      q: "What if I already have a few agencies in mind?",
      a: "Send them with your brief. We'll either validate them with rates and references, or add comparable alternatives so you can benchmark. No ego — the goal is the best outcome for your spend.",
    },
    {
      q: "What does the brief need to include?",
      a: "Product summary, target audience, geography, budget range, timeline, and any partner formats you're already considering (media buys, KOL campaigns, agency retainers). A short Notion or Google doc is plenty.",
    },
    {
      q: "What happens after the warm intro on Day 5?",
      a: "You talk directly with the partners — no middleman, no slowdown. We stay available for context, references, and second opinions until you've closed the engagement that fits you best.",
    },
  ];

  return (
    <section id="faq" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-tag reveal">
          <span className="dash" />
          <span>07 / FAQ</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 56 }}>
          <div className="reveal">
            <h2 className="h-section" style={{ maxWidth: "16ch" }}>
              Answers before you ask them.
            </h2>
          </div>
          <div className="faq-list reveal">
            {items.map((it, i) => (
              <div key={it.q} className={"faq-item " + (open === i ? "open" : "")}>
                <button
                  className="faq-q"
                  aria-expanded={open === i}
                  onClick={() => setOpen(open === i ? -1 : i)}
                >
                  <span style={{ display: "flex", gap: 18, alignItems: "baseline" }}>
                    <span className="mono" style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.16em" }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span>{it.q}</span>
                  </span>
                  <span className="ico"><Plus size={12} /></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a__inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ openContact }) {
  return (
    <section id="contact" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div className="cta reveal">
          <div>
            <div className="label" style={{ color: "var(--accent)", marginBottom: 24 }}>08 / Ready when you are</div>
            <h2 className="h-section" style={{ color: "var(--bg)", maxWidth: "20ch" }}>
              Send a brief on Monday.<br/>
              Get a shortlist by Friday.
            </h2>
            <p className="lead">
              Tell us about your product, target audience, and budget range — we'll come back with a curated shortlist of vetted media and agency partners that actually fit.
            </p>
          </div>

          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={openContact}>
              Send request
              <ArrowR size={16} />
            </button>
            <a className="btn btn-ghost btn-lg" href="mailto:dmitrii@dealvault.tech"
              style={{ borderColor: "color-mix(in srgb, var(--bg) 22%, transparent)", color: "var(--bg)" }}>
              dmitrii@dealvault.tech
              <ArrowUR size={14} />
            </a>
            <a className="btn btn-ghost btn-lg" href="mailto:konstantin@dealvault.tech"
              style={{ borderColor: "color-mix(in srgb, var(--bg) 22%, transparent)", color: "var(--bg)" }}>
              konstantin@dealvault.tech
              <ArrowUR size={14} />
            </a>
          </div>

          <svg className="checkmark-bg" viewBox="0 0 100 100" aria-hidden>
            <path d="M5 50 L40 85 L95 15" stroke="currentColor" strokeWidth="10" fill="none" strokeLinecap="square" />
          </svg>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <BrandLockup tagline />
            <p className="body-m" style={{ marginTop: 18, color: "var(--muted)", maxWidth: "32ch" }}>
              Specialist matchmaking for Fintech and Web3 startups. Vetted partners, warm intros, $0 to you.
            </p>
          </div>
          <div className="footer-col">
            <h4>Sections</h4>
            <a href="#problem">Problem</a>
            <a href="#what">What we do</a>
            <a href="#why">Why DealVault</a>
            <a href="#how">How it works</a>
            <a href="#team">Team</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <a href="mailto:dmitrii@dealvault.tech">dmitrii@dealvault.tech</a>
            <a href="mailto:konstantin@dealvault.tech">konstantin@dealvault.tech</a>
            <a href="https://dealvault.tech" target="_blank" rel="noopener">dealvault.tech</a>
          </div>
          <div className="footer-col">
            <h4>Verticals</h4>
            <a href="#what">Fintech</a>
            <a href="#what">Web3</a>
            <a href="#what">International</a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© DealVault 2026 — All rights reserved</span>
          <span>Media Partnership Advisory</span>
        </div>
      </div>
    </footer>
  );
}

window.Team = Team;
window.HonestPart = HonestPart;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;