/* Premium.jsx — split layout + pricing table */

function PremiumPaywallCard(){
  return (
    <div className="paywall-card">
      <div className="paywall-corner" aria-hidden="true">
        <span>P</span>
      </div>

      <span className="paywall-eyebrow">
        <span className="paywall-pulse" /> Premium
      </span>

      <h3 className="paywall-h">Cook more.<br/>Save <i>everything.</i></h3>

      <p className="paywall-sub">
        Unlimited saves, recipe notes, iCloud sync, smart shopping list, cook-with-what-I-have.
      </p>

      <ul className="paywall-feats">
        <li><span className="pf-mk">✓</span><span>Cook with what I have</span></li>
        <li><span className="pf-mk">✓</span><span>Smart shopping list, de-duped</span></li>
        <li><span className="pf-mk">✓</span><span>iCloud sync, your container only</span></li>
        <li><span className="pf-mk">✓</span><span>Unlimited saves &amp; recipe notes</span></li>
      </ul>

      <div className="paywall-plans">
        <div className="plan featured">
          <div className="plan-top">
            <span className="plan-tag">Yearly</span>
            <span className="plan-badge">Best value</span>
          </div>
          <div className="plan-price">
            <b>$19.99</b><small>/ yr</small>
          </div>
          <span className="plan-alt">7-day free trial · about $1.67/mo</span>
        </div>
        <div className="plan">
          <div className="plan-top">
            <span className="plan-tag">Monthly</span>
          </div>
          <div className="plan-price">
            <b>$2.99</b><small>/ mo</small>
          </div>
          <span className="plan-alt">Cancel anytime</span>
        </div>
      </div>

      <div className="paywall-once">
        Or pay <b>$5.99 once</b> to remove ads. No subscription.
      </div>

      <button className="paywall-cta" type="button">
        Start 7-day free trial
        <span className="paywall-arrow">→</span>
      </button>

      <span className="paywall-stamp" aria-hidden="true">v1.0</span>
    </div>
  );
}

function PriceCard({ tier, name, price, small, alt, feats, featured, badge, cta }){
  return (
    <Reveal className={"price-card " + (featured ? "featured" : "")} delay={1} scale>
      {badge ? <span className="best-value">{badge}</span> : null}
      <span className="tier">{tier}</span>
      <h4>{name}</h4>
      <div className="num">
        <span>{price}</span>
        {small ? <small>{small}</small> : null}
      </div>
      {alt ? <div className="alt">{alt}</div> : null}
      <ul className="feats">
        {feats.map((f,i)=> <li key={i}>{f}</li>)}
      </ul>
      <div className="price-cta">
        <button className="btn btn-ghost" data-cursor="hov" type="button">{cta}</button>
      </div>
    </Reveal>
  );
}

function Premium(){
  return (
    <section id="premium" className="premium">
      <div className="shell">
        <div className="prem-grid">
          <div className="prem-head">
            <span className="eyebrow">Premium · 05</span>
            <h2>Two-ninety-nine a month for <i>a better kitchen.</i></h2>
            <ul className="prem-list">
              <li><span className="mk">✓</span>
                <span><b>Cook with what I have.</b><small>Pantry filter surfaces tonight's possibilities, not yesterday's failures.</small></span>
              </li>
              <li><span className="mk">✓</span>
                <span><b>Smart shopping list.</b><small>Adds five recipes' ingredients, dedupes them, sorts by store aisle.</small></span>
              </li>
              <li><span className="mk">✓</span>
                <span><b>iCloud sync.</b><small>Your saves and notes ride with you to a new device. Your container, your container only.</small></span>
              </li>
              <li><span className="mk">✓</span>
                <span><b>Unlimited saves &amp; recipe notes.</b><small>Scribble the cream-adjustments only you would make.</small></span>
              </li>
            </ul>
          </div>
          <div className="prem-phone-stage">
            <PremiumPaywallCard />
          </div>
        </div>

        <div className="pricing">
          <PriceCard
            tier="Tier 01"
            name="Free"
            price="$0"
            alt="Forever, with ads."
            feats={[
              "All 200+ recipes",
              "Sticker unlocks via Points",
              "Daily quest + level system",
              "Up to 20 saved recipes",
            ]}
            cta="Get the app"
          />
          <PriceCard
            tier="One-time"
            name="Remove Ads"
            price="$5.99"
            small="once"
            alt="Non-consumable. Yours forever."
            feats={[
              "Everything in Free",
              "No banners, no interstitials",
              "Pay once. Never again.",
              "Not a subscription, on purpose.",
            ]}
            cta="Buy once"
          />
          <PriceCard
            tier="Tier 02"
            name="Premium"
            price="$2.99"
            small="/ month"
            alt="Or $19.99/yr with 7-day free trial"
            feats={[
              "Cook with what I have",
              "Smart shopping list (with de-dupe)",
              "iCloud sync to your container",
              "Unlimited saves + recipe notes",
              "Removes ads, naturally",
            ]}
            featured
            cta="Start 7-day trial"
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Premium });