// ========== GLOW CIRCLE — LOYALTY ==========

const TIERS = [
  {
    key: 'sand',
    name: 'Sand',
    minPoints: 0,
    color: '#E9DDC9',
    accent: '#C7B79A',
    glow: 'linear-gradient(135deg, #F5ECD9 0%, #E9DDC9 50%, #C7B79A 100%)',
    perks: [
      '1 point per $1 spent',
      'Early access to drops (24h)',
      'Birthday gift from one partner brand',
    ],
  },
  {
    key: 'amber',
    name: 'Amber',
    minPoints: 300,
    color: '#E8B24A',
    accent: '#B8831A',
    glow: 'linear-gradient(135deg, #FCE5A8 0%, #E8B24A 50%, #B8831A 100%)',
    perks: [
      '1.5 points per $1 spent',
      '10% off marketplace every month',
      'Priority rebooking with top providers',
      'Quarterly Island Drop box (members-only)',
    ],
  },
  {
    key: 'coral',
    name: 'Coral',
    minPoints: 900,
    color: '#E08A6E',
    accent: '#B85438',
    glow: 'linear-gradient(135deg, #F8C7B0 0%, #E08A6E 50%, #B85438 100%)',
    perks: [
      '2 points per $1 spent',
      '15% off everything, always',
      'Concierge booking (text us, we handle it)',
      'Invite to CaribGlow retreats + brand dinners',
      'Free shipping on every marketplace order',
    ],
  },
];

