// Hero — split-screen with animated 5-day → shortlist schema

function HeroSchema() {
  const [step, setStep] = React.useState(0); // 0..5  (cycles)
  React.useEffect(() => {
    const t = setInterval(() => {
      setStep((s) => (s + 1) % 6);
    }, 1800);
    return () => clearInterval(t);
  }, []);

  const days = [
    { d: "MON", n: "01" },
    { d: "TUE", n: "02" },
    { d: "WED", n: "03" },
    { d: "THU", n: "04" },
    { d: "FRI", n: "05" },
  ];

  const partners = [
    { type: "Media", name: "Tier-1 Crypto Press", fit: 96, status: 1 },
    { type: "Agency", name: "Performance · Web3 native", fit: 92, status: 1 },
    { type: "KOLs",  name: "6-creator program", fit: 88, status: 2 },
    { type: "Telegram", name: "Community network", fit: 84, status: 3 },
    { type: "Media", name: "Fintech vertical · EU", fit: 81, status: 3 },
  ];
  // status: 1 = matched, 2 = sourcing, 3 = pool
  const statusForStep = (rowIdx) => {
    // by the end of cycle every row reaches status 1
    if (step >= 4) return 1;
    if (step === 0) return 3;
    if (step === 1) return rowIdx < 2 ? 2 : 3;
    if (step === 2) return rowIdx < 3 ? 2 : 3;
    if (step === 3) return rowIdx < 3 ? 1 : 2;
    return 1;
  };

  const STATUS_META = {
    1: { label: "Matched", color: "var(--accent)" },
    2: { label: "Sourcing", color: "var(--ink)" },
    3: { label: "In pool",  color: "var(--muted-2)" },
  };

  const stageLabel = ["Brief intake", "Sourcing", "Sourcing", "Vetting & rates", "Shortlist ready", "Warm intro"][step];

  return (
    <div className="schema reveal reveal-delay-2">
      <div className="schema__inner">
        {/* head */}
        <div className="schema__head">
          <span className="schema__title">Brief → Shortlist</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span className="schema__dot-live" /> LIVE
          </span>
        </div>

        {/* calendar row */}
        <div className="schema__week">
          {days.map((day, i) => {
            const active = i === step - 1 || (step === 0 && i === 0) || (step === 5 && i === 4);
            const done = i < step - 1;
            return (
              <div
                key={day.n}
                className={"schema__day " + (active ? "is-active " : "") + (done ? "is-done " : "")}
              >
                <span className="schema__day-label">{day.d}</span>
                <span className="schema__day-num">{day.n}</span>
                <span className="schema__day-bar" />
              </div>
            );
          })}
        </div>

        {/* status label */}
        <div className="schema__status">
          <span className="schema__status-tag mono">{`STEP 0${step + 1} / 06`}</span>
          <span className="schema__status-text">{stageLabel}</span>
        </div>

        {/* partner rows */}
        <div className="schema__list">
          {partners.map((p, i) => {
            const s = statusForStep(i);
            const meta = STATUS_META[s];
            return (
              <div key={p.name} className={"schema__row schema__row--s" + s}>
                <div className="schema__row-left">
                  <span className="schema__row-type mono">{p.type}</span>
                  <span className="schema__row-name">{p.name}</span>
                </div>
                <div className="schema__row-right">
                  <span className="schema__row-fit mono">
                    {s === 3 ? "—" : `${p.fit}%`}
                  </span>
                  <span
                    className="schema__row-status mono"
                    style={{ color: meta.color }}
                  >
                    <span className="schema__row-led" style={{ background: meta.color }} />
                    {meta.label}
                  </span>
                </div>
              </div>
            );
          })}
        </div>

        {/* footer */}
        <div className="schema__foot">
          <span>Mon → Fri · 5 working days</span>
          <span style={{ color: "var(--accent)" }}>{step === 5 ? "→ Warm intro" : "● Live"}</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ openContact }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="kicker reveal">
              <span className="pill"><span className="dot" /> Fintech · Web3 · International</span>
            </div>

            <h1 className="h-display reveal reveal-delay-1">
              The right media&nbsp;&amp; agency partner for your marketing.
              <span style={{ color: "var(--accent)" }}> In&nbsp;5&nbsp;days.</span>
            </h1>

            <p className="body-l reveal reveal-delay-2" style={{ marginTop: 28, maxWidth: "54ch" }}>
              A specialist matchmaker for Fintech and Web3 startups. We connect you with vetted media and agency partners — without retainers, decks, or wasted weeks.
            </p>

            <div className="hero-cta-row reveal reveal-delay-3">
              <button className="btn btn-primary btn-lg" onClick={openContact}>
                Send request
                <ArrowR size={16} />
              </button>
              <a className="btn btn-ghost btn-lg" href="#how">
                See the 5-day process
              </a>
            </div>

            <div className="hero-meta reveal reveal-delay-4">
              <div className="hero-meta__cell">
                <span className="label">Verticals</span>
                <span className="val">Fintech · Web3</span>
              </div>
              <div className="hero-meta__cell">
                <span className="label">Clients</span>
                <span className="val">International startups</span>
              </div>
              <div className="hero-meta__cell">
                <span className="label">Cost to you</span>
                <span className="val">$0</span>
              </div>
            </div>
          </div>

          <HeroSchema />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;