// NUMA — section components
// Depends on: window.NUMA_COPY, React, ReactDOM

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// Router proxy — delegate to app's navigate() once loaded
const navigate = (route) => {
  if (typeof window.navigate === 'function') {
    window.navigate(route);
  } else {
    const nextUrl = route === 'home' ? '/' : `/?route=${route}`;
    window.history.pushState({}, '', nextUrl);
    if (typeof window.__syncNumaRoute === 'function') {
      window.__syncNumaRoute();
    }
    window.scrollTo({ top: 0, behavior: 'instant' });
  }
};

// ──────────────────────────────────────────────────────────────────────
// SecCorner — small corner link to the dedicated page
// ──────────────────────────────────────────────────────────────────────
function SecCorner({ route, label, light = false }) {
  return (
    <a
      href={route === 'home' ? '/' : `/?route=${route}`}
      className={`sec-corner${light ? ' sec-corner--light' : ''}`}
      aria-label={`${label} sayfasına git`}
      onClick={(e) => { e.preventDefault(); navigate(route); }}
    >
      {label}
      <span className="sec-corner__line" aria-hidden="true" />
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Helpers
// ──────────────────────────────────────────────────────────────────────
const useInView = (opts = { threshold: 0.15, once: true }) => {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        if (opts.once) obs.disconnect();
      } else if (!opts.once) {
        setInView(false);
      }
    }, { threshold: opts.threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
};

const prefersReducedMotion = () =>
  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const Reveal = ({ children, delay = 0, y = 24, as: Tag = 'div', className = '', style = {}, ...props }) => {
  const [ref, inView] = useInView();
  const reduced = prefersReducedMotion();
  const dur = reduced ? '0.01ms' : '1.2s';
  const ty = reduced ? 0 : y;
  return (
    <Tag
      ref={ref}
      className={className}
      {...props}
      style={{
        ...style,
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : `translateY(${ty}px)`,
        transition: `opacity ${dur} cubic-bezier(.22,.61,.36,1) ${reduced ? '0s' : delay + 's'}, transform ${dur} cubic-bezier(.22,.61,.36,1) ${reduced ? '0s' : delay + 's'}`,
      }}
    >
      {children}
    </Tag>
  );
};

// Image with shimmer placeholder
const PhotoFill = ({ src, alt, className = '', style = {}, objectPosition = 'center', eager = false }) => {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className={`photo-fill ${className}`} style={style}>
      <div className="photo-shim" aria-hidden="true" style={{ opacity: loaded ? 0 : 1 }} />
      <img
        src={src}
        alt={alt}
        loading={eager ? 'eager' : 'lazy'}
        fetchpriority={eager ? 'high' : 'auto'}
        decoding="async"
        onLoad={() => setLoaded(true)}
        style={{ objectPosition, opacity: loaded ? 1 : 0 }}
      />
    </div>
  );
};

