/* ---------- LOGO STRIP (scrolling marquee) ---------- */
function LogoStrip() {
  const customers = [
  "Cheer Max Competitions",
  "Cheer and Dance Extreme",
  "Coast to Coast",
  "East Coast Championships",
  "Freedom Spirit Championships",
  "Redline Championships",
  "Rise Productions",
  "Royal Events",
  "The One"];

  const orgs = [
  { name: "USASF", img: "assets/USASF Short - As of 6.25.26.png" },
  { name: "MotUS", img: "assets/MotUS - full logo 2.jpg" }];

  // Duplicate for seamless marquee loop
  const customersLoop = [...customers, ...customers];
  return (
    <section className="logos">
      <div className="wrap">
        <p className="logos-label">Trusted by leading cheer &amp; dance producers</p>
        <div className="logos-marquee">
          <div className="logos-track">
            {customersLoop.map((name, i) =>
            <div key={i} className="logo-item">{name}</div>
            )}
          </div>
        </div>
        <p className="logos-orgs-label">Proud member of</p>
        <div className="logos-orgs">
          {orgs.map((o, i) =>
          <div key={i} className="logo-item logo-item-org">
              <img
                src={o.img}
                alt={o.name}
                style={{ height: o.name === "MotUS" ? 96 : 48, width: "auto", filter: "grayscale(100%) opacity(0.6)", transition: "filter .2s" }}
                onMouseOver={e => e.currentTarget.style.filter = "grayscale(0%) opacity(1)"}
                onMouseOut={e => e.currentTarget.style.filter = "grayscale(100%) opacity(0.6)"}
              />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- THREE PILLARS — Easy to Sell / Buy / Track ---------- */
function ThreePillars() {
  const pillars = [
  {
    icon: "ticket",
    kicker: "Easy To Sell",
    title: "Three steps. One simple landing page.",
    desc: "Our event wizard walks you through every detail in three easy steps. You'll end up with one crisp landing page to pre-sell tickets — share it anywhere: email, your website, social.",
    tag: "Online + on-site"
  },
  {
    icon: "credit-card",
    kicker: "Easy To Buy",
    title: "Your customers have choices.",
    desc: "They decide how and when to buy. Advance tickets online — delivered straight to Apple Wallet, email, and text. At the door, one-click payments. Every checkout supports the way they want to pay.",
    tag: "Apple Wallet · Apple Pay · Affirm"
  },
  {
    icon: "chart",
    kicker: "Easy To Track",
    title: "See every ticket in real time.",
    desc: "All-in-one platform — tickets sold online and scanned at the door, all in one place. Organizers get an all-access portal with live reporting on every event.",
    tag: "Live dashboards"
  }];

  return (
    <section id="product">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Designed for cheer & dance · It's seamless</span>
          <h2>Three things matter. We made all three easy.</h2>
          <p>Primo's full-service digital ticketing platform saves you time, money and headaches — whether you're running a one-day cheer showcase or a multi-day national championship.</p>
        </div>

        <div className="pillars">
          {pillars.map((p, i) =>
          <div className="pillar" key={i}>
              <div className="pillar-num">0{i + 1}</div>
              <div className="icon-tile" style={{ background: "rgba(0,181,226,0.12)", color: "var(--cyan-deep)" }}>
                <Icon name={p.icon} size={22} />
              </div>
              <div className="pillar-kicker">{p.kicker}</div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
              <span className="pillar-tag">{p.tag}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- BENEFITS ROW (the 6 real benefits) ---------- */
function Benefits() {
  const benefits = [
  { icon: "zap", title: "Saves you time", desc: "Disjointed setup that used to take hours now just takes minutes — and you end up with a better experience for you and your attendees." },
  { icon: "chart", title: "Reduces entry fraud", desc: "Color-coded tickets based on ticket type and days." },
  { icon: "users", title: "Decreases staffing needs", desc: "QR scanning at the door means fewer people manning entry." },
  { icon: "shield", title: "Prepares for the unexpected", desc: "Backup plans, offline scanning, support on call." },
  { icon: "lock", title: "Reduces cash risk", desc: "Digital-first means less cash on hand and fewer reconciliation headaches." },
  { icon: "sponsor", title: "Leverages digital sponsorships", desc: "Built-in sponsor management with logos on tickets and confirmations." }];

  return (
    <section className="benefits">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Why teams switch to Primo</span>
          <h2>Six ways Primo pays for itself.</h2>
        </div>
        <div className="benefits-grid">
          {benefits.map((b, i) =>
          <div className="benefit" key={i}>
              <div className="icon-tile" style={{ background: "rgba(0,181,226,0.08)", color: "var(--cyan-deep)" }}>
                <Icon name={b.icon} size={20} />
              </div>
              <h4>{b.title}</h4>
              <p>{b.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- STATS ---------- */
function Stats() {
  const stats = [
  { value: "1.2M+", label: "Tickets processed for cheer & dance events" },
  { value: "99.7%", label: "Successful checkout rate" },
  { value: "4.9/5", label: "Producer satisfaction" }];

  return (
    <section className="stats">
      <div className="wrap">
        <div className="stats-row">
          {stats.map((s, i) =>
          <div className="stat" key={i}>
              <div className="stat-value">{s.value}</div>
              <div className="stat-label">{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- INDUSTRIES — built for the events you actually run ---------- */
function Industries() {
  const items = [
  { id: "allstar", icon: "trophy", color: "#7B5CFF", bg: "rgba(123,92,255,0.12)", title: "Cheer Comps", desc: "Multi-day championships, regionals and nationals — Primo speaks the language of cheer.", tags: ["Championships", "Regionals", "Nationals", "Multi-day"] },
  { id: "dance", icon: "sparkle", color: "#FF6B5B", bg: "rgba(255,107,91,0.12)", title: "Dance Competitions", desc: "Solos, duets, small groups, large groups, lines and productions — schedule and ticket them all.", tags: ["Solo", "Duet", "Group", "Production"] },
  { id: "school", icon: "users", color: "#16A878", bg: "rgba(22,168,120,0.12)", title: "School & Collegiate", desc: "School cheer & dance, JV, varsity, collegiate showcases and gameday meets.", tags: ["JV", "Varsity", "Gameday", "Collegiate"] },
  { id: "showcases", icon: "heart", color: "#F59F00", bg: "rgba(245,159,0,0.14)", title: "Showcases & Recitals", desc: "End-of-season recitals, showcases and exhibition events.", tags: ["Recital", "Showcase", "Exhibition", "Season-end"] }];

  return (
    <section id="solutions" style={{ background: "var(--paper-warm)" }}>
      <div className="wrap">
        <div className="industries-grid">
          {items.map((it, i) =>
          <div className="industry" id={it.id} key={i}>
              <div className="icon-tile" style={{ background: it.bg, color: it.color }}>
                <Icon name={it.icon} size={20} />
              </div>
              <h4>{it.title}</h4>
              <p>{it.desc}</p>
              <div className="examples">
                {it.tags.map((t, j) => <span key={j}>{t}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- VALUES (the 4 real values) ---------- */
function Values() {
  const values = [
  { icon: "zap", title: "Responsive Excellence", desc: "Swift communication, real humans when you need it, US-based. Your queries get answered fast — that's why partners stay." },
  { icon: "sparkle", title: "Simplicity Redefined", desc: "Intuitive interface, straightforward navigation. Buying tickets and managing events should never feel like work." },
  { icon: "puzzle", title: "Customized Solutions", desc: "Tailored ticket packages and flexible pricing tiers. Every event is different — your platform should flex with it." },
  { icon: "shield", title: "Unwavering Dependability", desc: "Robust infrastructure, reliable uptime, consistent delivery. Your event night isn't the time to discover a tool can't handle the load." }];

  return (
    <section id="why" className="values">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow on-dark"><span className="dot"></span>The Pillars of Our Business</span>
          <h2 style={{ color: "var(--text-on-dark)" }}>Our values aren't on a poster. <span style={{ color: "var(--cyan-bright)" }}>They're in the platform.</span></h2>
          <p style={{ color: "var(--text-on-dark-2)" }}>Built in Durango, Colorado and not Silicon Valley — for event producers who deserve better than a 24-hour ticket from a faceless support queue.</p>
        </div>
        <div className="values-grid">
          {values.map((v, i) =>
          <div className="value-card" key={i}>
              <div className="value-num">0{i + 1}</div>
              <div className="icon-tile" style={{ background: "rgba(0,181,226,0.16)", color: "var(--cyan-bright)" }}>
                <Icon name={v.icon} size={22} />
              </div>
              <h4>{v.title}</h4>
              <p>{v.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- FEATURE SPLITS ---------- */
function FeatureSplit() {
  return (
    <section style={{ padding: "120px 0 60px" }}>
      <div className="wrap">
        <div className="feature-split">
          <div className="feature-info">
            <span className="eyebrow"><span className="dot"></span>Sponsor Management</span>
            <h2 style={{ marginTop: 16 }}>Leverage digital sponsorships — built right in.</h2>
            <p style={{ marginTop: 18, fontSize: 18, color: "var(--text-2)", lineHeight: 1.5 }}>
              Track tiers, contracts and outstanding balances across the season. Sponsor logos appear on tickets, confirmations and on-site signage. No more spreadsheet handoffs.
            </p>
            <ul>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Tier templates.</strong> Title, Gold, Silver, Bronze — set once, reuse every event.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Contract tracking.</strong> Outstanding balances surface on the dashboard, not buried in inboxes.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Logo placements.</strong> Auto-applied to tickets, receipts and on-site digital signage.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Reusable library.</strong> Sponsors carry over season to season with full history.</span></li>
            </ul>
            <a href="#contact" className="btn-link" style={{ marginTop: 28 }}>Talk to a sponsorship specialist <Icon name="arrow-right" size={14} /></a>
          </div>
          <img src={(window.__resources && window.__resources.screenSponsors) || "assets/screen-sponsors.png"} alt="Sponsor management dashboard" />
        </div>
      </div>
    </section>);

}

function FeatureSplit2() {
  return (
    <section style={{ paddingTop: 60 }}>
      <div className="wrap">
        <div className="feature-split reverse">
          <div className="feature-info">
            <span className="eyebrow"><span className="dot"></span>On-site & Box Office</span>
            <h2 style={{ marginTop: 16 }}>Sell at the door and check in — all on one device.</h2>
            <p style={{ marginTop: 18, fontSize: 18, color: "var(--text-2)", lineHeight: 1.5 }}>
              Run walk-up sales and gate scanning from the same connected device. Every sale and scan lands in the same dashboard as your online tickets — no reconciling systems on a championship Sunday.
            </p>
            <ul>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Box office on any device.</strong> Cash, card, contactless and wallet.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Live shift totals.</strong> Gross, refunds and average ticket as the line moves.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>Scanners & iPads.</strong> Assigned per gate, monitored in real time.</span></li>
              <li><span className="check"><Icon name="check" size={14} /></span><span><strong>One dashboard.</strong> On-site and online sales together, instantly.</span></li>
            </ul>
            <a href="#contact" className="btn-link" style={{ marginTop: 28 }}>See on-site features <Icon name="arrow-right" size={14} /></a>
          </div>
          <img src="assets/feat-box-office.png" alt="Box office & on-site sales" />
        </div>
      </div>
    </section>);

}

/* ---------- TESTIMONIALS — real quotes from real customers ---------- */
function Testimonials() {
  const quotes = [
  { quote: "We are very happy with Primo Ticketing! We have been using the system for over four years now with ZERO glitches. The customer support and training for our staff has been awesome — I highly recommend Primo.", name: "Bubba L.", role: "Cheer Event Producer" },
  { quote: "Primo's customer service for not only our event staff, but our ticket holders, is second to none.", name: "Nicole D.", role: "Cheer & Dance Director" },
  { quote: "We love that we can just concentrate on our event, and we do not have to worry about the ticketing. Primo makes sure everything is 100% handled.", name: "Ryan N.", role: "Cheer Comp Director" },
  { quote: "The Primo Ticketing team has exceeded our expectations in every way. Because of their rapid response times and genuine care for their customers, we've been able to focus on growing our company.", name: "Carissa S.", role: "Owner & Founder" },
  { quote: "Man… I just have to say you guys freaking ROCK. Have never experienced such a high level of customer service and such quick responses from any previous partner. Thank you.", name: "Trevor B.", role: "Cheer Event Producer" },
  { quote: "Thank you Primo Ticketing for your customer service and timeliness for which you work. I don't think we could have asked for anything better.", name: "Brad", role: "Cheer Event Producer" }];

  const initials = (n) => n.split(" ").map((w) => w[0]).join("").slice(0, 2);
  return (
    <section id="testimonials" className="testimonials">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>What our users are saying</span>
          <h2>Cheer & dance producers don't switch back.</h2>
          <p>96% of partners renew. Here's what they say in their own words.</p>
        </div>
        <div className="testimonials-grid">
          {quotes.map((q, i) =>
          <figure className="testimonial-card" key={i}>
              <div className="t-mark">"</div>
              <blockquote>{q.quote}</blockquote>
              <figcaption>
                <div className="t-avatar">{initials(q.name)}</div>
                <div>
                  <div className="t-name">{q.name}</div>
                  <div className="t-role">{q.role}</div>
                </div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CTA ---------- */
function CtaSection() {
  return (
    <section id="contact" className="cta-section">
      <div className="wrap">
        <div className="cta-card">
          <span className="eyebrow on-dark"><span className="dot"></span>Join other cheer & dance producers</span>
          <h2 style={{ marginTop: 18 }}>Online and gate tickets, <span className="accent">simplified.</span></h2>
          <p>Easy to sell. Easy to buy. Easy to track. Get your first event live in an afternoon — no setup fees, no monthly fees, no transaction fees.</p>
          <div className="cta-buttons">
            <a href="signup.html" className="btn btn-primary js-signup-trigger">Start Selling Tickets</a>
            <a href="schedule.html" className="btn btn-ghost-dark">Schedule a Demo</a>
          </div>
          <div style={{ marginTop: 32, display: "flex", gap: 32, justifyContent: "center", flexWrap: "wrap", fontSize: 13, color: "var(--text-on-dark-2)" }}>
            <span><Icon name="check" size={14} style={{ color: "var(--cyan-bright)" }} /> Free for producers — one flat fee for buyers</span>
            <span><Icon name="check" size={14} style={{ color: "var(--cyan-bright)" }} /> Same-day onboarding</span>
            <span><Icon name="check" size={14} style={{ color: "var(--cyan-bright)" }} /> Real humans answer your call</span>
          </div>
        </div>
      </div>
    </section>);

}

window.LogoStrip = LogoStrip;
window.ThreePillars = ThreePillars;
window.Benefits = Benefits;
window.Stats = Stats;
window.Industries = Industries;
window.Values = Values;
window.FeatureSplit = FeatureSplit;
window.FeatureSplit2 = FeatureSplit2;
window.Testimonials = Testimonials;
window.CtaSection = CtaSection;