/* ===== Plan Tier Selection ===== */

const TIERS = [
  {
    id: 'sprout',
    name: 'Sprout',
    tagline: 'Site analysis plan',
    price: 70,
    desc: 'Everything we learned about your site, documented — perfect if you want to DIY the design with pro-grade info.',
    features: [
      { txt: 'Scaled site plan with existing elements' },
      { txt: 'Analysis document: climate, sun, soil' },
      { txt: 'Flags for wetland, easements, utilities' },
      { txt: 'PDF + mobile view' },
    ],
    color: 'foliage',
    icon: 'sprout',
  },
  {
    id: 'bud',
    name: 'Bud',
    tagline: 'Basic schematic plan',
    price: 249,
    desc: 'The design you just saw, packaged and delivered. Materials list and one revision included.',
    features: [
      { txt: 'Everything in Sprout' },
      { txt: 'Schematic plan with layout & sizes' },
      { txt: '1–3 visual renders of your yard' },
      { txt: 'Materials list (hardscape + plant species)' },
      { txt: '1 revision round included' },
    ],
    color: 'clay',
    icon: 'flower-2',
    featured: true,
  },
  {
    id: 'bloom',
    name: 'Bloom',
    tagline: 'Comprehensive detailed plan',
    price: 449,
    desc: 'The full deliverable. Individual plant placement, quantities, spacing — ready to hand to a contractor or build yourself.',
    features: [
      { txt: 'Everything in Bud' },
      { txt: 'Detailed planting plan at legible scale' },
      { txt: 'Plant table with species, spacing, qty' },
      { txt: '2–6 visual renders' },
      { txt: '2 revision rounds included' },
    ],
    color: 'foliage',
    icon: 'trees',
  },
];

const Tiers = ({ onContinue, selected, setSelected }) => {
  return (
    <div className="screen screen-fade-in">
      <StepRail current="tiers" />
      <div className="screen__main" style={{ maxWidth: 1100 }}>
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 40px' }}>
          <div className="eyebrow" style={{ justifyContent: 'center' }}><span className="eyebrow__dot" />Step 06 · Choose a plan</div>
          <h2 className="serif" style={{ fontSize: 44, marginTop: 14, letterSpacing: '-0.022em' }}>
            Which plan would you like delivered?
          </h2>
          <p className="secondary" style={{ fontSize: 16, marginTop: 12, lineHeight: 1.55 }}>
            Priced for your <strong style={{ color: 'var(--fg-primary)' }}>4,200 ft²</strong> back yard. One revision included with Bud and Bloom — you can always add more later.
          </p>
        </div>

        <div className="tier-grid">
          {TIERS.map(t => (
            <div key={t.id} className="tier-card" data-selected={selected === t.id} data-featured={t.featured}>
              {t.featured && <div className="tier-card__ribbon">Recommended</div>}
              <div className="tier-card__head">
                <div className="tier-card__icon" data-color={t.color}><Icon name={t.icon} size={22} /></div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--fg-muted)', textTransform: 'uppercase' }}>{t.tagline}</div>
                  <h3 className="serif" style={{ fontSize: 32, marginTop: 2, letterSpacing: '-0.018em' }}>{t.name}</h3>
                </div>
              </div>
              <div className="tier-card__price">
                <span className="tier-card__amount">${t.price}</span>
                <span className="tier-card__unit">one-time</span>
              </div>
              <p style={{ fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.55 }}>{t.desc}</p>
              <ul className="tier-card__features">
                {t.features.map((f, i) => (
                  <li key={i}><Icon name="check" size={14} stroke={2.5} /><span>{f.txt}</span></li>
                ))}
              </ul>
              <button
                className={`btn ${t.featured ? 'btn--accent' : 'btn--primary'} btn--lg`}
                style={{ width: '100%', marginTop: 'auto' }}
                onClick={() => setSelected(t.id)}
              >
                {selected === t.id ? <><Icon name="check" size={14} /> Selected</> : `Choose ${t.name}`}
              </button>
            </div>
          ))}
        </div>

        <div className="row" style={{ justifyContent: 'space-between', marginTop: 32 }}>
          <div className="muted" style={{ fontSize: 13, maxWidth: 380 }}>
            Add-ons available at checkout: extra revisions, custom plant care docs, how-to guides.
          </div>
          <button className="btn btn--accent btn--lg" onClick={onContinue} disabled={!selected}>
            Continue to checkout <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Tiers, TIERS });