// NUMA — main app: hash router + language state + tweaks

const NUMA_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accent": "#4A0E0E",
  "bg": "#F5F1EC",
  "fg": "#1A1411",
  "muted": "#8A7F76",
  "displayFont": "Cormorant Garamond",
  "bodyFont": "Inter",
  "heroIndex": 0,
  "showTestimonials": true,
  "animIntensity": "balanced"
}/*EDITMODE-END*/;

const HERO_OPTIONS = [
  "images/pexels-dugun.webp",
  "images/pexels-marina.webp",
  "images/pexels-mater.webp",
];

const TILE_IMAGES = {
  weddings: "https://images.unsplash.com/photo-1519225421980-715cb0215aed?q=80&w=1600&auto=format&fit=crop",
  celebrations: "https://images.unsplash.com/photo-1530021232320-687d8e3dba54?q=80&w=1200&auto=format&fit=crop",
  birthdays: "images/pexels-marina.webp",
};

const GLIMPSE_IMG  = "images/pageimages/about (1).jpeg";
const STORY_IMG    = "images/pageimages/studio (1).jpeg";
const STORY_IMG_2  = "images/pageimages/studio (2).jpeg";
const PROCESS_IMG  = "images/pexels-mater.webp";
const VISION_IMG   = "images/contact.webp";
const ELEV_IMG     = "https://images.unsplash.com/photo-1519225421980-715cb0215aed?q=80&w=2000&auto=format&fit=crop";

const { useState: uS, useEffect: uE, useMemo: uM, useCallback: uC } = React;

// ──────────────────────────────────────────────────────────────────────
// Query Router — reads ?route=... from the URL, hash as fallback
// ──────────────────────────────────────────────────────────────────────
function getRoute() {
  const queryRoute = new URL(window.location.href).searchParams.get('route');
  if (queryRoute) return queryRoute.trim();

  const h = window.location.hash.replace('#/', '').split('?')[0].trim();
  return h || 'home';
}

function navigate(route) {
  const nextUrl = route === 'home' ? '/' : `/?route=${route}`;
  window.history.pushState({}, '', nextUrl);
  if (typeof window.__syncNumaRoute === 'function') {
    window.__syncNumaRoute();
  }
  window.scrollTo({ top: 0, behavior: 'instant' });
}
// Expose globally so numa-sections.jsx can call navigate()
window.navigate = navigate;

function useRouter() {
  const [route, setRoute] = uS(getRoute);
  uE(() => {
    const onLocationChange = () => setRoute(getRoute());
    window.__syncNumaRoute = onLocationChange;
    window.addEventListener('popstate', onLocationChange);
    window.addEventListener('pageshow', onLocationChange);
    return () => {
      window.removeEventListener('popstate', onLocationChange);
      window.removeEventListener('pageshow', onLocationChange);
      if (window.__syncNumaRoute === onLocationChange) {
        delete window.__syncNumaRoute;
      }
    };
  }, []);
  return route;
}

// ──────────────────────────────────────────────────────────────────────
// Page-level layouts — each route gets its own unique full page
// ──────────────────────────────────────────────────────────────────────

function PageHome({ t, lang, tweaks }) {
  return (
    <main id="main-content">
      <Hero t={t} />
      <StudioNote t={t} image={GLIMPSE_IMG} pageRoute="about" />
      <Story t={t} image={STORY_IMG} image2={STORY_IMG_2} pageRoute="studio" />
      <Services t={t} pageRoute="services" />
      <Works t={t} pageRoute="portfolio" />
      <Contact t={t} lang={lang} pageRoute="contact" />
    </main>
  );
}

// ── ABOUT ───────────────────────────────────────────────────────────
function PageAbout({ t, lang }) {
  return (
    <main id="main-content" className="pg">
      {/* Page header */}
      <div className="pg__hero">
        <span className="eyebrow eyebrow--burgundy pg__eyebrow">— {t.about.eyebrow}</span>
        <h1 className="pg__title">
          {t.nav.about}
          <em>{t.about.sign.replace('— ', '')}</em>
        </h1>
        <p className="pg__sub">{t.about.body}</p>
      </div>

      {/* Split: photo + quote */}
      <div className="pg-about__grid">
        <div className="pg-about__media">
          <PhotoFill src={GLIMPSE_IMG} alt="" objectPosition="center 30%" />
        </div>
        <div className="pg-about__text">
          <Reveal>
            <span className="pg-about__qmark" aria-hidden="true">"</span>
            <p className="pg-about__quote">{t.about.quote}</p>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="pg-about__body">{t.about.body}</p>
          </Reveal>
          <Reveal delay={0.18}>
            <span className="pg-about__sign">{t.about.sign}</span>
          </Reveal>
        </div>
      </div>
    </main>
  );
}

