// Enclaverse homepage v2 — work marquee, testimonials, north star, final CTA.
const socDS = window.EnclaverseDesignSystem_e22b90;
const { Reveal } = window.EnclaverseHome;

const workData = [
  { id: "reel-garmin", brand: "Garmin", creator: "Clara Lambrughi", tag: "Product launch" },
  { id: "reel-loreal", brand: "L'Oréal", creator: "Costanza Tebaldini", tag: "Beauty campaign" },
  { id: "reel-gentle", brand: "Gentle Brands", creator: "Clizia Somma", tag: "UGC series" },
  { id: "reel-cesari", brand: "Creator collab", creator: "Niccolò Cesari · 120k", tag: "Awareness" },
  { id: "reel-spoto", brand: "Creator collab", creator: "Niccolò Spoto", tag: "Conversion" },
];

function WorkCard({ r, rot }) {
  return (
    <figure className="ens-tilt" style={{ "--rot": rot, margin: 0, flexShrink: 0 }}>
      <div style={{ position: "relative", width: 248, height: 420, borderRadius: 22, overflow: "hidden", border: "1px solid var(--border-subtle)", background: "var(--surface-tint)", boxShadow: "var(--shadow-card)" }}>
        <image-slot id={r.id} shape="rect" placeholder={"Drop reel cover — " + r.brand}></image-slot>
        <div style={{ position: "absolute", left: 12, right: 12, bottom: 12, pointerEvents: "none", display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start" }}>
          <span style={{ background: "rgba(23,18,58,0.78)", color: "#fff", fontSize: 10.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", padding: "4px 10px", borderRadius: 999 }}>{r.tag}</span>
          <span style={{ background: "rgba(255,255,255,0.94)", color: "var(--ink-900)", fontSize: 12.5, fontWeight: 600, padding: "6px 11px", borderRadius: 9 }}>{r.brand} <span style={{ color: "var(--text-muted)", fontWeight: 500 }}>· {r.creator}</span></span>
        </div>
        <div style={{ position: "absolute", top: 12, right: 12, width: 34, height: 34, borderRadius: 999, background: "rgba(255,255,255,0.94)", display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none", fontSize: 12, color: "var(--violet-700)" }}>▶</div>
      </div>
    </figure>
  );
}

function Work() {
  const rots = ["-1.4deg", "1.1deg", "-0.8deg", "1.5deg", "-1.1deg"];
  return (
    <section id="work" data-screen-label="Recent work" style={{ padding: "var(--space-24) 0", overflow: "hidden" }}>
      <div className="ens-wrap">
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 48px" }}>
            <span className="ens-kicker">Recent work</span>
            <h2 className="ens-h2">Reels that earned attention.</h2>
            <p style={{ fontSize: 16, color: "var(--text-muted)", marginTop: 14 }}>Placeholder covers — drag real reel thumbnails onto the cards.</p>
          </div>
        </Reveal>
      </div>
      <Reveal delay={100}>
        <div style={{ display: "flex", gap: 22, justifyContent: "center", padding: "8px 24px" }}>
          {workData.map((r, i) => <WorkCard key={r.id} r={r} rot={rots[i]} />)}
        </div>
      </Reveal>
    </section>
  );
}

const quotes = [
  { q: "The influencers they selected were a perfect match for our campaign goals, delivering great results. Communication was seamless.", n: "Angela S.", r: "Gentle Brands" },
  { q: "Collaborare con voi è stato stimolante e autentico, spero ci siano presto nuove occasioni per lavorare insieme!", n: "Giuseppe Laguardia", r: "Influencer" },
  { q: "I no longer have to worry about managing relationships with the brand, and I have constant support from beginning to end.", n: "Niccolò Cesari", r: "Influencer · 120k" },
  { q: "Professional, fast, and honest about what works. Exactly what we needed after two agencies that weren't.", n: "M. Rossi", r: "DTC brand" },
];

function QuoteCard({ t }) {
  return (
    <div style={{
      flexShrink: 0, width: 380, boxSizing: "border-box", background: "var(--surface-raised)",
      border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-card)",
      padding: "24px 26px", boxShadow: "var(--shadow-card)",
    }}>
      <p style={{ fontSize: 15, color: "var(--text-body)", lineHeight: 1.65, margin: 0 }}>"{t.q}"</p>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 18 }}>
        <span style={{ width: 36, height: 36, borderRadius: 999, background: "var(--violet-200)", color: "var(--violet-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 14 }}>{t.n[0]}</span>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--text-heading)" }}>{t.n}</div>
          <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{t.r}</div>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  const row = quotes.map((t) => <QuoteCard key={t.n} t={t} />);
  const rowB = quotes.map((t) => <QuoteCard key={t.n + "b"} t={t} />);
  return (
    <section id="reviews" data-screen-label="Testimonials" 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">
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 44px" }}>
            <span className="ens-kicker">What do they say about us?</span>
            <h2 className="ens-h2">Brands and creators, on the record.</h2>
          </div>
        </Reveal>
      </div>
      <div className="ens-marquee">
        <div className="ens-marquee-track" style={{ gap: 22, "--dur": "44s" }}>
          <div style={{ display: "flex", gap: 22 }}>{row}</div>
          <div style={{ display: "flex", gap: 22 }} aria-hidden="true">{rowB}</div>
        </div>
      </div>
    </section>
  );
}

function NorthStar() {
  return (
    <section data-screen-label="North star" style={{ padding: "var(--space-24) 0" }}>
      <div className="ens-wrap" style={{ maxWidth: 820, textAlign: "center" }}>
        <Reveal>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 88, lineHeight: 0.4, color: "var(--violet-300)", display: "block", fontWeight: 700 }}>"</span>
          <blockquote style={{ fontFamily: "var(--font-display)", fontSize: "clamp(30px, 3.6vw, 44px)", letterSpacing: "-0.015em", color: "var(--text-heading)", lineHeight: 1.2, margin: "20px 0 0", fontWeight: 600 }}>
            Don't bunt. Aim <span className="ens-mark">out of the ballpark</span>.
          </blockquote>
          <div style={{ fontSize: 15, color: "var(--text-muted)", marginTop: 18 }}>— David Ogilvy, our north star</div>
        </Reveal>
      </div>
    </section>
  );
}

function FinalCta({ onCta }) {
  const line = Array.from({ length: 6 }, (_, i) => (
    <span key={i} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 72, letterSpacing: "-0.02em", whiteSpace: "nowrap", color: "transparent", WebkitTextStroke: "1px rgba(239,236,249,0.22)", marginRight: 48 }}>
      Ready to do this right? ✦
    </span>
  ));
  return (
    <section data-screen-label="Final CTA" style={{ background: "var(--surface-inverse)", padding: "0 0 96px", overflow: "hidden" }}>
      <div className="ens-marquee" style={{ padding: "44px 0 8px" }}>
        <div className="ens-marquee-track" style={{ "--dur": "36s" }}>
          <div style={{ display: "flex" }}>{line}</div>
          <div style={{ display: "flex" }} aria-hidden="true">{line}</div>
        </div>
      </div>
      <div className="ens-wrap" style={{ maxWidth: 720, textAlign: "center", marginTop: 40 }}>
        <Reveal>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(38px, 4.4vw, 56px)", letterSpacing: "var(--tracking-display)", color: "#fff", lineHeight: 1.08, margin: 0, fontWeight: 700 }}>
            Once you work with us,<br />you won't go back.
          </h2>
          <p style={{ fontSize: 17, color: "var(--text-on-inverse)", opacity: 0.8, lineHeight: 1.7, marginTop: 20 }}>
            If you're a brand that wants more than noise, or a creator ready to be taken seriously — write to us.
          </p>
          <div style={{ marginTop: 34 }}>
            <socDS.Button variant="inverse" size="lg" onClick={onCta}>Get started →</socDS.Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { EnclaverseHomeSocial: { Work, Testimonials, NorthStar, FinalCta } });