// CONCIERGE — gift card, size guide, care & maintenance
function ConciergePage() {
  const { navigate } = useRouter();
  const [tab, setTab] = useState('gift');
  const [giftAmount, setGiftAmount] = useState(3000);
  const [giftTo, setGiftTo] = useState('');
  const [giftFrom, setGiftFrom] = useState('');
  const [giftMsg, setGiftMsg] = useState('');

  return (
    <div className="page-enter">
      <style>{`
        .con-hero { padding: 180px 0 60px; }
        .con-hero__title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(56px, 9vw, 130px); line-height: 0.95; max-width: 1200px; }
        .con-hero__title em { color: var(--accent); }
        .con-hero__sub { color: var(--fg-mute); font-size: 17px; max-width: 540px; margin-top: 28px; line-height: 1.65; }

        .con-tabs { display: flex; gap: 0; padding: 30px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; }
        .con-tab { padding: 12px 24px 12px 0; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; cursor: pointer; }
        .con-tab.is-on { color: var(--accent); }
        .con-tab + .con-tab { padding-left: 24px; border-left: 1px solid var(--rule); }

        .con-panel { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 130px); }
        .con-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
        @media (max-width: 880px) { .con-grid { grid-template-columns: 1fr; } }

        .con-img { aspect-ratio: 4/5; overflow: hidden; background: var(--surface); }
        .con-img img { width: 100%; height: 100%; object-fit: cover; }

        .con-body h2 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; margin-bottom: 24px; }
        .con-body h2 em { color: var(--accent); }
        .con-body p { color: var(--fg-mute); font-size: 16px; line-height: 1.7; max-width: 520px; }

        /* Gift card builder */
        .gift-card-preview {
          aspect-ratio: 3/2;
          background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 50%, var(--gold-deep) 100%);
          border-radius: 14px;
          padding: 36px;
          position: relative;
          color: #1a1208;
          display: flex; flex-direction: column; justify-content: space-between;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
          margin-bottom: 24px;
        }
        .gift-card-preview::before {
          content: ""; position: absolute; inset: 0;
          background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.25), transparent 50%);
          border-radius: inherit;
          pointer-events: none;
        }
        .gift-card-preview__brand { font-family: var(--display, var(--serif)); font-size: 30px; letter-spacing: 0.22em; }
        .gift-card-preview__amt { font-family: var(--display, var(--serif)); font-size: clamp(36px, 5vw, 56px); font-feature-settings: "tnum"; }
        .gift-card-preview__row { display: flex; justify-content: space-between; align-items: end; }
        .gift-card-preview__from { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }

        .amt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
        .amt-btn { padding: 14px 20px; border: 1px solid var(--rule-strong); font-size: 13px; font-feature-settings: "tnum"; transition: all 0.2s; }
        .amt-btn.is-on, .amt-btn:hover { border-color: var(--accent); color: var(--accent); }
        .amt-btn.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

        .gift-fields { display: flex; flex-direction: column; gap: 14px; }
        .gift-fields input, .gift-fields textarea {
          background: transparent; color: var(--fg);
          border: none; border-bottom: 1px solid var(--rule-strong);
          padding: 14px 0; font-family: var(--sans); font-size: 15px;
          outline: none;
        }
        .gift-fields input:focus, .gift-fields textarea:focus { border-color: var(--accent); }

        /* Size guide table */
        .size-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
        .size-table th, .size-table td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 14px; font-feature-settings: "tnum"; }
        .size-table th { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; }
        .size-table td:first-child { color: var(--accent); font-family: var(--display, var(--serif)); font-size: 20px; }

        /* Care list */
        .care-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
        @media (max-width: 560px) { .care-grid { grid-template-columns: 1fr; } }
        .care-card { padding: 28px; border: 1px solid var(--rule); }
        .care-card__no { font-family: var(--display, var(--serif)); font-size: 32px; color: var(--accent); }
        .care-card__t { font-family: var(--display, var(--serif)); font-size: 22px; margin: 10px 0 8px; }
        .care-card__d { font-size: 14px; color: var(--fg-mute); line-height: 1.6; }
      `}</style>

      <div className="container con-hero">
        <Reveal>
          <div className="eyebrow" style={{ color: 'var(--accent)' }}>Gafla Concierge</div>
          <h1 className="con-hero__title">For everything <em>after</em> the piece.</h1>
          <p className="con-hero__sub">The lifetime of a Gafla jewel is longer than the day it arrived. Concierge gathers Gift Cards, sizing, polishing, resizing, and repair under one quiet number.</p>
        </Reveal>
      </div>

      <div className="container">
        <div className="con-tabs">
          {[
            { id: 'gift', label: 'Gift Card' },
            { id: 'size', label: 'Size Guide' },
            { id: 'care', label: 'Care & Repair' },
            { id: 'curated', label: 'Curated for You' },
          ].map((t) => (
            <button key={t.id} className={`con-tab ${tab === t.id ? 'is-on' : ''}`} onClick={() => setTab(t.id)}>{t.label}</button>
          ))}
        </div>
      </div>

      <section className="con-panel">
        <div className="container con-grid">
          {tab === 'gift' && (
            <>
              <Reveal>
                <div className="gift-card-preview">
                  <div className="gift-card-preview__brand">GAFLA</div>
                  <div>
                    <div className="gift-card-preview__amt">AED {giftAmount.toLocaleString()}</div>
                    <div className="gift-card-preview__row" style={{ marginTop: 14 }}>
                      <div className="gift-card-preview__from">{giftFrom ? `From ${giftFrom}` : '—'}</div>
                      <div className="gift-card-preview__from">{giftTo ? `For ${giftTo}` : 'A gift of caravan'}</div>
                    </div>
                  </div>
                </div>
                <div style={{ color: 'var(--fg-mute)', fontSize: 13, lineHeight: 1.6 }}>
                  Delivered as a printed card by hand in the UAE, or by mail anywhere in the GCC. Digital cards available by request.
                </div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>A gift, <em>kept open.</em></h2>
                  <p>Four standard amounts, in real AED. Or choose your own number — the Concierge will tailor everything: paper, ribbon, the moment of handover.</p>

                  <div className="eyebrow" style={{ marginTop: 36, marginBottom: 14 }}>Amount</div>
                  <div className="amt-row">
                    {[1000, 3000, 5000, 10000].map((a) => (
                      <button key={a} className={`amt-btn ${giftAmount === a ? 'is-on' : ''}`} onClick={() => setGiftAmount(a)}>AED {a.toLocaleString()}</button>
                    ))}
                  </div>

                  <div className="gift-fields">
                    <input placeholder="To (recipient's name)" value={giftTo} onChange={(e) => setGiftTo(e.target.value)} />
                    <input placeholder="From (your name)" value={giftFrom} onChange={(e) => setGiftFrom(e.target.value)} />
                    <textarea placeholder="A short note (optional)" rows="3" value={giftMsg} onChange={(e) => setGiftMsg(e.target.value)} />
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 28 }}>Add to Bag</button>
                </div>
              </Reveal>
            </>
          )}

          {tab === 'size' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/heritage-loose-pearls.webp" alt="Heritage pearls" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>The <em>right</em> fit.</h2>
                  <p>If you are unsure of size, the Concierge can arrange a complimentary at‑boutique fitting, or send a paper ring sizer to most GCC addresses. Below is a quick reference.</p>
                  <table className="size-table">
                    <thead>
                      <tr><th>EU</th><th>UK</th><th>US</th><th>Circumference (mm)</th></tr>
                    </thead>
                    <tbody>
                      <tr><td>46</td><td>F½</td><td>3¾</td><td>46.0</td></tr>
                      <tr><td>48</td><td>H</td><td>4½</td><td>48.0</td></tr>
                      <tr><td>50</td><td>J</td><td>5¼</td><td>50.0</td></tr>
                      <tr><td>52</td><td>L</td><td>6</td><td>52.0</td></tr>
                      <tr><td>54</td><td>N</td><td>6¾</td><td>54.0</td></tr>
                      <tr><td>56</td><td>P</td><td>7½</td><td>56.0</td></tr>
                      <tr><td>58</td><td>Q¾</td><td>8½</td><td>58.0</td></tr>
                    </tbody>
                  </table>
                  <button className="btn btn--ghost arrow" style={{ marginTop: 32 }} onClick={() => navigate('contact')}><span>Request a ring sizer</span></button>
                </div>
              </Reveal>
            </>
          )}

          {tab === 'care' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/concierge-care-repair-polishing.webp" alt="Care and repair" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>Polish, resize, <em>repair.</em></h2>
                  <p>Each Gafla piece is built to outlive its decade. The Concierge offers cleaning, polishing, resizing, and repair work — consult before any service so we can advise on stones and finish.</p>
                  <div className="care-grid">
                    {[
                      { n: '01', t: 'Cleaning', d: 'Ultrasonic and steam, by hand. Done while you wait at the Majlis.' },
                      { n: '02', t: 'Polishing', d: 'Light re‑polish to restore lustre; deeper work by quotation.' },
                      { n: '03', t: 'Resizing', d: 'Most rings can be resized one to two sizes either way.' },
                      { n: '04', t: 'Repair', d: 'Stone tightening, link replacement, full restoration by quotation.' },
                    ].map((c) => (
                      <div key={c.n} className="care-card">
                        <div className="care-card__no">{c.n}</div>
                        <div className="care-card__t">{c.t}</div>
                        <div className="care-card__d">{c.d}</div>
                      </div>
                    ))}
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 32 }} onClick={() => navigate('contact')}>Open a Service Ticket</button>
                </div>
              </Reveal>
            </>
          )}

          {tab === 'curated' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/concierge-gift-card.webp" alt="Curated gifting" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>Curated <em>for the moment.</em></h2>
                  <p>For a birthday, an heir, a return from travel — the Concierge will hand‑pick a short list across the seven lines, framed to your story. Send a brief and a printed proposal arrives within two working days.</p>
                  <div className="gift-fields" style={{ marginTop: 24 }}>
                    <input placeholder="Recipient's name (optional)" />
                    <input placeholder="Occasion" />
                    <input placeholder="Budget guideline (AED)" />
                    <textarea placeholder="A short brief" rows="4" />
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 28 }}>Send Brief</button>
                </div>
              </Reveal>
            </>
          )}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ConciergePage });