// ── STUDIO ───────────────────────────────────────────────────────────
const STUDIO_IMGS = [
  "images/pageimages/studio (1).jpeg",
  "images/pageimages/studio (2).jpeg",
  "images/pageimages/studio (3).jpeg",
];

function PageStudio({ t, lang }) {
  return (
    <main id="main-content" className="pg">
      <div className="pg__hero">
        <span className="eyebrow eyebrow--burgundy pg__eyebrow">— {t.nav.studio}</span>
        <h1 className="pg__title">
          {t.studio.a}
          <em>{t.studio.b}</em>
        </h1>
        <p className="pg__sub">{t.studio.body}</p>
      </div>

      {/* Gallery grid */}
      <div className="pg-studio__gallery">
        {STUDIO_IMGS.map((src, i) => (
          <Reveal key={i} delay={i * 0.1} className="pg-studio__gal-item">
            <PhotoFill src={src} alt="" objectPosition="center" />
          </Reveal>
        ))}
      </div>

      {/* Closing line */}
      <div className="pg-studio__closing">
        <Reveal>
          <p className="pg-studio__closing-text">
            {lang === 'en'
              ? 'Every space holds a story waiting to be told.'
              : 'Her mekân, anlatılmayı bekleyen bir hikâye taşır.'}
          </p>
        </Reveal>
      </div>
    </main>
  );
}

// ── SERVICES ─────────────────────────────────────────────────────────
function PageServices({ t, lang }) {
  return (
    <main id="main-content" className="pg">
      <div className="pg__hero">
        <span className="eyebrow eyebrow--burgundy pg__eyebrow">— {t.services.eyebrow}</span>
        <h1 className="pg__title">
          {t.services.title.split(' ').slice(0, 2).join(' ')}
          <em>{t.services.title.split(' ').slice(2).join(' ')}</em>
        </h1>
        <p className="pg__sub">{t.services.intro}</p>
      </div>

      <div className="pg-services__list">
        {t.services.items.map((item, idx) => (
          <Reveal key={item.title} className="pg-services__item">
            <span className="pg-services__item-n">0{idx + 1}</span>
            <div>
              <h2 className="pg-services__item-title">{item.title}</h2>
              <p className="pg-services__item-body">{item.body}</p>
            </div>
            <div className="pg-services__item-arrow">
              <span>{t.portfolio.view}</span>
              <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          </Reveal>
        ))}
      </div>

      <div className="pg-services__band">
        <a
          href="/?route=inquiry"
          className="pg-services__band-btn"
          onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}
        >
          <span>{lang === 'en' ? 'GET IN TOUCH' : 'İLETİŞİME GEÇ'}</span>
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </main>
  );
}

// ── PORTFOLIO ─────────────────────────────────────────────────────────
const PORT_IMGS = Array.from({ length: 8 }, (_, i) =>
  `images/pageimages/portfolio (${i + 1}).jpeg`
);

