// sections.jsx — top-level building blocks of the maison page
// Exports onto window so app.jsx can compose them.

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

// ─── Reveal-on-scroll wrapper ────────────────────────────────────────────────
function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      data-delay={delay}
      {...rest}
    >
      {children}
    </Tag>
  );
}

// ─── NAV ─────────────────────────────────────────────────────────────────────
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nav-left">
        <a href="#top" className="nav-mark">
          <span className="word">Lamia Abi Nader</span>
          <span className="sub">Haute Couture</span>
        </a>
      </div>
      <nav className="nav-links">
        <a href="#maison">Maison</a>
        <a href="#bridal">Bridal</a>
        <a href="#evening">Evening</a>
        <a href="#press">Runway &amp; Press</a>
        <a href="#contact">Ateliers</a>
      </nav>
      <div className="nav-right">
        <button type="button" className="nav-cta" onClick={onBook}>
          <span>Book Appointment</span>
        </button>
      </div>
    </header>
  );
}

// ─── HERO ────────────────────────────────────────────────────────────────────
const HERO_SHOTS = [
  { src: 'media/media-01-bridal-2026-1.webp', label: 'Look I — Constellation', code: 'LAN/26-01' },
  { src: 'media/media-02-bridal-2026-2.webp', label: 'Look II — Étoile', code: 'LAN/26-02' },
  { src: 'media/media-03-bridal-2026-3.webp', label: 'Look III — Aurore', code: 'LAN/26-03' },
];

function Hero({ onBook, heroIdx, setHeroIdx, scale }) {
  const shot = HERO_SHOTS[heroIdx] || HERO_SHOTS[0];

  // gentle auto-rotate when not hovered
  const hoverRef = useRef(false);
  useEffect(() => {
    const id = setInterval(() => {
      if (!hoverRef.current) setHeroIdx((i) => (i + 1) % HERO_SHOTS.length);
    }, 8500);
    return () => clearInterval(id);
  }, [setHeroIdx]);

  const titleSize = scale === 'cinematic' ? 'clamp(64px, 10vw, 156px)' : 'clamp(54px, 8vw, 132px)';

  return (
    <section className="hero" id="top"
      onMouseEnter={() => (hoverRef.current = true)}
      onMouseLeave={() => (hoverRef.current = false)}
    >
      <div className="hero-bg">
        <img key={shot.src} src={shot.src} alt="" />
      </div>
      <div className="hero-inner">
        <div className="hero-meta">
          <div className="micro">N° 037 · MMXXVI</div>
          <div style={{ textAlign: 'center' }} className="micro">
            Collection Index — Bridal 2026 · {shot.code}
          </div>
          <div className="hero-thumbs">
            {HERO_SHOTS.map((s, i) => (
              <button
                key={s.src}
                type="button"
                onClick={() => setHeroIdx(i)}
                className={i === heroIdx ? 'is-active' : ''}
                aria-label={s.label}
              >
                <img src={s.src} alt="" />
              </button>
            ))}
          </div>
        </div>

        <div className="hero-title-wrap">
          <Reveal className="hero-eyebrow">
            <span className="dot" />
            <span className="label">A Lebanese Maison — Beirut MMII</span>
          </Reveal>
          <Reveal delay={100} as="h1" className="hero-title serif" style={{ fontSize: titleSize }}>
            Haute couture for the bride's <em>defining</em> moment.
          </Reveal>
          <Reveal delay={200} className="hero-actions">
            <button type="button" className="pill pill-light" onClick={onBook}>
              <span>Book a Private Appointment</span>
              <span className="arrow">↗</span>
            </button>
            <a href="#bridal" className="underline-link label" style={{ color: 'rgba(255,255,255,0.92)' }}>
              View Bridal 2026
            </a>
          </Reveal>
        </div>

        <div className="hero-foot">
          <div className="micro" style={{ maxWidth: 360 }}>
            <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, letterSpacing: 0, textTransform: 'none', display: 'block', marginBottom: 4, color: 'rgba(255,255,255,0.9)' }}>
              {shot.label}
            </em>
            <span>Photographed for Bridal 2026 — by appointment, Dubai &amp; Beirut.</span>
          </div>
          <div className="scroll">
            <span>Scroll</span>
            <span className="scroll-line" />
          </div>
          <div className="micro" style={{ textAlign: 'right' }}>
            d3 — Dubai Design District<br/>
            Jisr El Basha — Beirut
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── PEDIGREE STRIP ──────────────────────────────────────────────────────────
const PEDIGREE = [
  { y: 'MMII',  l: 'Maison founded — Beirut' },
  { y: 'MMVI',  l: 'First bridal collection' },
  { y: '·',     l: 'Paris · Italy' },
  { y: 'SS23',  l: 'Dubai Fashion Week — Haute Couture' },
  { y: 'XX+',   l: 'Years of couture practice' },
];
function PedigreeStrip() {
  return (
    <Reveal as="section" className="pedigree" aria-label="Maison pedigree">
      {PEDIGREE.map((p, i) => (
        <React.Fragment key={i}>
          <div className="item">
            <span className="num">{p.y}</span>
            <span className="lbl">{p.l}</span>
          </div>
          {i < PEDIGREE.length - 1 && <span className="sep" />}
        </React.Fragment>
      ))}
    </Reveal>
  );
}

