/* Pricing — two side-by-side cards (Option A: pay upfront, Option B:
   profit share). Edit headings, prices, or feature lists in the JSX. */

const Pricing = () => {
  const optionAFeatures = [
    'We split the revenue based on a % agreed upfront',    
    'iOS app for launch, Android & web later if it makes sense',
    'Best for energy-rich, cash-light creators',
  ];
  const optionBFeatures = [
    'You keep 100% of your revenue',
    'Best if your offer already converts or you have the capital to invest',
    'Full ownership from day one',
  ];

  return (
    <section id="apply">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">PRICING</div>
          <h2>Two ways to work with us. <span className="it">Pick what feels right.</span></h2>
        </div>

        <div className="pricing-grid">
          {/* Option A */}
          <div className="pricing-card">
            <div className="pricing-badge">Most popular</div>
            <div className="pricing-card-head">
              <span className="eyebrow">OPTION A</span>
              <span className="pricing-card-meta">Profit share</span>
            </div>
            <div className="serif pricing-price">
            <span className="pricing-price-prefix">Your own custom app</span>$0 <span className="pricing-price-sub">upfront</span>
            </div>
            <div className="pricing-tagline">We back you and take the build risk. We only earn when you earn.</div>
            <div className="pricing-features">
              {optionAFeatures.map((t, i) => (
                <div key={i} className="pricing-feature">
                  <span className="pricing-feature-dash">-</span><span>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Option B */}
          <div className="pricing-card is-dark">
            <div className="pricing-popular">Full ownership</div>
            <div className="pricing-card-head">
              <span className="eyebrow">OPTION B</span>
              <span className="pricing-card-meta">Pay upfront</span>
            </div>
            <div className="serif pricing-price">
              <span className="pricing-price-prefix">iOS app starting from</span>$20,000 <span className="pricing-price-was">$30,000</span>
            </div>
            <div className="hand pricing-promo-note">✨ Limited-time launch price ✨</div>
            <div className="pricing-tagline">One payment. You own everything forever.*</div>
            <div className="pricing-features">
              {optionBFeatures.map((t, i) => (
                <div key={i} className="pricing-feature">
                  <span className="pricing-feature-dash">-</span><span>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="pricing-foot">
          * Both options include design, build, and App Store launch. Ongoing server & maintenance costs charged separately.
        </div>
        <div className="pricing-cta">
          <a href="https://tally.so/r/NpM1RW" target="_blank" rel="noopener" className="pill-btn lg">APPLY NOW</a>
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Pricing = Pricing;