function PagePortfolio({ t, lang }) {
  const [lightbox, setLightbox] = uS(null);

  uE(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(null);
      if (e.key === 'ArrowRight') setLightbox((p) => (p + 1) % PORT_IMGS.length);
      if (e.key === 'ArrowLeft') setLightbox((p) => (p - 1 + PORT_IMGS.length) % PORT_IMGS.length);
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [lightbox]);

  return (
    <main id="main-content" className="pg">
      <div className="pg__hero">
        <span className="eyebrow eyebrow--burgundy pg__eyebrow">— {t.portfolio.title}</span>
        <h1 className="pg__title">
          {lang === 'en' ? 'Selected' : 'Seçkiler'}
          <em>{lang === 'en' ? 'works' : 'çalışmalar'}</em>
        </h1>
        <p className="pg__sub">{t.portfolio.intro}</p>
      </div>

      <div className="pg-port-grid">
        {PORT_IMGS.map((src, i) => (
          <Reveal key={i} delay={(i % 4) * 0.07} y={0} className="pg-port-grid__item">
            <button
              className="pg-port-grid__btn"
              onClick={() => setLightbox(i)}
              aria-label={`Fotoğraf ${i + 1} — büyüt`}
            >
              <img src={src} alt="" loading="lazy" />
              <div className="pg-port-grid__overlay" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </button>
          </Reveal>
        ))}
      </div>

      {lightbox !== null && (
        <div
          className="pg-port-lb"
          role="dialog"
          aria-modal="true"
          aria-label="Fotoğraf görüntüleyici"
          onClick={(e) => { if (e.target === e.currentTarget) setLightbox(null); }}
        >
          <button className="pg-port-lb__close" onClick={() => setLightbox(null)} aria-label="Kapat">✕</button>
          <button className="pg-port-lb__prev" onClick={() => setLightbox((p) => (p - 1 + PORT_IMGS.length) % PORT_IMGS.length)} aria-label="Önceki">‹</button>
          <img
            key={lightbox}
            src={PORT_IMGS[lightbox]}
            alt=""
            className="pg-port-lb__img"
          />
          <button className="pg-port-lb__next" onClick={() => setLightbox((p) => (p + 1) % PORT_IMGS.length)} aria-label="Sonraki">›</button>
          <span className="pg-port-lb__counter">{lightbox + 1} / {PORT_IMGS.length}</span>
        </div>
      )}
    </main>
  );
}

// ── PROCESS ───────────────────────────────────────────────────────────
const PROC_IMGS = [
  "images/pageimages/proces (4).jpeg",
  "images/pageimages/proces (5).jpeg",
  "images/pageimages/proces (8).jpeg",
  "images/pageimages/proces (9).jpeg",
];

