// Facette — Memberships page

const { MEMBERSHIPS: MEMBS } = window.FacetteData;

const ROWS = [
  { key: 'facials', label: 'Facials / month', val: (m) => `${m.facials} ${m.facials === 1 ? 'facial' : 'facials'}` },
  { key: 'cadence', label: 'Cadence', val: (m) => m.cadence },
  { key: 'consult', label: 'Welcome consult', val: () => <span className="check">✓</span> },
  { key: 'products', label: 'Retail discount', val: (m) => m.products },
  { key: 'portal', label: 'Therapist chat', val: () => <span className="check">✓</span> },
  { key: 'rollover', label: 'Rollover', val: () => <span className="tbc">TBC</span> },
  { key: 'guest', label: 'Guest pass', val: (m) => m.featured ? <span className="check">✓</span> : <span className="tbc">TBC</span> },
];

function Memberships({ openBook, setPage, isMobile }) {
  return (
    <React.Fragment>
      <section className="mb-hero">
        <div className="mb-hero-inner">
          <div className="eyebrow"><span className="dot"></span>Membership · the conversion engine</div>
          <h1>Pay for a ritual,<br/><em>not a one-off.</em></h1>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: 48 }}>
            <p className="lede">
              SuperNova works in cycles of ten days. The Glam Facial works in cycles of two to three weeks.
              Memberships price that cadence honestly — and give you a way to talk to your therapist between visits.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'flex-end' }}>
              <div className="chip" style={{ alignSelf: 'flex-start' }}>7 priced tiers</div>
              <div className="chip" style={{ alignSelf: 'flex-start' }}>From 999 AED / mo</div>
              <div className="chip" style={{ alignSelf: 'flex-start' }}>Pause, swap, gift</div>
            </div>
          </div>
        </div>
      </section>

      {/* COMPARISON */}
      <section className="mb-table-wrap">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Compare every tier</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(36px, 4vw, 54px)', lineHeight: 1, margin: '8px 0 32px',
          }}>
            Find your <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>cadence.</em>
          </h2>

          {isMobile ? <MembCards openBook={openBook} /> : <MembTable openBook={openBook} />}

          <div style={{
            marginTop: 18, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--ink-3)', textAlign: 'right',
          }}>
            * Per-tier inclusions to confirm at launch · prices confirmed at AED 999–2,400
          </div>
        </div>
      </section>

      {/* WHY MEMBERSHIP */}
      <section className="memb-preview" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 32 }}>
            <WhyCell num="01" title="Same therapist, every time" body="You pick your therapist at sign-up. They learn your skin. Visit two is sharper than visit one." />
            <WhyCell num="02" title="A real plan, written down" body="Your welcome consult sets a 90-day plan in the portal. You can see what is next." />
            <WhyCell num="03" title="One-tap chat between visits" body="A new reaction? Sun-stressed week? Message your therapist, get a real answer." />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow"><span className="dot"></span>Not sure?</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1, margin: '12px 0 16px',
          }}>
            Start with a <em style={{ color: 'var(--gold)' }}>single facial.</em>
          </h2>
          <p className="lede" style={{ margin: '0 auto 28px' }}>
            Every membership starts after your first visit, so you can match the plan to the skin we just met.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => openBook()}>Book a first facial</button>
            <button className="btn btn-secondary" onClick={() => setPage('treatments')}>Browse treatments</button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function MembTable({ openBook }) {
  return (
    <div className="mb-table">
      <div className="mb-table-head">
        <div className="mth lab">
          <div className="mth-name">Plan</div>
          <div className="mth-cad">Per month · AED</div>
        </div>
        {MEMBS.map((m) => (
          <div key={m.id} className={`mth ${m.featured ? 'featured' : ''}`}>
            {m.featured && <div className="mth-badge">Hero tier</div>}
            <div className="mth-name">{m.name}</div>
            <div className="mth-cad">{m.cadence}</div>
            <div className="mth-price">{m.price.toLocaleString()}<span className="aed">AED</span></div>
          </div>
        ))}
      </div>
      {ROWS.map((r) => (
        <div className="mb-row" key={r.key}>
          <div className="mr-cell lab">{r.label}</div>
          {MEMBS.map((m) => (
            <div key={m.id} className={`mr-cell ${m.featured ? 'featured' : ''}`}>{r.val(m)}</div>
          ))}
        </div>
      ))}
      <div className="mb-row">
        <div className="mr-cell lab"></div>
        {MEMBS.map((m) => (
          <div key={m.id} className={`mr-cell ${m.featured ? 'featured' : ''}`}>
            <button className="btn btn-primary btn-sm" onClick={() => openBook()} style={{ padding: '0 14px' }}>Join</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function MembCards({ openBook }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
      {MEMBS.map((m) => (
        <div key={m.id} style={{
          background: m.featured ? 'var(--bg-warm)' : 'var(--white)',
          border: m.featured ? '2px solid var(--gold)' : '1px solid var(--rule)',
          padding: 24,
        }}>
          {m.featured && (
            <div style={{ fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: 8 }}>
              Hero tier
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 400 }}>{m.name}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28 }}>
              {m.price.toLocaleString()}<span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--ink-3)' }}> AED/mo</span>
            </div>
          </div>
          <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
            {m.cadence} · {m.facials} {m.facials === 1 ? 'facial' : 'facials'} / mo
          </div>
          <button className="btn btn-primary btn-sm" onClick={() => openBook()}>Join {m.name}</button>
        </div>
      ))}
    </div>
  );
}

function WhyCell({ num, title, body }) {
  return (
    <div style={{ borderTop: '1px solid rgba(239, 228, 214, 0.18)', paddingTop: 24 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--gold-soft)', marginBottom: 16 }}>{num}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 400, color: '#EFE4D6', marginBottom: 12, lineHeight: 1.1 }}>{title}</div>
      <div style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(239, 228, 214, 0.72)' }}>{body}</div>
    </div>
  );
}

window.Memberships = Memberships;