const TierRing = ({ tier, points, size = 220 }) => {
  const next = TIERS[TIERS.findIndex(t => t.key === tier.key) + 1];
  const floor = tier.minPoints;
  const ceil = next ? next.minPoints : floor + 300;
  const pct = Math.min(1, Math.max(0, (points - floor) / (ceil - floor)));
  const C = size / 2;
  const R = C - 14;
  const circ = 2 * Math.PI * R;
  const [animPct, setAnimPct] = React.useState(0);
  React.useEffect(() => {
    const id = requestAnimationFrame(() => setAnimPct(pct));
    return () => cancelAnimationFrame(id);
  }, [pct]);
  return (
    <div style={{position:'relative', width: size, height: size}}>
      <svg width={size} height={size} style={{transform:'rotate(-90deg)'}}>
        <defs>
          <linearGradient id={`tg-${tier.key}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor={tier.color}/>
            <stop offset="100%" stopColor={tier.accent}/>
          </linearGradient>
        </defs>
        <circle cx={C} cy={C} r={R} fill="none" stroke="rgba(20,10,40,0.06)" strokeWidth="8"/>
        <circle
          cx={C} cy={C} r={R} fill="none"
          stroke={`url(#tg-${tier.key})`} strokeWidth="8" strokeLinecap="round"
          strokeDasharray={circ}
          strokeDashoffset={circ * (1 - animPct)}
          style={{transition: 'stroke-dashoffset 1200ms cubic-bezier(0.2,0.8,0.2,1)'}}
        />
      </svg>
      <div style={{
        position:'absolute', inset: 14,
        borderRadius:'50%',
        background: tier.glow,
        display:'grid', placeItems:'center',
        boxShadow: `0 20px 60px -20px ${tier.accent}88, inset 0 2px 8px rgba(255,255,255,0.4)`,
      }}>
        <div className="grain-overlay" style={{borderRadius:'50%'}}/>
        <div style={{textAlign:'center', color:'#2A1A14', position:'relative', zIndex: 2}}>
          <div style={{fontFamily:"'Fraunces', serif", fontSize: 44, fontWeight: 500, letterSpacing:'-0.03em', lineHeight: 1}}>
            {tier.name}
          </div>
          <div style={{fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', marginTop: 6, opacity: 0.7}}>
            Glow Circle
          </div>
        </div>
      </div>
    </div>
  );
};

const GlowCirclePage = ({ nav, toast }) => {
  const [points] = React.useState(547);
  const tierIdx = [...TIERS].reverse().findIndex(t => points >= t.minPoints);
  const current = TIERS[TIERS.length - 1 - tierIdx];
  const next = TIERS[TIERS.length - tierIdx] || null;
  const toNext = next ? next.minPoints - points : 0;

  const activity = [
    { date: 'Apr 19', desc: 'Booked Jasmine M. · Silk press', pts: 80 },
    { date: 'Apr 12', desc: 'Island Apothecary order', pts: 42 },
    { date: 'Apr 03', desc: 'Referred Simone (joined!)', pts: 100, bonus: true },
    { date: 'Mar 28', desc: 'Booked Nia S. · Hybrid lashes', pts: 70 },
    { date: 'Mar 15', desc: 'Hibiscus Hair bundle', pts: 55 },
  ];

  return (
    <div className="fade-in">
      <div className="container">
        <div className="page-head" style={{paddingTop: 40}}>
          <div>
            <div className="eyebrow">Members only</div>
            <h1>Glow <span className="i">Circle.</span></h1>
            <p className="lede">Every booking, every bottle, earned back as light.</p>
          </div>
          <button className="btn btn-outline" onClick={() => nav('account')}>Account settings</button>
        </div>

        <div className="glow-hero">
          <div className="glow-ring-wrap">
            <TierRing tier={current} points={points}/>
          </div>
          <div className="glow-stats">
            <div className="glow-points">
              <div className="num">{points.toLocaleString()}</div>
              <div className="lbl">points</div>
            </div>
            {next ? (
              <div className="glow-next">
                <div className="lbl">{toNext} points to <b>{next.name}</b></div>
                <div className="glow-hint">≈ one silk press away.</div>
              </div>
            ) : (
              <div className="glow-next">
                <div className="lbl">You've reached the top ✦</div>
              </div>
            )}
            <div className="glow-cta">
              <button className="btn btn-brand sheen" onClick={() => nav('explore')}>Book + earn</button>
              <button className="btn btn-outline" onClick={() => { toast('Referral link copied'); }}>Share referral</button>
            </div>
          </div>
        </div>

        <div className="tier-grid">
          {TIERS.map(t => {
            const active = t.key === current.key;
            return (
              <div key={t.key} className={`tier-card ${active ? 'active' : ''}`}>
                <div className="tier-head">
                  <div className="tier-chip" style={{background: t.glow}}>
                    <div className="grain-overlay" style={{borderRadius:'50%'}}/>
                  </div>
                  <div>
                    <div className="tier-name">{t.name}</div>
                    <div className="tier-req">{t.minPoints === 0 ? 'Starts here' : `${t.minPoints}+ points`}</div>
                  </div>
                  {active && <div className="tier-badge">You are here</div>}
                </div>
                <ul className="tier-perks">
                  {t.perks.map((p, i) => <li key={i}><span className="bul">✦</span>{p}</li>)}
                </ul>
              </div>
            );
          })}
        </div>

        <div className="glow-activity-wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Activity</div>
              <h2>Recent <span className="i">earnings.</span></h2>
            </div>
          </div>
          <div className="activity-list">
            {activity.map((a, i) => (
              <div key={i} className="activity-row">
                <div className="a-date">{a.date}</div>
                <div className="a-desc">{a.desc}</div>
                <div className={`a-pts ${a.bonus ? 'bonus' : ''}`}>+{a.pts}{a.bonus ? ' ✦' : ''}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="glow-footer">
          <div>
            <div className="eyebrow">How it works</div>
            <h3>Three <span className="i">small rules.</span></h3>
          </div>
          <div className="rules">
            <div>
              <div className="rule-n">01</div>
              <p>Points never expire while you're active. One booking or order a year keeps you lit.</p>
            </div>
            <div>
              <div className="rule-n">02</div>
              <p>Tier reviewed every 90 days. Easy to climb, gentle to slip. No penalties, ever.</p>
            </div>
            <div>
              <div className="rule-n">03</div>
              <p>Providers see your tier (Sand/Amber/Coral only), so they know to bring the extra touch.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
};

window.GlowCirclePage = GlowCirclePage;