// ──────────────────────────────────────────────────────────────────────
// Navigation
// ──────────────────────────────────────────────────────────────────────
function Nav({ lang, setLang, scrolled, t, route }) {
  const [open, setOpen] = useState(false);

  // Nav items: route-based pages + external social links
  const NAV_ITEMS = [
    { k: 'home',      route: 'home' },
    { k: 'about',     route: 'about' },
    { k: 'studio',    route: 'studio' },
    { k: 'services',  route: 'services' },
    { k: 'portfolio', route: 'portfolio' },
    { k: 'process',   route: 'process' },
    { k: 'inquiry',   route: 'inquiry' },
    { k: 'contact',   route: 'contact' },
    { k: 'instagram', href: 'https://www.instagram.com/numaeventstudio?igsh=OWJudTdvdnVxMXBr', external: true },
    { k: 'pinterest', href: 'https://tr.pinterest.com/numaeventstudio/', external: true },
  ];

  const handleNavClick = useCallback((e, item) => {
    if (item.external) return; // native link, let browser handle
    e.preventDefault();
    setOpen(false);
    navigate(item.route);
  }, []);

  // Focus trap + Escape
  const drawerRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    const el = drawerRef.current;
    if (!el) return;
    const focusable = el.querySelectorAll('a, button');
    if (focusable.length) focusable[0].focus();
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // Desktop: hide instagram/pinterest (shown only in drawer + footer)
  const desktopItems = NAV_ITEMS.filter(it => !it.external);

  const linkHref = (item) => item.external ? item.href : (item.route === 'home' ? '/' : `/?route=${item.route}`);
  const isActive = (item) => !item.external && item.route === route;

  return (
    <header className={`nav ${scrolled && route !== 'inquiry' ? 'nav--scrolled' : ''} ${!scrolled && (route === 'inquiry' || route === 'home') ? 'nav--on-dark' : ''}`} role="banner">
      <div className="nav__inner">
        <a
          href="/"
          className="nav__logo"
          aria-label="NUMA — Ana Sayfa"
          onClick={(e) => { e.preventDefault(); navigate('home'); }}
        >
          <span className="nav__logo-mark">NUMA</span>
          <span className="nav__logo-sub">EVENT STUDIO</span>
        </a>

        <nav className="nav__links" aria-label="Ana navigasyon">
          {desktopItems.map((it) => (
            <a
              key={it.k}
              href={linkHref(it)}
              className={`nav__link ${isActive(it) ? 'nav__link--active' : ''}`}
              aria-current={isActive(it) ? 'page' : undefined}
              onClick={(e) => handleNavClick(e, it)}
            >
              {t.nav[it.k]}
            </a>
          ))}
        </nav>

        <div className="nav__right">
          <div className="lang-toggle" role="group" aria-label="Dil seçimi">
            <button
              aria-pressed={lang === 'tr'}
              className={`lang-toggle__btn ${lang === 'tr' ? 'is-on' : ''}`}
              onClick={() => setLang('tr')}
            >TR</button>
            <span className="lang-toggle__sep" aria-hidden="true">·</span>
            <button
              aria-pressed={lang === 'en'}
              className={`lang-toggle__btn ${lang === 'en' ? 'is-on' : ''}`}
              onClick={() => setLang('en')}
            >EN</button>
          </div>
          <a
            href="/?route=inquiry"
            className="nav__cta"
            onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}
          >{t.nav.cta}</a>
          <button
            className="nav__burger"
            aria-label="Menüyü aç"
            aria-expanded={open}
            aria-controls="mobile-drawer"
            onClick={() => setOpen(true)}
          >
            <span aria-hidden="true" /><span aria-hidden="true" /><span aria-hidden="true" />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        id="mobile-drawer"
        ref={drawerRef}
        className={`drawer ${open ? 'is-open' : ''}`}
        role={open ? 'dialog' : undefined}
        aria-modal={open ? 'true' : undefined}
        aria-label={open ? 'Mobil navigasyon' : undefined}
        aria-hidden={open ? undefined : 'true'}
      >
        <button className="drawer__close" aria-label="Menüyü kapat" onClick={() => setOpen(false)}>×</button>
        <nav className="drawer__nav" aria-label="Mobil menü">
          {NAV_ITEMS.map((it) => (
            <a
              key={it.k}
              href={linkHref(it)}
              className={`drawer__link ${isActive(it) ? 'drawer__link--active' : ''}`}
              aria-current={isActive(it) ? 'page' : undefined}
              target={it.external ? '_blank' : undefined}
              rel={it.external ? 'noopener noreferrer' : undefined}
              onClick={(e) => handleNavClick(e, it)}
            >
              {t.nav[it.k]}
            </a>
          ))}
        </nav>
        <div className="drawer__foot">
          <div className="lang-toggle" role="group" aria-label="Dil seçimi">
            <button
              aria-pressed={lang === 'tr'}
              className={`lang-toggle__btn ${lang === 'tr' ? 'is-on' : ''}`}
              onClick={() => setLang('tr')}
            >TR</button>
            <span className="lang-toggle__sep" aria-hidden="true">·</span>
            <button
              aria-pressed={lang === 'en'}
              className={`lang-toggle__btn ${lang === 'en' ? 'is-on' : ''}`}
              onClick={() => setLang('en')}
            >EN</button>
          </div>
          <a
            href="/?route=inquiry"
            className="nav__cta"
            onClick={(e) => { e.preventDefault(); setOpen(false); navigate('inquiry'); }}
          >{t.nav.cta}</a>
        </div>
      </div>
      {open && <div className="drawer__backdrop" aria-hidden="true" onClick={() => setOpen(false)} />}
    </header>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Hero — full-bleed editorial
// ──────────────────────────────────────────────────────────────────────
function Hero({ t }) {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <div className="hero__bg">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="hero__video"
          aria-hidden="true"
        >
          <source src="images/homebp.mp4" type="video/mp4" />
        </video>
        <div className="hero__veil" />
      </div>

      <div className="hero__corner hero__corner--tl">
        <span className="hero__meta">{t.hero.meta1}</span>
      </div>
      <div className="hero__corner hero__corner--tr">
        <span className="hero__meta">{t.hero.meta2}</span>
      </div>

      <div className="hero__center">
        <Reveal delay={0.1}>
          <span className="hero__brand">{t.hero.brand}</span>
        </Reveal>
        <Reveal delay={0.25}>
          <h1 className="display-hero">
            <span className="display-hero__line">{t.hero.a}</span>
            <span className="display-hero__line display-hero__line--alt">{t.hero.b}</span>
          </h1>
        </Reveal>

        <Reveal delay={0.55}>
          <a href="/?route=inquiry" className="btn-outline" onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}>
            <span>{t.hero.cta}</span>
            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </Reveal>
      </div>

      <div className="hero__scroll" aria-hidden="true">
        <span>SCROLL</span>
        <div className="hero__scroll-bar"><i /></div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Studio Note — Editorial founder/studio statement (replaces Glimpse)
// ──────────────────────────────────────────────────────────────────────
function StudioNote({ t, image, pageRoute }) {
  return (
    <section id="about" className="studio" data-screen-label="02 About" style={{ position: 'relative' }}>
      {pageRoute && <SecCorner route={pageRoute} label={t.nav.about} />}
      <div className="studio__grid">
        <div className="studio__media">
          <PhotoFill src={image} alt="" objectPosition="center 35%" />
          <span className="studio__tag">N° 01</span>
        </div>

        <div className="studio__text">
          <Reveal>
            <span className="eyebrow eyebrow--burgundy">— {t.about.eyebrow}</span>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="studio__quote">
              <span className="studio__quote-mark" aria-hidden="true">“</span>
              {t.about.quote}
            </p>
          </Reveal>
          <Reveal delay={0.18}>
            <p className="studio__body">{t.about.body}</p>
          </Reveal>
          <Reveal delay={0.25} className="studio__foot">
            <span className="studio__sign">{t.about.sign}</span>
            <a href="/?route=studio" className="link-arrow" onClick={(e) => { e.preventDefault(); navigate('studio'); }}><span>{t.about.cta}</span><i /></a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Story — Where every detail tells a story
// ──────────────────────────────────────────────────────────────────────
function Story({ t, image, image2, pageRoute }) {
  return (
    <section id="studio" className="story" data-screen-label="03 Studio" style={{ position: 'relative' }}>
      <div className="story__grid">
        <div className="story__media">
          <Reveal y={40} className="story__media-main">
            <PhotoFill src={image} alt="" />
          </Reveal>
          <Reveal y={60} delay={0.25} className="story__media-offset">
            <PhotoFill src={image2} alt="" objectPosition="center 40%" />
          </Reveal>
        </div>

        <div className="story__text">
          <Reveal>
            <h2 className="display-section">
              <span>{t.studio.a}</span>
              <span className="display-section--italic">{t.studio.b}</span>
            </h2>
          </Reveal>
          <Reveal delay={0.15}>
            <p className="body-caps">{t.studio.body}</p>
          </Reveal>
          <Reveal delay={0.25}>
            <a href="/?route=studio" className="link-arrow" onClick={(e) => { e.preventDefault(); navigate('studio'); }}><span>{t.nav.studio}</span><i /></a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Works — THE ART OF CELEBRATION  (THE feature: asymmetric hover grid)
// ──────────────────────────────────────────────────────────────────────
const WORK_CATS = [
  {
    src: "images/pageimages/numaatelier.webp",
    tag: "ATELIER",
    sub: "Tablescape Design + Floral Direction",
  },
  {
    src: "images/pageimages/numaatmosphere.webp",
    tag: "ATMOSPHERE",
    sub: "Atmosphere Design",
  },
  {
    src: "images/pageimages/services (6).jpeg",
    tag: "CELEBRATIONS",
    sub: "Editorial Celebrations + Destination Events",
  },
];

function Works({ t, pageRoute }) {
  const [active, setActive] = useState(null);
  return (
    <section id="portfolio" className="works" data-screen-label="04 Portfolio" style={{ position: 'relative' }}>
      {pageRoute && <SecCorner route={pageRoute} label={t.nav.portfolio} />}
      <Reveal>
        <h2 className="display-banner">{t.portfolio.title}</h2>
      </Reveal>

      <Reveal delay={0.08}>
        <p className="works__intro">{t.portfolio.intro}</p>
      </Reveal>

      <div className="works__grid">
        <WorkTile
          big
          src={WORK_CATS[0].src}
          data={WORK_CATS[0]}
          isActive={active === 0}
          onEnter={() => setActive(0)}
          onLeave={() => setActive((a) => (a === 0 ? null : a))}
          viewLabel={t.portfolio.view}
        />

        <div className="works__stack">
          <WorkTile
            src={WORK_CATS[1].src}
            data={WORK_CATS[1]}
            isActive={active === 1}
            onEnter={() => setActive(1)}
            onLeave={() => setActive((a) => (a === 1 ? null : a))}
            viewLabel={t.portfolio.view}
          />
          <WorkTile
            src={WORK_CATS[2].src}
            data={WORK_CATS[2]}
            isActive={active === 2}
            onEnter={() => setActive(2)}
            onLeave={() => setActive((a) => (a === 2 ? null : a))}
            viewLabel={t.portfolio.view}
          />
        </div>
      </div>
    </section>
  );
}

const SERV_GROUPS = [
  {
    img: "images/pageimages/services (1).jpeg",
    keys: [0, 1],
  },
  {
    img: "images/pageimages/services (3).jpeg",
    keys: [2, 3],
  },
  {
    img: "images/pageimages/services (5).jpeg",
    keys: [4],
  },
];

function Services({ t, pageRoute }) {
  return (
    <section id="services" className="serv" data-screen-label="05 Services" style={{ position: 'relative' }}>
      {pageRoute && <SecCorner route={pageRoute} label={t.nav.services} />}
      <div className="serv__head">
        <Reveal>
          <span className="eyebrow eyebrow--burgundy">— {t.services.eyebrow}</span>
        </Reveal>
        <Reveal delay={0.08}>
          <h2 className="display-section serv__title">{t.services.title}</h2>
        </Reveal>
        <Reveal delay={0.16}>
          <p className="serv__intro">{t.services.intro}</p>
        </Reveal>
      </div>

      <div className="serv__visual-grid">
        {SERV_GROUPS.map((grp, gi) => (
          <Reveal key={gi} delay={gi * 0.12} className="serv__vcard">
            <div className="serv__vcard-img">
              <PhotoFill src={grp.img} alt="" objectPosition="center" />
            </div>
            <div className="serv__vcard-items">
              {grp.keys.map((k) => (
                <div key={k} className="serv__vcard-item">
                  <span className="serv__vcard-idx" aria-hidden="true">0{k + 1}</span>
                  <div>
                    <h3 className="serv__vcard-title">{t.services.items[k].title}</h3>
                    <p className="serv__vcard-body">{t.services.items[k].body}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function WorkTile({ big, src, data, isActive, onEnter, onLeave, viewLabel }) {
  return (
    <a
      className={`work ${big ? 'work--big' : 'work--small'} ${isActive ? 'is-hot' : ''}`}
      href="/?route=portfolio"
      onClick={(e) => { e.preventDefault(); navigate('portfolio'); }}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      onFocus={onEnter}
      onBlur={onLeave}
    >
      <div className="work__img">
        <PhotoFill src={src} alt={data.tag} />
      </div>
      <div className="work__veil" />
      <div className="work__label">
        <span className="work__tag">{data.tag}</span>
        <span className="work__sub">{data.sub}</span>
      </div>
      <div className="work__hover" aria-hidden="true">
        <span className="work__view">{viewLabel}</span>
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Vision — Where vision meets perfection
// ──────────────────────────────────────────────────────────────────────
function Vision({ t, image }) {
  return (
    <section className="vision" data-screen-label="06 Vision">
      <div className="vision__bg">
        <PhotoFill src={image} alt="" objectPosition="center" />
        <div className="vision__veil" />
      </div>
      <div className="vision__inner">
        <Reveal>
          <h2 className="display-section display-section--lg">
            <span>{t.vision.a}</span>
            <span className="display-section--italic">{t.vision.b}</span>
          </h2>
        </Reveal>
        <Reveal delay={0.15}>
          <p className="body-caps body-caps--light">{t.vision.body}</p>
        </Reveal>
        <Reveal delay={0.25}>
          <a href="#inquiry" className="link-arrow link-arrow--light" onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}><span>{t.vision.cta}</span><i /></a>
        </Reveal>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Process
// ──────────────────────────────────────────────────────────────────────
function Process({ t, image, pageRoute }) {
  return (
    <section id="process" className="proc" data-screen-label="07 Process" style={{ position: 'relative' }}>
      {pageRoute && <SecCorner route={pageRoute} label={t.nav.process} />}
      <div className="proc__grid">
        <aside className="proc__aside">
          <Reveal>
            <span className="eyebrow eyebrow--burgundy">— {t.process.eyebrow}</span>
          </Reveal>
          <Reveal delay={0.08}>
            <h2 className="display-section proc__title">
              <span>{t.process.title}</span>
              <span className="display-section--italic display-section--lower">{t.process.titleItalic}</span>
            </h2>
          </Reveal>
          <Reveal delay={0.16}>
            <p className="proc__intro">{t.process.intro}</p>
          </Reveal>
          <Reveal delay={0.22} className="proc__detail">
            <PhotoFill src={image} alt="" objectPosition="center 40%" />
          </Reveal>
          <Reveal delay={0.3} className="proc__quote">
            <p className="proc__quote-text">{t.process.asideQuote}</p>
            <span className="proc__quote-by">{t.process.asideBy}</span>
          </Reveal>
        </aside>

        <ol className="proc__steps">
          {t.process.steps.map((s, i) => (
            <Reveal key={i} delay={i * 0.08} as="li" className="proc__step">
              <span className="proc__idx" aria-hidden="true">{s.idx}</span>
              <div className="proc__step-body">
                <div className="proc__step-head">
                  <h3 className="proc__step-name">{s.name}</h3>
                  <span className="proc__step-dur">{s.dur}</span>
                </div>
                <p className="proc__step-text">{s.body}</p>
                <div className="proc__step-out">
                  <span className="proc__step-out-k">·</span>
                  <span className="proc__step-out-v">{s.out}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Testimonials
// ──────────────────────────────────────────────────────────────────────
function Testimonials({ t }) {
  const [i, setI] = useState(0);
  const items = t.testimonials.items;
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % items.length), 8000);
    return () => clearInterval(id);
  }, [items.length]);
  return (
    <section className="testi" data-screen-label="08 Testimonials">
      <div className="testi__head">
        <span className="eyebrow eyebrow--burgundy">— {t.testimonials.eyebrow}</span>
        <h2 className="display-section testi__title">{t.testimonials.title}</h2>
      </div>

      <div className="testi__stage">
        {items.map((it, idx) => (
          <div key={idx} className={`testi__card ${idx === i ? 'is-on' : ''}`}>
            <div className="testi__quote-mark" aria-hidden="true">“</div>
            <p className="testi__quote">{it.quote}</p>
            <div className="testi__by">
              <span className="testi__name">— {it.name}</span>
              <span className="testi__event">{it.event}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="testi__dots">
        {items.map((_, idx) => (
          <button
            key={idx}
            className={`testi__dot ${idx === i ? 'is-on' : ''}`}
            onClick={() => setI(idx)}
            aria-label={`Testimonial ${idx + 1}`}
          />
        ))}
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Elevated — Your vision, elevated.
// ──────────────────────────────────────────────────────────────────────
function Elevated({ t, image }) {
  return (
    <section className="elev" data-screen-label="09 Elevated">
      <div className="elev__media">
        <PhotoFill src={image} alt="" objectPosition="center 30%" />
      </div>
      <div className="elev__text">
        <Reveal>
          <h2 className="display-section display-section--lg">
            <span>{t.elevated.a}</span>
            <span className="display-section--italic">{t.elevated.b}</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p className="body-caps">{t.elevated.body}</p>
        </Reveal>
        <Reveal delay={0.2}>
          <a href="/?route=inquiry" className="btn-solid" onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}>
            <span>{t.elevated.cta}</span>
            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Inquiry
// ──────────────────────────────────────────────────────────────────────
function Inquiry({ t, pageRoute }) {
  const [form, setForm] = useState({ name: '', date: '', place: '', guests: '', vision: '' });
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSending(true);
    setTimeout(() => {
      setSending(false);
      setDone(true);
      setForm({ name: '', date: '', place: '', guests: '', vision: '' });
      setTimeout(() => setDone(false), 6000);
    }, 900);
  };
  const fieldKeys = [
    { k: 'name', type: 'text' },
    { k: 'date', type: 'date' },
    { k: 'place', type: 'text' },
    { k: 'guests', type: 'text' },
  ];
  return (
    <section id="inquiry" className="iq" data-screen-label="10 Inquiry" style={{ position: 'relative' }}>
      {pageRoute && <SecCorner route={pageRoute} label={t.nav.inquiry} />}
      <div className="iq__head">
        <Reveal>
          <span className="eyebrow eyebrow--burgundy">— {t.inquiry.eyebrow}</span>
        </Reveal>
        <Reveal delay={0.1}>
          <h2 className="display-section iq__title">
            <span>{t.inquiry.title}</span>
            <span className="display-section--italic display-section--lower">{t.inquiry.italic}</span>
          </h2>
        </Reveal>
        <Reveal delay={0.2}>
          <p className="iq__sub">{t.inquiry.sub}</p>
        </Reveal>
      </div>

      {done ? (
        <div className="iq__done">
          <div className="iq__done-mark">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3 className="iq__done-h">{t.inquiry.done}</h3>
          <p className="iq__done-p">{t.inquiry.doneSub}</p>
        </div>
      ) : (
        <form onSubmit={submit} className="iq__form">
          {fieldKeys.map(({ k, type }) => (
            <div key={k} className="iq__row">
              <label htmlFor={k} className="iq__label">{t.inquiry.f[k]}</label>
              <input
                id={k}
                type={type}
                value={form[k]}
                onChange={(e) => setForm({ ...form, [k]: e.target.value })}
                placeholder={t.inquiry.placeholder}
                required
                className="iq__input"
              />
            </div>
          ))}
          <div className="iq__row iq__row--area">
            <label htmlFor="vision" className="iq__label">{t.inquiry.f.vision}</label>
            <textarea
              id="vision"
              rows={3}
              value={form.vision}
              onChange={(e) => setForm({ ...form, vision: e.target.value })}
              placeholder={t.inquiry.placeholder}
              required
              className="iq__input iq__input--area"
            />
          </div>

          <div className="iq__submit-row">
            <button type="submit" disabled={sending} className="iq__submit">
              <span>{sending ? t.inquiry.sending : t.inquiry.submit}</span>
              <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </form>
      )}
    </section>
  );
}

function Contact({ t, lang, pageRoute }) {
  const en = lang === 'en';
  return (
    <section id="contact" className="contact" data-screen-label="11 Contact" style={{ position: 'relative' }}>
      <div className="contact__split">

        {/* Sol — Detaylı Teklif */}
        <Reveal className="contact__half contact__half--dark">
          <span className="contact__half-tag">01</span>
          <h2 className="contact__half-title">
            {en ? 'Detailed' : 'Detaylı'}
            <em>{en ? ' Proposal' : ' Teklif'}</em>
          </h2>
          <p className="contact__half-body">
            {en
              ? 'Fill out our full inquiry form — event type, date, budget and vision. We\'ll get back to you within 48 hours.'
              : 'Etkinlik türü, tarih, bütçe ve vizyonunuzu detaylıca paylaşın. 48 saat içinde size dönüyoruz.'}
          </p>
          <a
            href="/?route=inquiry"
            className="contact__half-btn"
            onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}
          >
            <span>{en ? 'START INQUIRY' : 'TEKLİF BAŞVURUSU'}</span>
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </Reveal>

        {/* Sağ — Hızlı İletişim */}
        <Reveal delay={0.12} className="contact__half contact__half--light">
          <span className="contact__half-tag">02</span>
          <h2 className="contact__half-title">
            {en ? 'Quick' : 'Hızlı'}
            <em>{en ? ' Contact' : ' İletişim'}</em>
          </h2>
          <p className="contact__half-body">
            {en
              ? 'Reach us directly via email, phone or social media. For quick questions and collaborations.'
              : 'E-posta, telefon veya sosyal medya üzerinden doğrudan ulaşın. Hızlı sorular ve iş birlikleri için.'}
          </p>
          <div className="contact__half-links">
            <a href={`mailto:${t.contact.email}`} className="contact__half-link">{t.contact.email}</a>
            <a href="https://www.instagram.com/numaeventstudio?igsh=OWJudTdvdnVxMXBr" target="_blank" rel="noopener noreferrer" className="contact__half-link">Instagram ↗</a>
            <a href="https://tr.pinterest.com/numaeventstudio/" target="_blank" rel="noopener noreferrer" className="contact__half-link">Pinterest ↗</a>
          </div>
          <a
            href="/?route=contact"
            className="contact__half-btn contact__half-btn--outline"
            onClick={(e) => { e.preventDefault(); navigate('contact'); }}
          >
            <span>{en ? 'ALL CONTACT INFO' : 'TÜM İLETİŞİM BİLGİLERİ'}</span>
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </Reveal>

      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Footer
// ──────────────────────────────────────────────────────────────────────
function FooterNuma({ t }) {
  const go = (e, route) => { e.preventDefault(); navigate(route); };
  return (
    <footer className="foot" role="contentinfo">
      <div className="foot__row">
        <div className="foot__brand">
          <a href="/" className="foot__logo-link" aria-label="NUMA — Ana Sayfa" onClick={(e) => go(e, 'home')}>
            <span className="foot__logo">NUMA</span>
          </a>
          <span className="foot__sub">EVENT STUDIO</span>
          <span className="foot__city">{t.footer.city}</span>
        </div>

        <nav className="foot__cols" aria-label="Alt navigasyon">
          <div className="foot__col">
            <span className="foot__h">{t.footer.contact}</span>
            <a href="mailto:numaeventstudio@gmail.com" className="foot__link">numaeventstudio@gmail.com</a>
          </div>
          <div className="foot__col">
            <span className="foot__h">{t.footer.explore}</span>
            <a className="foot__link" href="/?route=about"    onClick={(e) => go(e, 'about')}>{t.nav.about}</a>
            <a className="foot__link" href="/?route=studio"   onClick={(e) => go(e, 'studio')}>{t.nav.studio}</a>
            <a className="foot__link" href="/?route=services" onClick={(e) => go(e, 'services')}>{t.nav.services}</a>
            <a className="foot__link" href="/?route=portfolio" onClick={(e) => go(e, 'portfolio')}>{t.nav.portfolio}</a>
            <a className="foot__link" href="/?route=process"  onClick={(e) => go(e, 'process')}>{t.nav.process}</a>
            <a className="foot__link" href="/?route=inquiry"  onClick={(e) => go(e, 'inquiry')}>{t.nav.inquiry}</a>
          </div>
          <div className="foot__col">
            <span className="foot__h">{t.footer.social}</span>
            <a className="foot__link" href="https://www.instagram.com/numaeventstudio?igsh=OWJudTdvdnVxMXBr" target="_blank" rel="noopener noreferrer">{t.nav.instagram}</a>
            <a className="foot__link" href="https://tr.pinterest.com/numaeventstudio/" target="_blank" rel="noopener noreferrer">{t.nav.pinterest}</a>
            <a className="foot__link" href="/?route=contact" onClick={(e) => go(e, 'contact')}>{t.nav.contact}</a>
          </div>
        </nav>
      </div>

      <div className="foot__bottom">
        <span>{t.footer.tag}</span>
        <span className="foot__note">{t.footer.note}</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, StudioNote, Story, Works, Services, Vision, Process, Testimonials, Elevated, Inquiry, Contact, FooterNuma, Reveal, PhotoFill, useInView, prefersReducedMotion,
});