// Burger House — Rewards page (sample, demo-only state)

const TIERS = [
  { name: 'Hatchling',  min: 0,    perk: '5% back, free birthday burger', color: '#a8896a' },
  { name: 'Regular',    min: 250,  perk: '7% back, free side every 5 visits', color: '#c1410f' },
  { name: 'House',      min: 1000, perk: '10% back, secret menu access', color: '#7a2a0a' },
  { name: 'Founders',   min: 3000, perk: '12% back, early access to specials', color: '#1a1714' },
];

const REWARDS = [
  { id: 'r1', name: 'Crinkle Fries',    cost: 80,   img: 'public/crinkle-fries.jpg' },
  { id: 'r2', name: 'House Classic',    cost: 320,  img: 'public/house-classic.jpg' },
  { id: 'r3', name: 'Hot Honey Chicken',cost: 380,  img: 'public/hot-honey-chicken.jpg' },
  { id: 'r4', name: 'Smoke & Blue',     cost: 460,  img: 'public/smoke-blue.jpg' },
  { id: 'r5', name: 'Garden Burger',    cost: 360,  img: 'public/garden.jpg' },
  { id: 'r6', name: 'Double Stack',     cost: 440,  img: 'public/double-stack.jpg' },
];

const RECENT_ACTIVITY = [
  { id: 'a1', date: '02 May', branch: 'Bristol — Clifton', spent: 14.50, points: 145 },
  { id: 'a2', date: '24 Apr', branch: 'Bristol — Clifton', spent: 9.00,  points: 90  },
  { id: 'a3', date: '11 Apr', branch: 'London — Soho',     spent: 22.50, points: 225 },
  { id: 'a4', date: '02 Apr', branch: 'Bristol — Clifton', spent: 8.50,  points: 85  },
  { id: 'a5', date: '24 Mar', branch: 'Manchester — NQ',   spent: 18.00, points: 180 },
];