// ─── INTRO ───────────────────────────────────────────────────────────────────
function Intro() {
  return (
    <section className="wrap intro" id="maison-intro">
      <Reveal>
        <div className="label" style={{ color: 'var(--ink-mute)', marginBottom: 28 }}>
          §01 — The Maison
        </div>
        <p className="lead">
          Couture, made to <em>one body, one occasion</em>. Each gown begins with a private fitting at the atelier and is constructed by hand — embroidery, beadwork, drapery — in the Lebanese tradition.
        </p>
      </Reveal>
      <Reveal delay={150}>
        <div className="meta">
          <dl>
            <dt>Practice</dt><dd>Bridal &amp; evening couture</dd>
            <dt>Method</dt><dd>Made-to-measure, by appointment</dd>
            <dt>Ateliers</dt><dd>Dubai Design District · Beirut</dd>
            <dt>Lead time</dt><dd>By consultation</dd>
            <dt>Pricing</dt><dd>Price on request</dd>
          </dl>
        </div>
      </Reveal>
    </section>
  );
}

// ─── BRIDAL LOOKBOOK ─────────────────────────────────────────────────────────
const LOOKS = [
  { src: 'media/media-01-bridal-2026-1.webp', name: 'Constellation', n: '01', col: 'Bridal 2026', cls: 'lb-1' },
  { src: 'media/media-03-bridal-2026-3.webp', name: 'Aurore', n: '02', col: 'Bridal 2026', cls: 'lb-2' },
  { src: 'media/media-10-wedding-2025-1.webp', name: 'Sève', n: '03', col: 'Wedding 2025', cls: 'lb-3' },
  { src: 'media/media-07-wedding-2025-9.webp', name: 'Lys d\'or', n: '04', col: 'Wedding 2025', cls: 'lb-4' },
  { src: 'media/media-11-wedding-2025-5.webp', name: 'Cathédrale', n: '05', col: 'Wedding 2025', cls: 'lb-5' },
  { src: 'media/media-06-wedding-2025-11.webp', name: 'Veilleuse', n: '06', col: 'Wedding 2025', cls: 'lb-6' },
  { src: 'media/media-04-wedding-2025-18.webp', name: 'Fleur', n: '07', col: 'Wedding 2025', cls: 'lb-7' },
];