function PageProcess({ t, lang }) {
  const [lb, setLb] = uS(null);

  uE(() => {
    if (lb === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLb(null);
      if (e.key === 'ArrowRight') setLb((p) => (p + 1) % PROC_IMGS.length);
      if (e.key === 'ArrowLeft') setLb((p) => (p - 1 + PROC_IMGS.length) % PROC_IMGS.length);
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [lb]);

  return (
    <main id="main-content" className="pg">
      <div className="pg__hero">
        <span className="eyebrow eyebrow--burgundy pg__eyebrow">— {t.process.eyebrow}</span>
        <h1 className="pg__title">
          {t.process.title}
          <em>{t.process.titleItalic}</em>
        </h1>
        <p className="pg__sub">{t.process.intro}</p>
      </div>

      <div className="pg-process__split">
        {/* Sol — küçük fotoğraf ızgarası */}
        <div className="pg-process__img-col">
          {PROC_IMGS.map((src, i) => (
            <Reveal key={i} delay={i * 0.08} className="pg-process__thumb">
              <button
                className="pg-process__thumb-btn"
                onClick={() => setLb(i)}
                aria-label={`Fotoğraf ${i + 1} — büyüt`}
              >
                <PhotoFill src={src} alt="" objectPosition="center" />
                <div className="pg-process__photo-overlay" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
              </button>
            </Reveal>
          ))}
        </div>

        {/* Sağ — timeline adımları */}
        <div className="pg-process__steps">
          {t.process.steps.map((s, i) => (
            <Reveal key={s.idx} className="pg-process__step" delay={i * 0.08} y={16}>
              <div className="pg-process__num" aria-hidden="true">{s.idx}</div>
              <div className="pg-process__right">
                <h2 className="pg-process__name">{s.name}</h2>
                <span className="pg-process__dur">{s.dur}</span>
                <p className="pg-process__body">{s.body}</p>
                <div className="pg-process__out">
                  <span className="pg-process__out-dot">·</span>
                  {s.out}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      {lb !== null && (
        <div
          className="pg-port-lb"
          role="dialog"
          aria-modal="true"
          onClick={(e) => { if (e.target === e.currentTarget) setLb(null); }}
        >
          <button className="pg-port-lb__close" onClick={() => setLb(null)} aria-label="Kapat">✕</button>
          <button className="pg-port-lb__prev" onClick={() => setLb((p) => (p - 1 + PROC_IMGS.length) % PROC_IMGS.length)} aria-label="Önceki">‹</button>
          <img key={lb} src={PROC_IMGS[lb]} alt="" className="pg-port-lb__img" />
          <button className="pg-port-lb__next" onClick={() => setLb((p) => (p + 1) % PROC_IMGS.length)} aria-label="Sonraki">›</button>
          <span className="pg-port-lb__counter">{lb + 1} / {PROC_IMGS.length}</span>
        </div>
      )}
    </main>
  );
}


// ── INQUIRY ───────────────────────────────────────────────────────────
function PageInquiry({ t, lang }) {
  const en = lang === 'en';
  const [form, setForm] = uS({
    firstName: '', lastName: '', phone: '', instagram: '', email: '',
    eventType: '', guests: '', date: '', venueBooked: '', venueName: '',
    budget: '', notes: '', heardFrom: '',
  });
  const [sending, setSending] = uS(false);
  const [done, setDone] = uS(false);

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

  const submit = (e) => {
    e.preventDefault();
    setSending(true);

    try {
      const to = (t && t.contact && t.contact.email) ? t.contact.email : '';
      const subject = `${en ? 'Inquiry from' : 'Teklif talebi'}: ${form.firstName} ${form.lastName}`;
      const lines = [
        `${en ? 'Name' : 'Ad'}: ${form.firstName} ${form.lastName}`,
        `${en ? 'Phone' : 'Telefon'}: ${form.phone}`,
        `Instagram: ${form.instagram}`,
        `${en ? 'Email' : 'E-Posta'}: ${form.email}`,
        `${en ? 'Event Type' : 'Etkinlik'}: ${form.eventType}`,
        `${en ? 'Guests' : 'Davetli'}: ${form.guests}`,
        `${en ? 'Date' : 'Tarih'}: ${form.date}`,
        `${en ? 'Venue booked' : 'Mekan rezervasyonu'}: ${form.venueBooked}`,
        `${en ? 'Venue name' : 'Mekan adı'}: ${form.venueName}`,
        `${en ? 'Budget' : 'Bütçe'}: ${form.budget}`,
        `${en ? 'Notes' : 'Notlar'}: ${form.notes}`,
        `${en ? 'Heard From' : 'Bizi nasıl duydunuz'}: ${form.heardFrom}`,
      ];

      const body = lines.join('\r\n');

      // Construct mailto URL and open the user's mail client
      const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      window.location.href = mailto;
    } catch (err) {
      // fallback: log error
      console.error('Failed to open mail client', err);
    }

    // keep the UX from original implementation
    setTimeout(() => {
      setSending(false);
      setDone(true);
    }, 900);
  };

  const eventTypes = en
    ? ['Wedding', 'Birthday', 'Corporate', 'Engagement', 'Destination Event', 'Other']
    : ['Düğün', 'Doğum Günü', 'Kurumsal', 'Nişan', 'Destinasyon Etkinliği', 'Diğer'];

  const heardFromOpts = en
    ? ['Instagram', 'Pinterest', 'Google', 'Friend / Referral', 'Press', 'Other']
    : ['Instagram', 'Pinterest', 'Google', 'Arkadaş / Tavsiye', 'Basın', 'Diğer'];

  const L = (txt) => <label className="niq__label">{txt}</label>;

  if (done) {
    return (
      <main id="main-content" className="niq niq--done">
        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <h2>{t.inquiry.done}</h2>
        <p>{t.inquiry.doneSub}</p>
      </main>
    );
  }

  return (
    <main id="main-content" className="niq">
      <p className="niq__intro">
        {en
          ? 'WE LOOK FORWARD TO BRINGING YOUR VISION TO LIFE—FILL OUT THE FORM, AND WE\'LL BE IN TOUCH.'
          : 'VİZYONUNUZU HAYATA GEÇİRMEK İÇİN SABRSIZLANIYORUZ — FORMU DOLDURUN, SİZE DÖNECEĞİZ.'}
      </p>

      <form className="niq__form" onSubmit={submit}>
        {/* Row 1: first name, last name, phone */}
        <div className="niq__row niq__row--3">
          <div className="niq__field">
            {L(en ? 'FIRST NAME *' : 'AD *')}
            <input className="niq__input" type="text" required value={form.firstName} onChange={set('firstName')} />
          </div>
          <div className="niq__field">
            {L(en ? 'LAST NAME *' : 'SOYAD *')}
            <input className="niq__input" type="text" required value={form.lastName} onChange={set('lastName')} />
          </div>
          <div className="niq__field">
            {L(en ? 'PHONE NUMBER *' : 'TELEFON *')}
            <input className="niq__input" type="tel" required value={form.phone} onChange={set('phone')} />
          </div>
        </div>

        {/* Row 2: instagram, email */}
        <div className="niq__row niq__row--2">
          <div className="niq__field">
            {L(en ? 'INSTAGRAM HANDLE *' : 'INSTAGRAM *')}
            <input className="niq__input" type="text" required value={form.instagram} onChange={set('instagram')} />
          </div>
          <div className="niq__field">
            {L(en ? 'EMAIL *' : 'E-POSTA *')}
            <input className="niq__input" type="email" required value={form.email} onChange={set('email')} />
          </div>
        </div>

        {/* Row 3: event type, guest count */}
        <div className="niq__row niq__row--2">
          <div className="niq__field">
            {L(en ? 'WHAT TYPE OF EVENT ARE YOU PLANNING? *' : 'ETKİNLİK TÜRÜ *')}
            <select className="niq__input niq__select" required value={form.eventType} onChange={set('eventType')}>
              <option value=""></option>
              {eventTypes.map((o) => <option key={o} value={o}>{o}</option>)}
            </select>
          </div>
          <div className="niq__field">
            {L(en ? 'WHAT IS YOUR APPROXIMATE GUEST COUNT?' : 'YAKLAŞIK DAVETLİ SAYISI?')}
            <input className="niq__input" type="text" value={form.guests} onChange={set('guests')} />
          </div>
        </div>

        {/* Row 4: date */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'DO YOU HAVE A SPECIFIC DATE IN MIND?' : 'BELİRLİ BİR TARİHİNİZ VAR MI?')}
            <input className="niq__input" type="date" value={form.date} onChange={set('date')} />
          </div>
        </div>

        {/* Row 5: venue booked radio */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'DO YOU HAVE A VENUE BOOKED? *' : 'MEKAN REZERVASYONUNuZ VAR MI? *')}
            <div className="niq__radios">
              {[en ? 'YES' : 'EVET', en ? 'NO' : 'HAYIR'].map((opt, i) => (
                <label key={opt} className="niq__radio-label">
                  <input
                    type="radio"
                    name="venueBooked"
                    value={opt}
                    checked={form.venueBooked === opt}
                    onChange={set('venueBooked')}
                    required
                    className="niq__radio"
                  />
                  {opt}
                </label>
              ))}
            </div>
          </div>
        </div>

        {/* Row 6: venue name (conditional) */}
        {form.venueBooked === (en ? 'YES' : 'EVET') && (
          <div className="niq__row niq__row--1">
            <div className="niq__field">
              {L(en ? 'IF YES, PLEASE PROVIDE THE VENUE NAME.' : 'MEKAN ADINI BELİRTİN.')}
              <input className="niq__input" type="text" value={form.venueName} onChange={set('venueName')} />
            </div>
          </div>
        )}

        {/* Row 7: budget */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'WHAT IS YOUR OVERALL BUDGET? *' : 'GENEL BÜTÇENİZ? *')}
            <input className="niq__input" type="text" required value={form.budget} onChange={set('budget')} />
          </div>
        </div>

        {/* Row 8: inspiration upload */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'DO YOU HAVE ANY INSPIRATION PHOTOS?' : 'İLHAM FOTOĞRAFLARINIZ VAR MI?')}
            <label className="niq__upload">
              <span>+ {en ? 'UPLOAD NOW' : 'YÜKLE'}</span>
              <input type="file" accept="image/*" multiple style={{ display: 'none' }} />
            </label>
          </div>
        </div>

        {/* Row 9: notes */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'ANYTHING ELSE WE SHOULD KNOW? (VENDORS, IDEAS, EXPECTATIONS) *' : 'EKLEMEk İSTEDİĞİNİZ BİR ŞEY? *')}
            <textarea className="niq__input niq__textarea" rows={4} required value={form.notes} onChange={set('notes')} />
          </div>
        </div>

        {/* Row 10: heard from */}
        <div className="niq__row niq__row--1">
          <div className="niq__field">
            {L(en ? 'HOW DID YOU HEAR ABOUT US? *' : 'BİZİ NASIL DUYDUNUZ? *')}
            <select className="niq__input niq__select" required value={form.heardFrom} onChange={set('heardFrom')}>
              <option value=""></option>
              {heardFromOpts.map((o) => <option key={o} value={o}>{o}</option>)}
            </select>
          </div>
        </div>

        <button type="submit" disabled={sending} className="niq__submit">
          {sending ? (en ? 'SENDING…' : 'GÖNDERİLİYOR…') : 'SUBMIT'}
        </button>
      </form>
    </main>
  );
}

