/* ===== Checkout ===== */

const Checkout = ({ tierId, onComplete }) => {
  const tier = TIERS.find(t => t.id === tierId) || TIERS[1];
  const [bundle, setBundle] = React.useState(true);
  const [revisions, setRevisions] = React.useState(true);
  const [care, setCare] = React.useState(false);
  const [placed, setPlaced] = React.useState(false);

  const plantsSubtotal = 1240;
  const plantsBundled = bundle ? Math.round(plantsSubtotal * 0.9) : plantsSubtotal;
  const revisionsPrice = revisions ? 20 : 0;
  const carePrice = care ? 39 : 0;
  const total = tier.price + (bundle ? plantsBundled : 0) + revisionsPrice + carePrice;

  if (placed) {
    return (
      <div className="screen screen-fade-in">
        <div className="success-screen">
          <div className="generating__bloom"><BlossomMark size={64} color="#3D4421" accent="#D97757" /></div>
          <div className="eyebrow" style={{ justifyContent: 'center' }}><span className="eyebrow__dot" />Design saved</div>
          <h2 className="serif" style={{ fontSize: 48, marginTop: 14, letterSpacing: '-0.022em', textAlign: 'center' }}>
            Your back garden<br/>is on its way.
          </h2>
          <p className="secondary" style={{ fontSize: 17, marginTop: 16, textAlign: 'center', maxWidth: 500, lineHeight: 1.55 }}>
            Your <strong style={{ color: 'var(--fg-primary)' }}>{tier.name}</strong> plan will be in your inbox in about 10 minutes. Plants ship next Tuesday — perfect timing for spring planting.
          </p>
          <div className="row" style={{ gap: 12, marginTop: 36 }}>
            <button className="btn btn--ghost btn--lg"><Icon name="download" size={16} /> Download plan</button>
            <button className="btn btn--accent btn--lg"><Icon name="folder" size={16} /> Open my project</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="screen screen-fade-in">
      <StepRail current="checkout" />
      <div className="screen__main checkout" style={{ maxWidth: 1100 }}>
        <div className="checkout__grid">
          <div>
            <div className="eyebrow"><span className="eyebrow__dot" />Step 07 · Checkout</div>
            <h2 className="serif" style={{ fontSize: 36, marginTop: 10, letterSpacing: '-0.02em' }}>
              Review & confirm.
            </h2>

            <div className="checkout__section">
              <div className="checkout__section-head">
                <h4 style={{ fontSize: 16, fontWeight: 600 }}>Your plan</h4>
                <button className="btn btn--text btn--sm"><Icon name="edit-3" size={12} /> Change</button>
              </div>
              <div className="checkout-item">
                <div className="checkout-item__icon" data-color="clay"><Icon name={tier.icon} size={20} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>{tier.name} — {tier.tagline}</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>4,200 ft² · Snoqualmie backyard</div>
                </div>
                <div className="mono" style={{ fontWeight: 600 }}>${tier.price}.00</div>
              </div>
            </div>

            <div className="checkout__section">
              <div className="checkout__section-head">
                <h4 style={{ fontSize: 16, fontWeight: 600 }}>Plants</h4>
                <span className="badge badge--sun">Bundle · save 10%</span>
              </div>

              <label className="checkout-toggle" data-on={bundle}>
                <input type="checkbox" checked={bundle} onChange={e => setBundle(e.target.checked)} hidden />
                <div className="checkout-toggle__check"><Icon name="check" size={12} stroke={3} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>Ship my plants with the plan</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>
                    38 plants across 9 species, delivered to your door. Wholesale-priced, 10% off with plan.
                  </div>
                </div>
                <div className="mono" style={{ textAlign: 'right' }}>
                  {bundle && <div style={{ fontSize: 11, color: 'var(--fg-muted)', textDecoration: 'line-through' }}>${plantsSubtotal}.00</div>}
                  <div style={{ fontWeight: 600 }}>${bundle ? plantsBundled : plantsSubtotal}.00</div>
                </div>
              </label>

              {bundle && (
                <div className="plant-thumbs">
                  {PLANT_LIST.slice(0, 7).map((p, i) => (
                    <div key={i} className="plant-thumb" style={{ background: p.color }}>
                      <span>{p.code}</span>
                    </div>
                  ))}
                  <div className="plant-thumb plant-thumb--more">+31</div>
                </div>
              )}
            </div>

            <div className="checkout__section">
              <div className="checkout__section-head">
                <h4 style={{ fontSize: 16, fontWeight: 600 }}>Add-ons</h4>
              </div>

              <label className="checkout-toggle" data-on={revisions}>
                <input type="checkbox" checked={revisions} onChange={e => setRevisions(e.target.checked)} hidden />
                <div className="checkout-toggle__check"><Icon name="check" size={12} stroke={3} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>Add 2 more revisions — <span style={{ color: 'var(--clay-600)' }}>save $9 by adding now</span></div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>$20 now · $29 later</div>
                </div>
                <div className="mono" style={{ fontWeight: 600 }}>$20.00</div>
              </label>

              <label className="checkout-toggle" data-on={care}>
                <input type="checkbox" checked={care} onChange={e => setCare(e.target.checked)} hidden />
                <div className="checkout-toggle__check"><Icon name="check" size={12} stroke={3} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>Custom plant care guide & reminders</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Watering, pruning, and seasonal tasks for your specific plants.</div>
                </div>
                <div className="mono" style={{ fontWeight: 600 }}>$39.00</div>
              </label>
            </div>

            <div className="checkout__section">
              <div className="checkout__section-head">
                <h4 style={{ fontSize: 16, fontWeight: 600 }}>Delivery</h4>
              </div>
              <div className="checkout-item">
                <div className="checkout-item__icon" data-color="foliage"><Icon name="home" size={18} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>Emily · 8602 378th Ave SE, Snoqualmie, WA 98065</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Plants arrive Tuesday, May 5 · Plan PDF within 10 minutes</div>
                </div>
                <button className="btn btn--text btn--sm"><Icon name="edit-3" size={12} /></button>
              </div>
            </div>
          </div>

          <aside className="checkout__summary">
            <h4 style={{ fontSize: 14, fontWeight: 600 }}>Order summary</h4>
            <div className="checkout-row"><span>{tier.name} plan</span><span className="mono">${tier.price}.00</span></div>
            {bundle && (
              <>
                <div className="checkout-row"><span>Plants (38)</span><span className="mono">${plantsSubtotal}.00</span></div>
                <div className="checkout-row" style={{ color: 'var(--clay-600)' }}><span>Bundle discount</span><span className="mono">−${plantsSubtotal - plantsBundled}.00</span></div>
              </>
            )}
            {revisions && <div className="checkout-row"><span>Extra revisions</span><span className="mono">$20.00</span></div>}
            {care && <div className="checkout-row"><span>Plant care guide</span><span className="mono">$39.00</span></div>}
            <div className="checkout-row checkout-row--total">
              <span>Total</span><span className="mono">${total}.00</span>
            </div>

            <div className="checkout__payment">
              <div className="checkout__payment-row">
                <Icon name="credit-card" size={16} />
                <span style={{ fontWeight: 500 }}>Visa ending 4242</span>
                <button className="btn btn--text btn--sm" style={{ marginLeft: 'auto' }}><Icon name="chevron-right" size={14} /></button>
              </div>
            </div>

            <button className="btn btn--accent btn--lg" style={{ width: '100%', marginTop: 14 }} onClick={() => setPlaced(true)}>
              Place order · ${total}.00
              <Icon name="arrow-right" size={16} />
            </button>
            <p className="muted" style={{ fontSize: 11, marginTop: 12, textAlign: 'center', lineHeight: 1.5 }}>
              Design delivered in 10 min. Plants ship in 5 business days. 30-day design satisfaction guarantee.
            </p>
          </aside>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Checkout });