// Enclaverse homepage v2 — stats, how it works, for brands, for creators.
const secDS = window.EnclaverseDesignSystem_e22b90;
const { Reveal } = window.EnclaverseHome;

function Stats() {
  const stats = [
    { n: "€500–50k", l: "campaign budgets we run" },
    { n: "EU + US", l: "markets covered" },
    { n: "48h", l: "to your first proposal" },
    { n: "120k+", l: "audiences our creators reach" },
  ];
  return (
    <section data-screen-label="Stats" style={{ background: "var(--surface-tint)", padding: "72px 0" }}>
      <div className="ens-wrap" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, textAlign: "center" }}>
        {stats.map((s, i) => (
          <Reveal key={s.l} delay={i * 90}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 3.4vw, 48px)", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--violet-700)" }}>{s.n}</div>
            <div style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 8 }}>{s.l}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { t: "Tell us your goal", d: "UGC, awareness, or conversions. One call, no jargon — we map the campaign to your business goal, not vanity metrics." },
    { t: "We match the creators", d: "Not whoever's trending. Creators who speak to your customers and inspire action — sourced, vetted, briefed by us." },
    { t: "Content goes live", d: "We oversee production and quality. You approve. Nothing ships that doesn't sound like your brand." },
    { t: "You get the numbers", d: "We track, we report, we improve. You'll never wonder if it's working — you'll know." },
  ];
  return (
    <section id="services" data-screen-label="How it works" style={{ padding: "var(--space-24) 0" }}>
      <div className="ens-wrap">
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
            <span className="ens-kicker">How it works</span>
            <h2 className="ens-h2" style={{ fontSize: "clamp(36px, 4vw, 52px)" }}>Stop guessing. Start converting.</h2>
            <p style={{ fontSize: 17, color: "var(--text-body)", lineHeight: 1.7, marginTop: 16 }}>
              Most influencer campaigns fail because they're built on gut feeling. Ours are built on insight, relevance, and creative that earns attention.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, marginTop: 56 }}>
          {steps.map((s, i) => (
            <Reveal key={s.t} delay={i * 100}>
              <div className="ens-card" style={{
                position: "relative", overflow: "hidden", background: "var(--surface-raised)",
                border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-card)",
                padding: "88px 22px 26px", boxShadow: "var(--shadow-card)", height: "100%", boxSizing: "border-box",
              }}>
                <span style={{
                  position: "absolute", top: -18, left: 10, fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 96, letterSpacing: "-0.04em", color: "var(--violet-100)", lineHeight: 1, userSelect: "none",
                }}>{"0" + (i + 1)}</span>
                <h3 style={{ position: "relative", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--text-heading)", margin: 0 }}>{s.t}</h3>
                <p style={{ position: "relative", fontSize: 14.5, color: "var(--text-body)", lineHeight: 1.6, margin: "10px 0 0" }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ForBrands({ onCta }) {
  const items = [
    { t: "Strategy & Execution", d: "Campaigns that match your business goals — not vanity metrics. UGC, awareness, or conversions: we map it out and run it end-to-end." },
    { t: "Creator Sourcing & Oversight", d: "We don't work with whoever's trending. We find creators who speak to your customers — and we stay on the content until it's right." },
    { t: "Performance & Accountability", d: "Concrete numbers, honest reporting, constant iteration. If something underperforms, you hear it from us first." },
  ];
  return (
    <section id="brands" data-screen-label="For brands" style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", padding: "var(--space-24) 0" }}>
      <div className="ens-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end" }}>
          <Reveal>
            <span className="ens-kicker">For brands</span>
            <h2 className="ens-h2">We don't overpromise.<br />We over-deliver.</h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 17, color: "var(--text-body)", lineHeight: 1.7, margin: 0 }}>
              If you want to throw money at influencers and hope for the best, we're not your agency. If you want strategy, clarity, and results you can measure — keep reading.
            </p>
          </Reveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 48 }}>
          {items.map((it, i) => (
            <Reveal key={it.t} delay={i * 100}>
              <div className="ens-card" style={{
                background: i === 1 ? "var(--surface-inverse)" : "var(--surface-page)",
                border: "1px solid " + (i === 1 ? "var(--surface-inverse)" : "var(--border-subtle)"),
                borderRadius: "var(--radius-card)", padding: "28px 26px", height: "100%", boxSizing: "border-box",
              }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 21, fontWeight: 600, letterSpacing: "-0.01em", color: i === 1 ? "#fff" : "var(--text-heading)", margin: 0 }}>{it.t}</h3>
                <p style={{ fontSize: 15, color: i === 1 ? "var(--text-on-inverse)" : "var(--text-body)", opacity: i === 1 ? 0.85 : 1, lineHeight: 1.65, margin: "12px 0 0" }}>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={200}>
          <div style={{ marginTop: 36, textAlign: "center" }}>
            <secDS.Button variant="secondary" size="md" onClick={onCta}>Talk to us about your campaign</secDS.Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ForCreators() {
  const items = [
    "Deals that make sense, and make money",
    "Support on strategy, content, and brand building",
    "Admin, contracts, and negotiations off your plate",
    "Long-term guidance that doesn't kill your style",
  ];
  return (
    <section id="creators" data-screen-label="For creators" style={{ padding: "var(--space-24) 0" }}>
      <div className="ens-wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <Reveal>
          <span className="ens-kicker">For creators</span>
          <h2 className="ens-h2">Representation for people building something real.</h2>
          <p style={{ fontSize: 17, color: "var(--text-body)", lineHeight: 1.7, marginTop: 18 }}>
            We're not talent agents. We're partners. We protect your time, we pitch you with purpose, and we don't waste your audience's trust. We only win when you do.
          </p>
        </Reveal>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {items.map((t, i) => (
            <Reveal key={t} delay={i * 90}>
              <div className="ens-tilt" style={{
                "--rot": (i % 2 === 0 ? "-0.8deg" : "0.9deg"),
                display: "flex", gap: 14, alignItems: "center", background: "var(--surface-raised)",
                border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-card)",
                padding: "18px 22px", boxShadow: "var(--shadow-card)",
              }}>
                <span style={{ width: 26, height: 26, borderRadius: 999, background: "var(--accent)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 700, flexShrink: 0 }}>✓</span>
                <span style={{ fontSize: 16, color: "var(--text-heading)", fontWeight: 500 }}>{t}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EnclaverseHomeSections: { Stats, HowItWorks, ForBrands, ForCreators } });