// ── CONTACT ───────────────────────────────────────────────────────────
function PageContact({ t, lang, showTestimonials }) {
  const testi = t.testimonials.items[0];
  return (
    <main id="main-content" className="pg">
      {/* Full-bleed hero with image */}
      <div className="pg-contact__hero">
        <PhotoFill src={VISION_IMG} alt="" objectPosition="center 40%" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(26,20,17,.82) 0%, rgba(26,20,17,.3) 60%, transparent 100%)' }} />
        <div className="pg-contact__hero-text">
          <span className="eyebrow" style={{ color: 'rgba(250,247,242,.5)', display: 'block', marginBottom: 16 }}>— {t.contact.eyebrow}</span>
          <h1 className="pg-contact__hero-title">{t.contact.title}</h1>
        </div>
      </div>

      {/* Two-column info grid */}
      <div className="pg-contact__grid">
        {/* Left: direct contact */}
        <Reveal className="pg-contact__col">
          <span className="pg-contact__col-h">{lang === 'en' ? 'Get in touch' : 'Doğrudan iletişim'}</span>
          <a href={`mailto:${t.contact.email}`} className="pg-contact__link-big">{t.contact.email}</a>
          <p className="pg-contact__meta">
            {lang === 'en' ? 'Cappadocia, Turkey' : 'Kapadokya, Türkiye'}
          </p>
        </Reveal>

        {/* Right: social */}
        <Reveal delay={0.1} className="pg-contact__col">
          <span className="pg-contact__col-h">{lang === 'en' ? 'Social' : 'Sosyal'}</span>
          <div className="pg-contact__social-row">
            <a
              href="https://www.instagram.com/numaeventstudio?igsh=OWJudTdvdnVxMXBr"
              target="_blank"
              rel="noopener noreferrer"
              className="pg-contact__social-link"
              aria-label="Instagram (yeni sekmede açılır)"
            >
              <span>{t.contact.instagram}</span>
              <span className="pg-contact__social-ext">↗ Instagram</span>
            </a>
            <a
              href="https://tr.pinterest.com/numaeventstudio/"
              target="_blank"
              rel="noopener noreferrer"
              className="pg-contact__social-link"
              aria-label="Pinterest (yeni sekmede açılır)"
            >
              <span>{t.contact.pinterest}</span>
              <span className="pg-contact__social-ext">↗ Pinterest</span>
            </a>
          </div>
        </Reveal>

      </div>

      {/* CTA band */}
      <div style={{ padding: 'clamp(56px,7vw,96px) var(--pad-x)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, borderTop: '1px solid var(--line-soft)' }}>
        <p style={{ fontFamily: 'var(--display-font)', fontSize: 'clamp(22px,3vw,44px)', fontStyle: 'italic', margin: 0 }}>
          {t.elevated.a} <span style={{ fontWeight: 300 }}>{t.elevated.b}</span>
        </p>
        <a
          href="/?route=inquiry"
          className="btn-solid"
          onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}
        >
          <span>{t.nav.cta}</span>
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </main>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Route → Page map
// ──────────────────────────────────────────────────────────────────────
function renderPage(route, t, lang, tweaks) {
  switch (route) {
    case 'home':      return <PageHome t={t} lang={lang} tweaks={tweaks} />;
    case 'about':     return <PageAbout t={t} lang={lang} />;
    case 'studio':    return <PageStudio t={t} lang={lang} />;
    case 'services':  return <PageServices t={t} lang={lang} />;
    case 'portfolio': return <PagePortfolio t={t} lang={lang} />;
    case 'process':   return <PageProcess t={t} />;
    case 'inquiry':   return <PageInquiry t={t} lang={lang} />;
    case 'contact':   return <PageContact t={t} lang={lang} showTestimonials={tweaks.showTestimonials} />;
    default:          return <PageHome t={t} tweaks={tweaks} />;
  }
}

// ──────────────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(NUMA_DEFAULTS);
  const lang = tweaks.lang === 'en' ? 'en' : 'tr';
  const setLang = (l) => setTweak('lang', l);
  const t = window.NUMA_COPY[lang];

  const route = useRouter();

  // CSS variables
  uE(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', tweaks.accent);
    r.style.setProperty('--bg', tweaks.bg);
    r.style.setProperty('--fg', tweaks.fg);
    r.style.setProperty('--muted', tweaks.muted);
    r.style.setProperty('--display-font', `"${tweaks.displayFont}", "Cormorant Garamond", serif`);
    r.style.setProperty('--body-font', `"${tweaks.bodyFont}", "Inter", system-ui, sans-serif`);
    r.dataset.anim = tweaks.animIntensity;
  }, [tweaks.accent, tweaks.bg, tweaks.fg, tweaks.muted, tweaks.displayFont, tweaks.bodyFont, tweaks.animIntensity]);

  uE(() => { document.documentElement.lang = lang; }, [lang]);

  // Scroll state for nav
  const [scrolled, setScrolled] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Curtain transition
  const [curtain, setCurtain] = uS('enter');
  uE(() => {
    setCurtain('enter');
    const t = setTimeout(() => setCurtain('hidden'), 700);
    return () => clearTimeout(t);
  }, [route]);

  // Page title update
  uE(() => {
    const titles = {
      home: 'NUMA Event Studio',
      about: 'Hakkımızda — NUMA',
      studio: 'Stüdyo — NUMA',
      services: 'Hizmetler — NUMA',
      portfolio: 'Portfolyo — NUMA',
      process: 'Süreç — NUMA',
      inquiry: 'Teklif — NUMA',
      contact: 'İletişim — NUMA',
    };
    document.title = titles[route] || 'NUMA Event Studio';
  }, [route]);

  return (
    <>
      {curtain !== 'hidden' && (
        <div className={`route-curtain route-curtain--${curtain}`} aria-hidden="true" />
      )}
      <Nav lang={lang} setLang={setLang} scrolled={scrolled} t={t} route={route} />
      <div key={route} className="page-transition">
        {renderPage(route, t, lang, tweaks)}
      </div>
      <FooterNuma t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Dil / Language">
          <TweakRadio
            value={lang}
            onChange={(v) => setLang(v)}
            options={[
              { value: 'tr', label: 'Türkçe' },
              { value: 'en', label: 'English' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Palet / Palette">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#4A0E0E', '#7A3E2E', '#0A0A0A', '#2A4030', '#6E1F2A']}
          />
          <TweakColor
            label="Background"
            value={tweaks.bg}
            onChange={(v) => setTweak('bg', v)}
            options={['#F5F1EC', '#F9F9F9', '#EDE6DC', '#1A1411', '#FAF7F2']}
          />
          <TweakColor
            label="Foreground"
            value={tweaks.fg}
            onChange={(v) => setTweak('fg', v)}
            options={['#1A1411', '#0A0A0A', '#3E332A', '#F5F1EC', '#272019']}
          />
        </TweakSection>

        <TweakSection label="Tipografi / Type">
          <TweakSelect
            label="Display"
            value={tweaks.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={['Cormorant Garamond', 'Playfair Display', 'EB Garamond', 'Cormorant', 'DM Serif Display']}
          />
          <TweakSelect
            label="Body"
            value={tweaks.bodyFont}
            onChange={(v) => setTweak('bodyFont', v)}
            options={['Inter', 'Montserrat', 'Manrope', 'Work Sans']}
          />
        </TweakSection>

        <TweakSection label="İçerik / Content">
          <TweakSelect
            label="Hero görseli"
            value={String(tweaks.heroIndex)}
            onChange={(v) => setTweak('heroIndex', Number(v))}
            options={[
              { value: '0', label: 'Dugun (outdoor)' },
              { value: '1', label: 'Marina (warm)' },
              { value: '2', label: 'Mater (portrait)' },
            ]}
          />
          <TweakToggle
            label="Testimonials"
            value={tweaks.showTestimonials}
            onChange={(v) => setTweak('showTestimonials', v)}
          />
        </TweakSection>

        <TweakSection label="Animasyon">
          <TweakRadio
            value={tweaks.animIntensity}
            onChange={(v) => setTweak('animIntensity', v)}
            options={[
              { value: 'minimal', label: 'Sakin' },
              { value: 'balanced', label: 'Dengeli' },
              { value: 'rich', label: 'Zengin' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);