const RewardCard = ({ r, points, onRedeem }) => {
  const affordable = points >= r.cost;
  return (
    <article style={{
      background: 'var(--surface)',
      border: '1px solid var(--line)',
      borderRadius: 18,
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      opacity: affordable ? 1 : 0.65,
    }}>
      <div style={{ aspectRatio: '4/3', background: 'var(--surface-2)', position: 'relative', overflow: 'hidden' }}>
        <img src={r.img} alt={r.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <span className="pill accent" style={{ position: 'absolute', top: 12, left: 12, height: 26, padding: '0 12px', fontSize: 12 }}>{r.cost} pts</span>
      </div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{r.name}</h3>
        <div className="row between" style={{ marginTop: 'auto', alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
            {affordable ? 'Available now' : `${r.cost - points} pts to go`}
          </span>
          <button
            disabled={!affordable}
            onClick={() => affordable && onRedeem(r)}
            className={affordable ? 'btn btn-primary btn-sm' : 'btn btn-ghost btn-sm'}
            style={{ fontSize: 12, height: 32, cursor: affordable ? 'pointer' : 'not-allowed' }}>
            {affordable ? 'Redeem' : 'Locked'}
          </button>
        </div>
      </div>
    </article>
  );
};

const TierLadder = ({ points }) => {
  const max = TIERS[TIERS.length - 1].min;
  const pct = Math.min(100, (points / max) * 100);
  const currentIdx = TIERS.reduce((acc, t, i) => points >= t.min ? i : acc, 0);
  return (
    <div className="card" style={{ padding: 24, position: 'relative' }}>
      <div className="row between" style={{ marginBottom: 6 }}>
        <span className="eyebrow">Your tier</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{points} / {max} pts</span>
      </div>
      <h3 className="display" style={{ margin: '4px 0 16px', fontSize: 28 }}>{TIERS[currentIdx].name}</h3>
      <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 4, position: 'relative', marginBottom: 30 }}>
        <div style={{ position: 'absolute', inset: 0, width: `${pct}%`, background: 'var(--accent)', borderRadius: 4, transition: 'width .5s' }} />
        {TIERS.map((t, i) => {
          const left = (t.min / max) * 100;
          return (
            <div key={t.name} style={{ position: 'absolute', top: -4, left: `${left}%`, transform: 'translateX(-50%)' }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', background: points >= t.min ? 'var(--accent)' : 'var(--surface)', border: `2px solid ${points >= t.min ? 'var(--accent)' : 'var(--line)'}` }} />
              <div className="mono" style={{ position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)', fontSize: 10, color: points >= t.min ? 'var(--ink)' : 'var(--ink-3)', whiteSpace: 'nowrap', textTransform: 'uppercase' }}>{t.name}</div>
            </div>
          );
        })}
      </div>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)' }}>
        Currently earning <strong>{['5%', '7%', '10%', '12%'][currentIdx]} back</strong> on every order.
        {currentIdx < TIERS.length - 1 && (
          <> Just <strong>{TIERS[currentIdx + 1].min - points} pts</strong> to <strong>{TIERS[currentIdx + 1].name}</strong>.</>
        )}
      </p>
    </div>
  );
};

const RewardsPage = () => {
  // Demo state — real implementation would fetch from server
  const [points, setPoints] = React.useState(620);
  const [redeemed, setRedeemed] = React.useState([]);
  const [tab, setTab] = React.useState('rewards');

  const onRedeem = (r) => {
    setPoints(p => p - r.cost);
    setRedeemed(rs => [{ ...r, ts: new Date() }, ...rs]);
  };

  return (
    <>
      {/* Header */}
      <section style={{ padding: '48px 0 24px' }}>
        <div className="container rewards-header" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'flex-end' }}>
          <div>
            <span className="eyebrow">Rewards</span>
            <h1 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '14px 0 14px', lineHeight: 1.05 }}>
              Eat better.<br/>Earn <em style={{ color: 'var(--accent)' }}>more</em>.
            </h1>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 480, margin: 0 }}>
              10 points per £1 spent. Redeem against anything on the menu — no blackouts, no expiring points.
            </p>
          </div>

          {/* Member card */}
          <div style={{ position: 'relative', aspectRatio: '1.6 / 1', background: 'linear-gradient(135deg, var(--ink) 0%, #2a2520 100%)', borderRadius: 22, padding: 24, color: 'var(--bg)', overflow: 'hidden', boxShadow: '0 24px 60px -20px rgba(0,0,0,.4)' }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, background: 'radial-gradient(circle, var(--accent) 0%, transparent 70%)', opacity: 0.4 }} />
            <div className="col" style={{ height: '100%', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
              <div className="row between">
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase' }}>Burger House · Member</span>
                <span className="display" style={{ fontSize: 18, color: 'var(--bg)' }}>BH</span>
              </div>
              <div>
                <div className="display" style={{ fontSize: 36, color: 'var(--bg)' }}>{points.toLocaleString()}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, textTransform: 'uppercase' }}>Points balance</div>
              </div>
              <div className="row between">
                <span className="mono" style={{ fontSize: 12, color: 'var(--bg)' }}>•••• 4421</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>Member since 2023</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tier ladder */}
      <section style={{ padding: '16px 0' }}>
        <div className="container"><TierLadder points={points} /></div>
      </section>

      {/* Tabs */}
      <section style={{ padding: '32px 0 0' }}>
        <div className="container">
          <div className="row gap-8" style={{ borderBottom: '1px solid var(--line)' }}>
            {[['rewards', 'Redeem rewards'], ['activity', 'Activity'], ['perks', 'Perks & benefits']].map(([id, label]) => (
              <button key={id} onClick={() => setTab(id)} style={{
                all: 'unset', cursor: 'pointer',
                padding: '10px 16px', fontSize: 14,
                color: tab === id ? 'var(--ink)' : 'var(--ink-3)',
                borderBottom: `2px solid ${tab === id ? 'var(--accent)' : 'transparent'}`,
                marginBottom: -1,
                fontWeight: tab === id ? 600 : 500,
              }}>{label}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Tab content */}
      {tab === 'rewards' && (
        <section style={{ padding: '24px 0 64px' }}>
          <div className="container">
            <div className="rewards-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 16 }}>
              {REWARDS.map(r => <RewardCard key={r.id} r={r} points={points} onRedeem={onRedeem} />)}
            </div>
            {redeemed.length > 0 && (
              <div className="card" style={{ marginTop: 24, padding: 18, background: 'var(--accent-soft)', borderColor: 'transparent' }}>
                <span className="eyebrow" style={{ color: 'var(--accent)' }}>Just redeemed</span>
                <div className="row gap-12" style={{ marginTop: 8, flexWrap: 'wrap' }}>
                  {redeemed.map(r => <span key={r.ts.getTime()} className="pill accent">{r.name}</span>)}
                </div>
              </div>
            )}
          </div>
        </section>
      )}

      {tab === 'activity' && (
        <section style={{ padding: '24px 0 64px' }}>
          <div className="container">
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--surface-2)' }}>
                    {['Date', 'Branch', 'Spent', 'Points earned'].map(h => (
                      <th key={h} className="mono" style={{ textAlign: 'left', padding: '14px 20px', fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', fontWeight: 500 }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {RECENT_ACTIVITY.map(a => (
                    <tr key={a.id} style={{ borderTop: '1px solid var(--line)' }}>
                      <td style={{ padding: '16px 20px', fontSize: 14 }}>{a.date}</td>
                      <td style={{ padding: '16px 20px', fontSize: 14 }}>{a.branch}</td>
                      <td className="mono" style={{ padding: '16px 20px', fontSize: 14 }}>£{a.spent.toFixed(2)}</td>
                      <td className="mono" style={{ padding: '16px 20px', fontSize: 14, color: 'var(--accent)' }}>+{a.points}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>
      )}

      {tab === 'perks' && (
        <section style={{ padding: '24px 0 64px' }}>
          <div className="container">
            <div className="perks-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
              {[
                { icon: '🎂', title: 'Birthday burger',     desc: 'A free House Classic in your birthday week, on us.' },
                { icon: '🍟', title: 'Free Friday fries',    desc: 'Crinkle fries free with any burger, every Friday.' },
                { icon: '⚡', title: 'Skip the queue',        desc: 'Members order via the app jump the in-store queue.' },
                { icon: '🎟', title: 'Early access drops',   desc: 'New menu items 7 days before everyone else.' },
                { icon: '🤝', title: 'Refer a friend',        desc: 'Both get 250 points the first time they order.' },
                { icon: '🌱', title: 'Plant menu rewards',    desc: 'Double points on every Garden Burger ordered.' },
              ].map(p => (
                <div key={p.title} className="card" style={{ padding: 22 }}>
                  <div style={{ fontSize: 28, marginBottom: 10 }}>{p.icon}</div>
                  <h4 style={{ margin: '0 0 6px', fontSize: 16, fontWeight: 600 }}>{p.title}</h4>
                  <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{p.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Sign-up CTA */}
      <section style={{ padding: '0 0 80px' }}>
        <div className="container">
          <div className="card" style={{ padding: 40, background: 'var(--ink)', color: 'var(--bg)', borderColor: 'transparent', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center' }}>
            <div>
              <span className="eyebrow" style={{ color: 'var(--ink-3)' }}>Not a member yet?</span>
              <h3 className="display" style={{ fontSize: 36, margin: '12px 0 12px', color: 'var(--bg)' }}>Sign up — get 250 points free.</h3>
              <p style={{ color: 'var(--ink-3)', maxWidth: 460, margin: '0 0 20px' }}>
                That's a free Crinkle Fries on your first order. Takes 30 seconds. No card needed.
              </p>
              <div className="row gap-12">
                <a className="btn btn-primary">Create account</a>
                <a className="btn btn-ghost" style={{ color: 'var(--bg)', borderColor: 'var(--ink-3)' }}>Sign in →</a>
              </div>
            </div>
            <div className="col gap-8">
              {[
                ['10x', 'points per £1'],
                ['0', 'point expiry'],
                ['38', 'kitchens accepting points'],
              ].map(([n, l]) => (
                <div key={l} className="row between" style={{ padding: '12px 0', borderBottom: '1px solid var(--ink-3)' }}>
                  <span className="display" style={{ fontSize: 28, color: 'var(--bg)' }}>{n}</span>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase' }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
};

Object.assign(window, { RewardsPage });