function Hero({ tweaks }) {
  const heroVariant = tweaks.heroVariant || "simplified";
  const variants = {
    simplified: {
      eyebrow: "Built for Cheer & Dance",
      title: <>Online and Gate Tickets <span className="accent">Simplified.</span></>,
      sub: "Primo's all-in-one digital ticketing platform is built for cheer and dance producers — event setup, sales, on-site scanning, sponsors and reporting, so you can focus on running a great competition."
    },
    operations: {
      eyebrow: "The all-in-one ticketing platform for cheer & dance",
      title: <>Sell tickets. Run comps. <span className="accent">Track every dollar.</span></>,
      sub: "Built for cheer and dance event producers. Online sales, at-the-door equipment, real-time reporting and a sponsor pipeline — all in one portal."
    },
    partner: {
      eyebrow: "Trusted by cheer & dance producers since 2021",
      title: <>The ticketing partner <span className="accent">that actually answers the phone.</span></>,
      sub: "Primo replaces piecemeal ticketing tools with one platform — and the support team that built it. From Durango, CO, by people who know the cheer and dance world."
    }
  };
  const v = variants[heroVariant];

  return (
    <section className="hero">
      <div className="hero-bg"><div className="hero-grid"></div></div>
      <div className="wrap hero-inner">
        <h1>{v.title}</h1>
        <p className="hero-sub">{v.sub}</p>
        <div className="hero-cta">
          <a href="schedule.html" className="btn btn-primary">Talk to a specialist</a>
        </div>
        <div className="hero-meta">
          <span><Icon name="check" size={14} /> No setup fees</span>
          <span><Icon name="check" size={14} /> Online + at-the-door sales</span>
          <span><Icon name="check" size={14} /> Digital tickets</span>
          <span><Icon name="check" size={14} /> One-click payments</span>
          <span><Icon name="check" size={14} /> Real-time reporting</span>
          <span><Icon name="check" size={14} /> Live US-based support</span>
        </div>

        <HeroQuote />

        {(!tweaks || tweaks.showLogos !== false) && <LogoStrip inHero />}

        <div className="hero-stage">
          <FloatCardTop />
          <FloatCardBottom />
          <div className="hero-screenshot">
            <img src="assets/feat-event-setup.png" alt="Primo Ticketing event setup" />
          </div>
        </div>
      </div>
    </section>);

}

function FloatCardTop() {
  return (
    <div className="float-card float-card-top">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div>
          <div className="float-card-label">Tickets sold · today</div>
          <div className="float-card-value">1,840</div>
          <div className="float-card-trend">
            <Icon name="arrow-right" size={12} style={{ transform: "rotate(-45deg)" }} /> +37% vs. last event
          </div>
        </div>
        <div style={{ width: 48, height: 48, borderRadius: 12, background: "linear-gradient(135deg, rgba(0,181,226,0.18), rgba(0,181,226,0.05))", color: "var(--cyan-deep)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="ticket" size={22} />
        </div>
      </div>
      <div className="mini-chart">
        {[42, 55, 48, 72, 60, 80, 68, 92, 78, 100].map((h, i) => <i key={i} style={{ height: h + "%" }} />)}
      </div>
    </div>);

}

function FloatCardBottom() {
  return (
    <div className="float-card float-card-bottom">
      <div className="float-card-label">Sponsor revenue</div>
      <div className="float-card-value">$505,200</div>
      <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
        <span style={{ padding: "3px 8px", background: "rgba(123,92,255,0.1)", color: "var(--accent-purple)", fontSize: 11, fontWeight: 700, borderRadius: 6, letterSpacing: "0.04em" }}>TITLE · 1</span>
        <span style={{ padding: "3px 8px", background: "rgba(245,159,0,0.12)", color: "#B07300", fontSize: 11, fontWeight: 700, borderRadius: 6, letterSpacing: "0.04em" }}>GOLD · 3</span>
        <span style={{ padding: "3px 8px", background: "rgba(180,180,180,0.18)", color: "#5A6478", fontSize: 11, fontWeight: 700, borderRadius: 6, letterSpacing: "0.04em" }}>SILVER · 3</span>
      </div>
    </div>);

}

function HeroQuote() {
  const stars =
  <div className="hero-quote-stars" aria-label="5 out of 5 stars">
      {[0, 1, 2, 3, 4].map((i) =>
    <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 1-5 4.8 1.2 7-6.2-3.4L5.8 21.3 7 14.3 2 9.5l7-1z" /></svg>
    )}
    </div>;

  return (
    <div className="hero-quotes">
      <figure className="hero-quote">
        <div className="hero-quote-mark">"</div>
        <blockquote>
          We are very happy with Primo Ticketing! We have been using the system for over <strong>four years</strong> now with <strong>ZERO glitches</strong>. The customer support and training for our staff has been awesome — I highly recommend Primo.
        </blockquote>
        <figcaption>
          <div className="hero-quote-avatar">BL</div>
          <div>
            <div className="hero-quote-name">Bubba L.</div>
            <div className="hero-quote-role">Cheer Event Producer</div>
          </div>
          {stars}
        </figcaption>
      </figure>
      <figure className="hero-quote">
        <div className="hero-quote-mark">"</div>
        <blockquote>
          The Primo Ticketing team has <strong>exceeded our expectations</strong> in every way. Because of their rapid response times and genuine care for their customers, we've been able to focus on <strong>growing our company</strong>.
        </blockquote>
        <figcaption>
          <div className="hero-quote-avatar" style={{ background: "linear-gradient(135deg, #7C5CF5, #3D7BF6)" }}>CS</div>
          <div>
            <div className="hero-quote-name">Carissa S.</div>
            <div className="hero-quote-role">Cheer Event Producer</div>
          </div>
          {stars}
        </figcaption>
      </figure>
    </div>);

}

window.Hero = Hero;