// Gifting section — emotional
const Gifting = ({ onGift }) => {
  const [duration, setDuration] = React.useState('3');
  const durations = [
    { k: 'one', label: 'One-Time', price: 32, note: 'Ship once' },
    { k: '3',   label: '3 months', price: 81, note: '$27/mo' },
    { k: '6',   label: '6 months', price: 150, note: '$25/mo · save $12' },
    { k: '12',  label: '12 months', price: 276, note: '$23/mo · save $48' },
  ];
  const active = durations.find(d => d.k === duration);

  return (
    <section style={{ padding: '96px 0', background: 'var(--peach-100)' }}>
      <div className="container">
        <div className="gift-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'center',
        }}>
          <div style={{ order: 1 }}>
            <Photo tone="peach" aspect="4/5" label="LIFESTYLE · gift unwrap moment">
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <div style={{
                  width: '72%', aspectRatio: '4/5', borderRadius: 18,
                  background: '#fff', border: '1.5px solid var(--brown-300)',
                  padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
                  boxShadow: '0 40px 60px rgba(139,90,63,.22)',
                  transform: 'rotate(3deg)',
                }}>
                  <div style={{ fontFamily: 'var(--script)', fontSize: 34, color: 'var(--brown-800)', lineHeight: 1 }}>
                    For Jamie —
                  </div>
                  <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--brown-700)', lineHeight: 1.55, flex: 1 }}>
                    Happy birthday, you incredible human. Eat one a day. They're warm if you microwave them for 6 seconds. Love you. — M
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                    <CookieMark size={54}/>
                    <div style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--brown-600)', fontFamily: 'var(--sans)', fontWeight: 600 }}>
                      GIFT NOTE · INCLUDED
                    </div>
                  </div>
                </div>
              </div>
            </Photo>
          </div>

          <div style={{ order: 2 }}>
            <div className="eyebrow" style={{ color: 'var(--brown-700)', marginBottom: 14 }}>
              Send a Gift
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(40px, 4.5vw, 60px)', fontWeight: 500, margin: 0,
              lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--brown-900)',
            }}>
              The gift that shows up<br/>
              <em style={{ fontWeight: 500, color: 'var(--brown-700)' }}>every month.</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, margin: '22px 0 30px', color: 'var(--brown-800)', maxWidth: 480 }}>
              Perfect for birthdays, new-hire welcomes, clients, or "just because." Handwritten note included, shipping included.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 22 }}>
              {durations.map(d => (
                <button key={d.k} onClick={() => setDuration(d.k)}
                  style={{
                    padding: '14px 18px', borderRadius: 14,
                    background: duration === d.k ? 'var(--brown-700)' : '#fff',
                    color: duration === d.k ? '#fff' : 'var(--brown-800)',
                    border: '1.5px solid ' + (duration === d.k ? 'var(--brown-700)' : 'var(--brown-300)'),
                    fontWeight: 600, fontSize: 14, textAlign: 'left', minWidth: 120,
                    transition: 'all .18s',
                  }}>
                  <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 2 }}>{d.label}</div>
                  <div style={{ fontSize: 12, opacity: duration === d.k ? 0.85 : 0.65 }}>{d.note}</div>
                </button>
              ))}
            </div>

            <div style={{
              background: '#fff', border: '1px solid var(--brown-200, var(--brown-100))',
              padding: 18, borderRadius: 14, display: 'flex', alignItems: 'center',
              justifyContent: 'space-between', gap: 16, marginBottom: 24, flexWrap: 'wrap',
            }}>
              <div>
                <div style={{ fontSize: 13, color: 'var(--brown-600)' }}>{active.label} Gift</div>
                <div className="serif" style={{ fontSize: 28, fontWeight: 600, color: 'var(--brown-900)' }}>
                  ${active.price}
                </div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--brown-700)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check" size={16} stroke="var(--ok-green)" strokeWidth={2.2}/>
                Free shipping · Gift note included
              </div>
            </div>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={onGift}>
                <Icon name="gift" size={18} stroke="#fff"/> Send a Gift
              </button>
              <a className="btn btn-outline btn-lg" href={SITE.local.gift}>
                See all gift options
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .gift-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .gift-grid > div:first-child { order: 2 !important; }
          .gift-grid > div:last-child { order: 1 !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Gifting });