function Pricing() {
  const included = [
    { icon: "shield",      title: "Chargeback guarantee" },
    { icon: "credit-card", title: "Card processing fees" },
    { icon: "check-circle",title: "Refund management" },
    { icon: "lock",        title: "Fraud protection" },
    { icon: "users",       title: "Live US-based support" },
    { icon: "chart",       title: "Reporting & analytics" },
    { icon: "qr",          title: "On-site scanning equipment" },
    { icon: "sponsor",     title: "Sponsor management tools" },
  ];

  return (
    <section id="pricing" className="pricing">
      <div className="wrap">
        <div className="section-head" style={{textAlign:"center", margin:"0 auto"}}>
          <span className="eyebrow" style={{justifyContent:"center"}}><span className="dot"></span>Pricing · Simple as it gets</span>
          <h2 style={{marginTop:16}}>You pay <span className="accent-cyan">nothing.</span></h2>
          <p style={{margin:"18px auto 0", maxWidth:640}}>
            Primo charges a flat 12% service fee to the ticket purchaser. As an event producer, your cost is zero — no setup fees, no monthly fees, no transaction fees, no hidden surprises.
          </p>
        </div>

        <div className="pricing-grid">
          {/* Producer card — the hero */}
          <div className="price-card price-card-primary">
            <div className="price-tag">For Event Producers</div>
            <div className="price-amount">
              <span className="dollar">$</span>
              <span className="num">0</span>
              <span className="per">/ event</span>
            </div>
            <p className="price-sub">No setup fees. No monthly fees. No transaction fees. Ever.</p>

            <div className="price-divider"><span>What's included</span></div>

            <ul className="price-includes">
              {included.map((it,i)=> (
                <li key={i}>
                  <span className="price-icon"><Icon name={it.icon} size={14}/></span>
                  {it.title}
                </li>
              ))}
            </ul>

            <div className="price-cta-row" style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <a href="signup.html" className="btn btn-primary price-cta">
                Start Selling Tickets
              </a>
              <a href="schedule.html" className="btn btn-ghost price-cta">
                Schedule a Demo
              </a>
            </div>
          </div>

          {/* Buyer card — context */}
          <div className="price-card price-card-secondary">
            <div className="price-tag price-tag-light">For Ticket Buyers</div>
            <div className="price-amount price-amount-small">
              <span className="num">12<span className="pct">%</span></span>
              <span className="per">flat service fee</span>
            </div>
            <p className="price-sub">Transparent at checkout. No surprise add-ons.</p>

            <div className="avg-callout">
              <div className="avg-label">Average ticket buyer pays just</div>
              <div className="avg-value">$3.41<span className="avg-unit">/ ticket or less</span></div>
              <div className="avg-context">
                Based on a $25 ticket price. Includes everything: card processing, chargeback guarantee, refund management, fraud protection.
              </div>
            </div>

            <div className="vs-block">
              <div className="vs-row">
                <span className="vs-label">Card processing fees</span>
                <span className="vs-included"><Icon name="check" size={14}/> Included</span>
              </div>
              <div className="vs-row">
                <span className="vs-label">Chargeback liability</span>
                <span className="vs-included"><Icon name="check" size={14}/> Included</span>
              </div>
              <div className="vs-row">
                <span className="vs-label">Refund management</span>
                <span className="vs-included"><Icon name="check" size={14}/> Included</span>
              </div>
              <div className="vs-row">
                <span className="vs-label">Hidden fees</span>
                <span className="vs-excluded">Never</span>
              </div>
            </div>
          </div>
        </div>

        <div className="pricing-footnote">
          <Icon name="check-circle" size={18}/>
          One flat fee. No surprises for you, no surprises for your ticket holders.
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;