function Bridal({ onOpenLook }) {
  return (
    <section className="wrap" id="bridal">
      <div className="sec-head">
        <Reveal>
          <div className="num micro">§02 — Bridal</div>
          <h2>Bridal <em>2026</em>, &amp;<br/>the Wedding archive.</h2>
        </Reveal>
        <Reveal className="right" delay={120}>
          <p>
            A study in light. Hand-cut crystal florets and bead-set tulle on a midnight horizon — the latest bridal series, photographed for private viewing at the Dubai and Beirut ateliers.
          </p>
          <p style={{ color: 'var(--ink-mute)', fontSize: 13.5 }}>
            Seven looks of seventeen. Full collection on appointment.
          </p>
        </Reveal>
      </div>

      <div className="lookbook">
        <div className="lookbook-grid">
          {LOOKS.map((l) => (
            <Reveal key={l.n} className={`lb-card ${l.cls}`} delay={Math.min(Number(l.n) * 60, 300)}>
              <button type="button" onClick={() => onOpenLook(l)} style={{ all: 'unset', display:'block', width:'100%', height:'100%', cursor:'default' }}>
                <img src={l.src} alt={`${l.col} — ${l.name}`} loading="lazy" />
                <div className="cap">
                  <span>{l.col} · N° {l.n}</span>
                  <span className="name">{l.name}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── EVENING ─────────────────────────────────────────────────────────────────
function Evening({ onBook }) {
  return (
    <section className="evening" id="evening">
      <div className="wrap">
        <div className="sec-head">
          <Reveal>
            <div className="num micro">§03 — Evening</div>
            <h2>Evening couture, <em>by request</em>.</h2>
          </Reveal>
          <Reveal className="right" delay={120}>
            <p>
              Eveningwear is offered as a private commission. The atelier draws from the same vocabulary as bridal — embroidery, hand-set crystal, structured silhouettes — translated into colour.
            </p>
          </Reveal>
        </div>

        <div className="evening-grid">
          <Reveal className="evening-img">
            <span className="tag">Argent · 2024</span>
            <img src="media/media-09-silver-web-24.webp" alt="Evening — Argent (Silver)" loading="lazy" />
          </Reveal>
          <Reveal delay={150}>
            <p className="lead">
              The "<em>Argent</em>" gown — a study in light, in silver. One of several looks in the evening atelier; the full evening register is shown by appointment.
            </p>
            <p className="body">
              Each evening commission is dressed to occasion: gala, opera, première, or wedding ceremony of state. Fabric is sourced in Lyon, Como and Beirut; embellishment is executed by hand in the Lebanese tradition.
            </p>
            <p className="body" style={{ color: 'var(--ink-mute)', fontSize: 13.5, fontStyle: 'italic' }}>
              A full evening lookbook is shared in confidence at the atelier visit.
            </p>
            <div style={{ display: 'flex', gap: 18, marginTop: 20, flexWrap: 'wrap' }}>
              <button type="button" className="pill" onClick={onBook}>
                <span>Request the Evening Lookbook</span>
                <span className="arrow">↗</span>
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── MAISON (Designer Story) ─────────────────────────────────────────────────
function Maison() {
  return (
    <section className="wrap maison" id="maison">
      <Reveal>
        <div className="label" style={{ color: 'var(--ink-mute)', marginBottom: 28 }}>§04 — The Designer</div>
        <div className="portrait">
          <img src="media/media-08-lamia-f-photo-1-2023.webp" alt="Lamia Abi Nader" />
        </div>
        <div className="signature" style={{ marginTop: 28 }}>— Lamia Abi Nader</div>
        <div className="micro" style={{ color: 'var(--ink-mute)', marginTop: 4 }}>Founder &amp; Couturière</div>
      </Reveal>

      <Reveal delay={120} className="story">
        <h3>
          A Beirut maison, <em>since 2002.</em>
        </h3>
        <p>
          Lamia Abi Nader founded her maison de couture in Beirut in 2002 and presented her first bridal collection there in 2006. The house has since shown internationally in Paris and Italy, and now keeps a second atelier in Dubai's Design District.
        </p>
        <p>
          The practice is, deliberately, small. Each gown is fitted and finished in the atelier by a tight workroom — the way couture houses have always made bridal: privately, slowly, and to the body of one client.
        </p>

        <div className="milestones">
          <div className="row"><span className="yr">2002</span><span className="desc">Maison founded — Beirut.</span></div>
          <div className="row"><span className="yr">2006</span><span className="desc">First bridal collection presented in Beirut.</span></div>
          <div className="row"><span className="yr">·</span><span className="desc">Couture shows in Paris &amp; Italy.</span></div>
          <div className="row"><span className="yr">SS23</span><span className="desc">Haute Couture, Dubai Fashion Week — Arab Fashion Council.</span></div>
          <div className="row"><span className="yr">d3</span><span className="desc">Dubai Design District atelier — by private appointment.</span></div>
        </div>
      </Reveal>
    </section>
  );
}

// ─── PRESS / RUNWAY ──────────────────────────────────────────────────────────
const PRESS = [
  {
    src: 'Dubai Fashion Week — Arab Fashion Council',
    title: 'Lamia Abi Nader — Haute Couture Spring/Summer 2023',
    meta: 'Profile · Runway',
    href: 'https://dubaifashionweek.ae/'
  },
  {
    src: 'FashionNetwork',
    title: 'Spring-Summer 2023 — Dubai Haute Couture, full gallery.',
    meta: 'Gallery · Press',
    href: 'https://www.fashionnetwork.com/'
  },
  {
    src: 'OrientPalms',
    title: 'Couture Spring/Summer 2023 — collection gallery.',
    meta: 'Gallery · Press',
    href: 'https://www.orientpalms.com/'
  },
];

function Press() {
  return (
    <section className="wrap press" id="press">
      <div className="sec-head">
        <Reveal>
          <div className="num micro">§05 — Runway &amp; Press</div>
          <h2>Shown in <em>Beirut</em>, Paris,<br/>and on the Dubai runway.</h2>
        </Reveal>
        <Reveal className="right" delay={120}>
          <p>
            A selection of attributed press and runway records. For full press kit and high-resolution runway imagery, contact the atelier directly.
          </p>
        </Reveal>
      </div>

      <div className="press-grid">
        {PRESS.map((p, i) => (
          <Reveal key={i} delay={i * 100}>
            <a className="press-card" href={p.href} target="_blank" rel="noreferrer">
              <div className="src">{p.src}</div>
              <div className="title">"<em>{p.title}</em>"</div>
              <div className="meta">
                <span>{p.meta}</span>
                <span className="arrow">↗</span>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── CONTACT ─────────────────────────────────────────────────────────────────
function Contact() {
  return (
    <section className="wrap contact" id="contact">
      <Reveal className="city">
        <div className="label" style={{ color: 'var(--ink-mute)' }}>§07 — Atelier I</div>
        <h4>Dubai <span className="nm">— d3</span></h4>
        <div className="addr">
          Building 1B, Office 308B<br/>
          3rd Floor, Dubai Design District (d3)<br/>
          D3 Street, Za'abeel, Dubai, UAE
        </div>
        <div className="links">
          <a href="tel:+971543533337" className="underline-link">+971 54 353 3337</a>
          <a href="mailto:lamiaabinader@hotmail.com" className="underline-link">lamiaabinader@hotmail.com</a>
        </div>
        <div className="note">By private appointment — hours on confirmation.</div>
      </Reveal>

      <Reveal className="city" delay={120}>
        <div className="label" style={{ color: 'var(--ink-mute)' }}>§07 — Atelier II</div>
        <h4>Beirut <span className="nm">— Mkalles</span></h4>
        <div className="addr">
          Jisr El Basha, Mkalles<br/>
          Beirut, Lebanon
        </div>
        <div className="links">
          <a href="tel:+9613941575" className="underline-link">+961 3 941 575</a>
          <a href="mailto:lamiaabinader@hotmail.com" className="underline-link">lamiaabinader@hotmail.com</a>
        </div>
        <div className="note">By private appointment.</div>
      </Reveal>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="wrap foot">
      <div className="copy">
        © 2002–{new Date().getFullYear()} Lamia Abi Nader · Haute Couture.<br/>
        By private appointment · Price on request.
      </div>
      <div className="ftmid">
        <div className="word">Lamia Abi Nader</div>
        <div className="micro" style={{ color: 'var(--ink-mute)', marginTop: 4 }}>Beirut · Dubai</div>
      </div>
      <div className="socials">
        <a href="https://www.instagram.com/lamiaabinader/" target="_blank" rel="noreferrer" className="underline-link">Instagram</a>
        <a href="#contact" className="underline-link">Atelier</a>
      </div>
    </footer>
  );
}

// Expose to global scope so app.jsx can use them
Object.assign(window, {
  Reveal, Nav, Hero, PedigreeStrip, Intro, Bridal, Evening, Maison, Press, Contact, Footer,
  HERO_SHOTS, LOOKS
});