// Couture Events Worldwide — Portfolio, CaseStudy, About, Contact, Tweaks
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useCallback: useCallbackP } = React;

// ────────────────────────────────────────────────────────────────
// Portfolio (filterable grid)
// ────────────────────────────────────────────────────────────────
function Portfolio({ navigate }) {
  const [filter, setFilter] = useStateP('all');

  useEffectP(() => {
    const onFilter = (e) => setFilter(e.detail || 'all');
    window.addEventListener('cew:filter', onFilter);
    return () => window.removeEventListener('cew:filter', onFilter);
  }, []);

  const counts = useMemoP(() => {
    const c = { all: PROJECTS.length };
    SECTORS.forEach(s => { c[s.id] = PROJECTS.filter(p => p.sector === s.id).length; });
    return c;
  }, []);

  const filtered = useMemoP(() => {
    if (filter === 'all') return PROJECTS;
    return PROJECTS.filter(p => p.sector === filter);
  }, [filter]);

  // Asymmetric size pattern (cycles)
  const sizes = ['size-l', 'size-m', 'size-s', 'size-w', 'size-m', 'size-l'];

  return (
    <div className="page-enter" data-screen-label="02 Portfolio">
      <div className="page-head">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="eyebrow ink">— The portfolio</div>
              <h1 style={{marginTop:'24px'}}>
                Selected work,<br />
                <span className="em">2018 — present.</span>
              </h1>
            </div>
            <div>
              <p className="intro">
                A working archive of recent commissions across our four practices. Filter by sector;
                click any project to read the case study. All imagery is reference for design — photographer
                credit, couple &amp; client consent confirmed before publishing live.
              </p>
              <div className="meta" style={{marginTop:'24px'}}>{PROJECTS.length} projects · 4 sectors · Dubai &amp; destination</div>
            </div>
          </div>
        </div>
      </div>

      <div className="wrap">
        <div className="filter-bar">
          <div className="chips">
            <button className={"chip" + (filter === 'all' ? ' active' : '')} onClick={() => setFilter('all')}>
              All <span className="count">({counts.all})</span>
            </button>
            {SECTORS.map(s => (
              <button
                key={s.id}
                className={"chip" + (filter === s.id ? ' active' : '')}
                onClick={() => setFilter(s.id)}
              >{s.label} <span className="count">({counts[s.id] || 0})</span></button>
            ))}
          </div>
          <div className="right">
            Showing {filtered.length} of {PROJECTS.length}
          </div>
        </div>

        <div className="portfolio-grid">
          {filtered.map((p, idx) => (
            <div
              key={p.slug}
              className={"proj-card " + sizes[idx % sizes.length]}
              onClick={() => navigate('case', p.slug)}
            >
              <div className="img-wrap">
                <img src={p.cover} alt={p.title} loading="lazy" />
                <div className="overlay"></div>
              </div>
              <div className="info">
                <div className="info-left">
                  <h3>{p.title}</h3>
                  <div className="meta">
                    <span style={{textTransform:'capitalize'}}>{p.sector}</span>
                    <span>·</span>
                    <span>{p.venue}</span>
                    <span>·</span>
                    <span>{p.year}</span>
                  </div>
                </div>
                <div className="num">{String(idx + 1).padStart(2, '0')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Case Study
// ────────────────────────────────────────────────────────────────
function CaseStudy({ slug, navigate }) {
  const project = useMemoP(() => PROJECTS.find(p => p.slug === slug) || PROJECTS[0], [slug]);
  const [lb, setLb] = useStateP(null);

  // next & prev
  const idx = PROJECTS.findIndex(p => p.slug === project.slug);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  useEffectP(() => {
    const onKey = (e) => { if (e.key === 'Escape') setLb(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const phases = [
    { num: '01', title: 'Plan',    body: 'Brief, budget framework, venue selection, logistical and cultural design. Detailed run-of-show.' },
    { num: '02', title: 'Design',  body: 'Creative direction, scenography, floral architecture, lighting, sound, content. Mood, mock-ups, sample reviews.' },
    { num: '03', title: 'Produce', body: 'Vendor curation and contracting, production timelines, crew briefs, technical rehearsals, rigging.' },
    { num: '04', title: 'Execute', body: 'On-the-day direction, hospitality choreography, calls, discrete crisis management, guest experience.' },
  ];

  return (
    <div className="page-enter" data-screen-label={`03 Case · ${project.title}`}>
      <section className="cs-hero">
        <img src={project.hero} alt={project.title} />
        <div className="content">
          <div className="wrap">
            <div style={{display:'flex', gap:'14px', alignItems:'center', marginBottom:'24px', color:'rgba(255,255,255,0.7)', fontFamily:'JetBrains Mono, monospace', fontSize:'11px', letterSpacing:'0.18em', textTransform:'uppercase'}}>
              <button onClick={() => navigate('portfolio')} style={{color:'rgba(255,255,255,0.7)', display:'flex', alignItems:'center', gap:'8px'}}>
                <span style={{fontFamily:'serif', fontSize:'14px'}}>←</span> Back to portfolio
              </button>
              <span style={{opacity:0.4}}>/</span>
              <span style={{textTransform:'capitalize'}}>{project.sector}</span>
            </div>
            <h1>{project.title}</h1>
            <div className="meta-row">
              <div><span>Sector</span><strong style={{textTransform:'capitalize'}}>{project.sector}</strong></div>
              <div><span>Venue</span><strong>{project.venue}</strong></div>
              <div><span>Location</span><strong>{project.location}</strong></div>
              <div><span>Guests</span><strong>{project.guests}</strong></div>
              <div><span>Year</span><strong>{project.year}</strong></div>
            </div>
          </div>
        </div>
      </section>

      <ConsentStrip />

      <section className="wrap">
        <div className="cs-intro">
          <div className="lead">{project.lead}</div>
          <div className="body">
            {project.body.map((para, i) => <p key={i}>{para}</p>)}
            <div style={{marginTop:'32px'}}>
              <button className="link-arrow" onClick={() => navigate('contact')}>
                Plan a similar event <span className="arr">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="cs-phases">
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:'48px', flexWrap:'wrap', gap:'20px'}}>
            <div>
              <div className="eyebrow">— How we work</div>
              <h2 className="display-m" style={{marginTop:'18px'}}>
                Four phases, <span className="italic" style={{color:'var(--gold)'}}>one team.</span>
              </h2>
            </div>
            <div className="meta" style={{maxWidth:'320px'}}>
              The studio runs an integrated creative + production team — one point of contact, one accountability.
            </div>
          </div>
          <div className="cs-phases-grid">
            {phases.map(p => (
              <div className="cs-phase" key={p.num}>
                <div className="num">{p.num}</div>
                <h4>{p.title}</h4>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cs-gallery">
        <div className="wrap">
          <div style={{marginBottom:'48px'}}>
            <div className="eyebrow">— Selected frames</div>
            <h2 className="display-m" style={{marginTop:'18px'}}>The room, <span className="italic" style={{color:'var(--gold)'}}>in detail.</span></h2>
            <div className="meta" style={{marginTop:'16px'}}>{project.photographer}</div>
          </div>
          <div className="cs-gallery-grid">
            {project.gallery.map((g, i) => (
              <div
                key={i}
                className={"g-img " + g.cls}
                onClick={() => setLb(g)}
              >
                <img src={g.src} alt={`${project.title} frame ${i + 1}`} />
                <div className="credit">{g.credit}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cs-next">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="eyebrow">— Next project</div>
              <h3 className="display-m" style={{marginTop:'18px', marginBottom:'24px'}}>{next.title}</h3>
              <div className="meta" style={{marginBottom:'24px'}}>
                <span style={{textTransform:'capitalize'}}>{next.sector}</span> · {next.venue} · {next.year}
              </div>
              <button className="link-arrow" onClick={() => navigate('case', next.slug)}>
                Continue <span className="arr">→</span>
              </button>
            </div>
            <div style={{aspectRatio:'4/3', overflow:'hidden', cursor:'pointer'}} onClick={() => navigate('case', next.slug)}>
              <img src={next.cover} alt={next.title} style={{width:'100%', height:'100%', objectFit:'cover'}} />
            </div>
          </div>
        </div>
      </section>

      {/* lightbox */}
      {lb && (
        <div className="lightbox" onClick={() => setLb(null)}>
          <button className="lb-close">Close · Esc</button>
          <img src={lb.src} alt="" />
          <div className="lb-caption">{lb.credit}</div>
        </div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// About
// ────────────────────────────────────────────────────────────────
function About({ navigate }) {
  return (
    <div className="page-enter" data-screen-label="04 About">
      <section className="about-hero">
        <div className="left">
          <div className="eyebrow" style={{color:'var(--gold-pale)'}}>— The studio</div>
          <h1 style={{marginTop:'24px'}}>
            Twenty-one years<br />
            <span className="em">in the room.</span>
          </h1>
          <p className="lead">
            Couture Events FZ-LLC was founded in Dubai in 2004 — a quiet luxury practice that has, over twenty-one
            years, become a familiar one. We work for couples, brands, royal households, and a long list of
            private hosts. We are deliberately small, and intentionally selective.
          </p>
          <div className="stats">
            <div className="stat"><div className="num">21</div><div className="lbl">Years in business</div></div>
            <div className="stat"><div className="num">500+</div><div className="lbl">Events produced</div></div>
            <div className="stat"><div className="num">4</div><div className="lbl">Practices</div></div>
            <div className="stat"><div className="num">14</div><div className="lbl">Countries delivered in</div></div>
          </div>
        </div>
        <div className="right" style={{backgroundImage:'url(media/team-2025.webp)'}}></div>
      </section>

      <ConsentStrip />

      <section className="succession">
        <div className="wrap">
          <div className="succession-grid">
            <div>
              <div className="eyebrow">— Founder &amp; current leadership</div>
              <h2 style={{marginTop:'18px'}}>
                A studio, in <span className="em">two acts.</span>
              </h2>
              <p style={{color:'var(--muted-2)', fontSize:'15.5px', lineHeight:1.7, marginTop:'24px', maxWidth:'420px'}}>
                Founded by Sarah Feyling in 2004 — one of the first dedicated luxury wedding planners in the
                region. Today the studio is led by Hannah Matthews, CEO &amp; Creative Director.
              </p>
              <p className="meta" style={{marginTop:'24px', color:'var(--muted)'}}>
                ⓘ Public surname &amp; founder status confirmation pending per design brief.
              </p>
            </div>
            <div>
              {TEAM.map((t) => (
                <div className="leader-card" key={t.name}>
                  <div className="portrait">
                    {t.img
                      ? <img src={t.img} alt={t.name} />
                      : <div style={{height:'100%', background:'repeating-linear-gradient(135deg, var(--ivory) 0 14px, var(--cream) 14px 28px)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--muted)', fontFamily:'JetBrains Mono, monospace', fontSize:'10px', letterSpacing:'0.16em', textTransform:'uppercase', textAlign:'center', padding:'20px'}}>Portrait<br/>requested</div>
                    }
                  </div>
                  <div className="info">
                    <div className="role">{t.role}</div>
                    <h3>{t.name}</h3>
                    <div className="bio">{t.bio}</div>
                    <div className="yrs">— {t.yrs}</div>
                    {t.note && <div className="meta" style={{marginTop:'10px', color:'var(--muted)'}}>ⓘ {t.note}</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="timeline">
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:'48px', flexWrap:'wrap', gap:'20px'}}>
            <div>
              <div className="eyebrow">— Studio history</div>
              <h2 className="display-m" style={{marginTop:'18px'}}>
                A short <span className="italic" style={{color:'var(--gold)'}}>chronology.</span>
              </h2>
            </div>
            <div className="meta" style={{maxWidth:'320px'}}>
              Independently held since 2004 · Couture Events FZ-LLC, Dubai
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column'}}>
            {TIMELINE.map(t => (
              <div className="timeline-list" key={t.yr}>
                <div className="yr">{t.yr}</div>
                <div className="body">
                  <h4>{t.title}</h4>
                  <p>{t.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'80px', alignItems:'start'}}>
            <div>
              <div className="eyebrow">— Recognition</div>
              <h2 className="display-m" style={{marginTop:'18px'}}>
                A small <span className="italic" style={{color:'var(--gold)'}}>shelf.</span>
              </h2>
              <p style={{color:'var(--muted-2)', fontSize:'15px', lineHeight:1.7, marginTop:'24px', maxWidth:'420px'}}>
                We do not chase awards. These are noted because clients ask about them — each will appear with
                issuer and year, attributed and confirmed, before publishing.
              </p>
            </div>
            <div>
              {[
                { name: 'Wedding Planner of the Year', issuer: 'WeddingsOnline (regional)', year: '2024', conf: 'attribution pending confirmation' },
                { name: 'Conference of the Year',      issuer: 'WOW Awards',                year: '2024', conf: 'attribution pending confirmation' },
                { name: '50 Under 50, MEA — Hannah Matthews', issuer: 'industry roundup',   year: '2023', conf: 'attribution pending confirmation' },
                { name: 'LinkedIn Top 200 Voices — Laura Shepherd', issuer: 'LinkedIn',     year: '2024', conf: 'attribution pending confirmation' },
              ].map(a => (
                <div key={a.name} style={{padding:'24px 0', borderTop:'1px solid var(--line)'}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:'20px', flexWrap:'wrap'}}>
                    <h4 style={{fontFamily:"'Cormorant Garamond', serif", fontSize:'24px', margin:0, fontWeight:400}}>{a.name}</h4>
                    <div className="meta">{a.year}</div>
                  </div>
                  <div className="meta" style={{marginTop:'8px'}}>{a.issuer} · <span style={{color:'var(--gold)'}}>[ {a.conf} ]</span></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Contact (multi-step form)
// ────────────────────────────────────────────────────────────────
function Contact({ navigate }) {
  const [step, setStep] = useStateP(0);
  const [data, setData] = useStateP({
    name: '', email: '', phone: '',
    sector: '', when: '', guests: '', venue: '',
    message: '',
  });
  const [errs, setErrs] = useStateP({});
  const [submitted, setSubmitted] = useStateP(false);

  const sectors = [
    { id: 'weddings',  label: 'Wedding',   desc: 'Single or multi-day' },
    { id: 'corporate', label: 'Corporate', desc: 'Conference · launch · gala' },
    { id: 'social',    label: 'Social',    desc: 'Birthday · anniversary · private' },
    { id: 'proposals', label: 'Proposal',  desc: 'Bespoke · couture' },
  ];

  const set = (k) => (e) => setData(d => ({ ...d, [k]: e.target.value }));

  const validate = (s) => {
    const e = {};
    if (s === 0) {
      if (!data.sector) e.sector = 'Select an event type';
    }
    if (s === 1) {
      if (!data.when) e.when = 'Approximate date or season';
      if (!data.guests) e.guests = 'Estimated guest count';
    }
    if (s === 2) {
      if (!data.name) e.name = 'Required';
      if (!data.email || !/.+@.+\..+/.test(data.email)) e.email = 'Valid email required';
      if (!data.phone) e.phone = 'Required';
    }
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const advance = () => { if (validate(step)) setStep(step + 1); };
  const back    = () => setStep(s => Math.max(0, s - 1));
  const submit  = () => {
    if (!validate(2)) return;
    setSubmitted(true);
  };

  const steps = ['Practice', 'Event', 'Details'];

  return (
    <div className="page-enter" data-screen-label="05 Contact">
      <div className="contact-layout">
        <div className="contact-form-side">
          {!submitted ? (
            <>
              <div className="eyebrow">— Enquiry</div>
              <h1 style={{marginTop:'24px'}}>Begin a <span className="em">conversation.</span></h1>
              <p className="sub">
                Tell us what you have in mind. We reply within one working day with next steps. Three short
                steps — no commitment, no price list.
              </p>

              <div className="form-step-nav">
                {steps.map((s, i) => (
                  <div key={s} className={"step" + (i < step ? ' done' : '') + (i === step ? ' active' : '')}>
                    <span className="lbl">0{i + 1} · {s}</span>
                  </div>
                ))}
              </div>

              {/* Step 0 — Practice */}
              {step === 0 && (
                <div className="form-grid">
                  <div className="field">
                    <label>What kind of event?</label>
                    <div className="event-types" style={{marginTop:'10px'}}>
                      {sectors.map(s => (
                        <div
                          key={s.id}
                          className={"pick" + (data.sector === s.id ? ' active' : '')}
                          onClick={() => { setData(d => ({...d, sector: s.id})); setErrs(e => ({...e, sector: null})); }}
                        >
                          <div className="label">{s.label}</div>
                          <div className="desc">{s.desc}</div>
                        </div>
                      ))}
                    </div>
                    {errs.sector && <div className="err">{errs.sector}</div>}
                  </div>
                  <div className="form-actions">
                    <span className="meta">Step 1 of 3</span>
                    <button className="btn btn-primary" onClick={advance}>Continue <span style={{fontFamily:'serif', fontSize:'16px'}}>→</span></button>
                  </div>
                </div>
              )}

              {/* Step 1 — Event */}
              {step === 1 && (
                <div className="form-grid">
                  <div className="form-grid cols2" style={{marginTop:0}}>
                    <div className="field">
                      <label>Date or season</label>
                      <input
                        type="text"
                        placeholder="e.g. November 2026 / spring"
                        value={data.when}
                        onChange={set('when')}
                        className={errs.when ? 'error' : ''}
                      />
                      {errs.when && <div className="err">{errs.when}</div>}
                    </div>
                    <div className="field">
                      <label>Guests (estimate)</label>
                      <input
                        type="text"
                        placeholder="e.g. 200"
                        value={data.guests}
                        onChange={set('guests')}
                        className={errs.guests ? 'error' : ''}
                      />
                      {errs.guests && <div className="err">{errs.guests}</div>}
                    </div>
                  </div>
                  <div className="field">
                    <label>Venue (if known)</label>
                    <input
                      type="text"
                      placeholder="e.g. Bulgari Resort, undecided, recommend"
                      value={data.venue}
                      onChange={set('venue')}
                    />
                  </div>
                  <div className="form-actions">
                    <button className="back-btn" onClick={back}>← Back</button>
                    <button className="btn btn-primary" onClick={advance}>Continue <span style={{fontFamily:'serif', fontSize:'16px'}}>→</span></button>
                  </div>
                </div>
              )}

              {/* Step 2 — Details */}
              {step === 2 && (
                <div className="form-grid">
                  <div className="form-grid cols2" style={{marginTop:0}}>
                    <div className="field">
                      <label>Your name</label>
                      <input value={data.name} onChange={set('name')} className={errs.name ? 'error' : ''} />
                      {errs.name && <div className="err">{errs.name}</div>}
                    </div>
                    <div className="field">
                      <label>Phone / WhatsApp</label>
                      <input value={data.phone} onChange={set('phone')} className={errs.phone ? 'error' : ''} />
                      {errs.phone && <div className="err">{errs.phone}</div>}
                    </div>
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" value={data.email} onChange={set('email')} className={errs.email ? 'error' : ''} />
                    {errs.email && <div className="err">{errs.email}</div>}
                  </div>
                  <div className="field">
                    <label>Anything we should know</label>
                    <textarea value={data.message} onChange={set('message')} placeholder="A few sentences about what you have in mind." />
                  </div>
                  <div className="form-actions">
                    <button className="back-btn" onClick={back}>← Back</button>
                    <button className="btn btn-gold" onClick={submit}>Send enquiry <span style={{fontFamily:'serif', fontSize:'16px'}}>→</span></button>
                  </div>
                  <div className="meta" style={{marginTop:'10px', color:'var(--muted)'}}>
                    Your enquiry routes to the studio inbox &amp; CRM. We reply within one working day.
                  </div>
                </div>
              )}
            </>
          ) : (
            <div className="success">
              <div className="check">✓</div>
              <div className="eyebrow">— Received</div>
              <h2 style={{marginTop:'18px'}}>Thank you, {data.name.split(' ')[0] || 'and welcome'}.<br />We will be <span className="em">in touch.</span></h2>
              <p>
                Your enquiry has been received by the studio. Hannah and the team reply within one working
                day. For anything urgent, please message us on WhatsApp — the fastest channel.
              </p>
              <div style={{marginTop:'40px', display:'flex', gap:'14px', justifyContent:'center', flexWrap:'wrap'}}>
                <a className="btn btn-gold" href={CONTACT.whatsapp} target="_blank" rel="noopener">
                  Message on WhatsApp
                </a>
                <button className="btn btn-ghost" onClick={() => navigate('portfolio')}>
                  Browse the portfolio
                </button>
              </div>
            </div>
          )}
        </div>

        <div className="contact-info">
          <div>
            <div style={{marginBottom:'56px'}}>
              <div className="eyebrow" style={{color:'var(--gold-pale)'}}>— Or reach us directly</div>
              <h2 className="serif" style={{marginTop:'24px', fontSize:'clamp(36px, 4vw, 56px)', color:'white', lineHeight:1.05}}>
                The studio is<br /><span className="italic" style={{color:'var(--gold-pale)'}}>open in Dubai.</span>
              </h2>
            </div>

            <div className="block">
              <h3>WhatsApp · primary</h3>
              <div className="value"><a href={CONTACT.whatsapp} target="_blank" rel="noopener">{CONTACT.phone1}</a></div>
              <div className="sub">The fastest channel — used daily by the studio</div>
            </div>

            <div className="block">
              <h3>Phone</h3>
              <div className="value"><a href={`tel:${CONTACT.phone2.replace(/\s/g,'')}`}>{CONTACT.phone2}</a></div>
              <div className="sub">Studio line · 09:00 — 19:00 GST</div>
            </div>

            <div className="block">
              <h3>Email</h3>
              <div className="value"><a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a></div>
              <div className="sub">Replies within one working day</div>
            </div>

            <div className="block">
              <h3>Studio</h3>
              <div className="value" style={{fontSize:'24px'}}>Dubai · UAE</div>
              <div className="sub" style={{fontStyle:'italic', color:'rgba(255,255,255,0.45)'}}>Full street address confirmation pending — visits by appointment only.</div>
            </div>
          </div>

          <div>
            <h3>Follow</h3>
            <div className="socials">
              <a href={CONTACT.ig_url} target="_blank" rel="noopener">Instagram</a>
              <a href={CONTACT.fb_url} target="_blank" rel="noopener">Facebook</a>
              <a href={CONTACT.pinterest_url} target="_blank" rel="noopener">Pinterest</a>
              <a href={CONTACT.tiktok_url} target="_blank" rel="noopener">TikTok</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Tweaks panel
// ────────────────────────────────────────────────────────────────
function CewTweaks({ defaults, onChange }) {
  const [t, setTweak] = useTweaks(defaults);

  useEffectP(() => { onChange(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakColor
          label="Palette"
          value={t.palette}
          options={[
            ['#FBF8F3', '#F3EBDF', '#B6924E', '#1A1614'],
            ['#0F0C0B', '#1A1614', '#C9A86A', '#F5F0E8'],
            ['#F4ECDE', '#E8DDC8', '#A87A3E', '#2A211B'],
            ['#F7F4ED', '#EBE4D5', '#7C6B4A', '#26201C'],
          ]}
          onChange={(v) => {
            // Map color array back to id
            const ids = ['ivory','noir','sand','pearl'];
            const palettes = {
              ivory: ['#FBF8F3', '#F3EBDF', '#B6924E', '#1A1614'],
              noir:  ['#0F0C0B', '#1A1614', '#C9A86A', '#F5F0E8'],
              sand:  ['#F4ECDE', '#E8DDC8', '#A87A3E', '#2A211B'],
              pearl: ['#F7F4ED', '#EBE4D5', '#7C6B4A', '#26201C'],
            };
            const match = Object.entries(palettes).find(([_, arr]) => JSON.stringify(arr) === JSON.stringify(v));
            setTweak('palette', match ? match[0] : 'ivory');
          }}
        />
        <div className="meta" style={{marginTop:'8px', color:'rgba(255,255,255,0.5)', fontSize:'9.5px'}}>
          Ivory · Noir · Sand · Pearl
        </div>
      </TweakSection>

      <TweakSection label="Typography">
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={[
            { value: 'cormorant', label: 'Cormorant Garamond' },
            { value: 'playfair',  label: 'Playfair Display' },
            { value: 'tenor',     label: 'Tenor Sans' },
            { value: 'italiana',  label: 'Italiana' },
          ]}
          onChange={(v) => setTweak('displayFont', v)}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakToggle
          label="Show 'reference' consent strip"
          value={t.showConsentStrip}
          onChange={(v) => setTweak('showConsentStrip', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { Portfolio, CaseStudy, About, Contact, CewTweaks, ConsentStrip });