// Path split — "For Me" vs "For Someone Else"
const PathCard = ({ tone, icon, kicker, title, copy, buttons, tilt = 0 }) => {
  const isMe = tone === 'sky';
  const bg = isMe ? 'var(--sky-100)' : 'var(--peach-100)';
  const accent = isMe ? 'var(--deep-blue)' : 'var(--brown-800)';
  const iconBg = isMe ? 'var(--sky-300)' : 'var(--peach-200)';
  return (
    <div style={{
      background: bg,
      borderRadius: 24,
      padding: 40,
      position: 'relative',
      transform: `rotate(${tilt}deg)`,
      transition: 'transform .25s ease, box-shadow .25s ease',
      border: '1px solid rgba(58,36,24,.05)',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = `rotate(${tilt}deg) translateY(-4px)`; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = `rotate(${tilt}deg)`; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <div style={{
        width: 56, height: 56, borderRadius: 16, background: iconBg,
        display: 'grid', placeItems: 'center', marginBottom: 22,
        color: accent,
      }}>
        <Icon name={icon} size={26} strokeWidth={1.6}/>
      </div>
      <div className="eyebrow" style={{ color: accent, marginBottom: 10 }}>{kicker}</div>
      <h3 className="serif" style={{ fontSize: 34, fontWeight: 500, margin: '0 0 10px', letterSpacing: '-0.015em' }}>
        {title}
      </h3>
      <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--brown-800)', margin: '0 0 24px', maxWidth: 360 }}>
        {copy}
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        {buttons.map((b, i) => (
          <button key={i} className={i === 0 ? 'btn btn-primary' : 'btn btn-outline'}
            onClick={b.onClick}
            style={i === 0 ? { background: accent } : { borderColor: accent, color: accent }}>
            {b.label} <Icon name="chevron-right" size={14} strokeWidth={2}/>
          </button>
        ))}
      </div>

      {/* tiny decorative cookie */}
      <div style={{ position: 'absolute', right: 24, top: 28, opacity: 0.6 }}>
        <CookieMark size={54} tone={isMe ? 'light' : 'warm'}/>
      </div>
    </div>
  );
};

const PathSplit = ({ onShop, onGift, onClub, onGiftClub }) => {
  return (
    <section style={{ padding: '60px 0 40px' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 40px' }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Pick your path</div>
          <h2 className="serif" style={{ fontSize: 'clamp(30px, 3vw, 42px)', fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>
            Are you buying for yourself, or as a gift?
          </h2>
          <p style={{ color: 'var(--brown-600)', marginTop: 10 }}>
            Two easy ways in — we'll handle the rest.
          </p>
        </div>

        <div className="path-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
        }}>
          <PathCard
            tone="sky"
            icon="user"
            kicker="For Me"
            title="Treat Yourself"
            copy="Order your favorite flavors right now, or join the club and never run out."
            buttons={[
              { label: 'Shop Cookies', onClick: onShop },
              { label: 'Join the Cookie Club', onClick: onClub },
            ]}
          />
          <PathCard
            tone="peach"
            icon="gift"
            kicker="For Someone Else"
            title="Send a Gift"
            copy="One-time gift boxes or a monthly surprise — perfect for birthdays, clients, or just because."
            buttons={[
              { label: 'Send a Gift Box', onClick: onGift },
              { label: 'Gift the Cookie Club', onClick: onGiftClub },
            ]}
          />
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .path-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { PathSplit });