// FRANCIS - sections (mobile-first)
const { useState, useEffect, useRef } = React;

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    el.querySelectorAll('[data-reveal]').forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

function SitePhoto({ src, alt, className = '', loading = 'lazy', fit = 'cover', position }) {
  const style = { objectFit: fit };
  if (position) style.objectPosition = position;

  return (
    <img
      className={`site-photo ${className}`}
      src={src}
      alt={alt}
      loading={loading}
      decoding="async"
      style={style}
    />
  );
}

// ============ AGE GATE ============
function AgeGate({ t, onAccept }) {
  const [denied, setDenied] = useState(false);
  return (
    <div className={`gate ${denied ? 'denied' : ''}`} role="dialog" aria-modal="true" aria-labelledby="gate-title">
      <div className="gate-inner fade-up">
        <div className="gate-mark">
          <span className="line" aria-hidden="true"></span>
          {t.gate.mark}
          <span className="line" aria-hidden="true"></span>
        </div>
        <h1 id="gate-title">{denied ? '' : t.gate.title}</h1>
        <p>{denied ? t.gate.denied : t.gate.body}</p>
        {!denied && (
          <div className="gate-actions">
            <button className="btn btn-primary btn-block" onClick={onAccept} autoFocus>{t.gate.yes}</button>
            <button className="btn btn-ghost btn-block" onClick={() => setDenied(true)}>{t.gate.no}</button>
          </div>
        )}
        <div className="gate-fine">- {t.gate.fine} -</div>
      </div>
    </div>
  );
}

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

  useEffect(() => {
    if (!open) return;
    function onKey(e) { if (e.key === 'Escape') setOpen(false); }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  function go(e, href) {
    e.preventDefault();
    setOpen(false);
    const el = document.querySelector(href);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  }

  const links = [
    { href: '#story', label: t.nav.story },
    { href: '#tasting', label: t.nav.tasting },
    { href: '#serve', label: t.nav.serve },
    { href: '#origin', label: t.nav.origin },
    { href: '#enquiry', label: t.nav.enquiry },
  ];

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#top" className="nav-brand" onClick={(e) => go(e, '#top')}>
          FRANCIS<span className="dot"> ·</span>
        </a>
        <div className="nav-links" aria-hidden="false">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)}>{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <div className="lang-switch" role="group" aria-label="Language">
            <button
              className={lang === 'pt' ? 'active' : ''}
              onClick={() => setLang('pt')}
              aria-label="Português"
              aria-pressed={lang === 'pt'}
            >PT</button>
            <span className="sep" aria-hidden="true">/</span>
            <button
              className={lang === 'en' ? 'active' : ''}
              onClick={() => setLang('en')}
              aria-label="English"
              aria-pressed={lang === 'en'}
            >EN</button>
          </div>
          <button
            className="nav-menu-btn"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="nav-sheet"
            aria-label="Menu"
          >
            <span className="ic" aria-hidden="true"><span></span><span></span><span></span></span>
          </button>
        </div>
      </nav>

      <div
        className={`nav-scrim ${open ? 'open' : ''}`}
        onClick={() => setOpen(false)}
        aria-hidden="true"
      ></div>
      <aside
        id="nav-sheet"
        className={`nav-sheet ${open ? 'open' : ''}`}
        aria-hidden={!open}
      >
        {links.map((l, i) => (
          <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)}>
            <span>{l.label}</span>
            <span className="num">0{i + 1}</span>
          </a>
        ))}
        <div className="nav-sheet-foot">{t.gate.fine}</div>
      </aside>
    </React.Fragment>
  );
}

// ============ HERO ============
function Hero({ t }) {
  function go(e, href) {
    e.preventDefault();
    const el = document.querySelector(href);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  }
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-text">
          <div className="hero-eyebrow fade-up">
            <span className="rule" aria-hidden="true"></span>
            <span className="eyebrow">{t.hero.eyebrow}</span>
          </div>
          <h1 className="francis fade-up" style={{ animationDelay: '0.05s' }}>FRANCIS</h1>
          <div className="sub fade-up" style={{ animationDelay: '0.15s' }}>{t.hero.sub}</div>
          <div className="support fade-up" style={{ animationDelay: '0.25s' }}>{t.hero.support}</div>
          <div className="hero-actions fade-up" style={{ animationDelay: '0.35s' }}>
            <a href="#enquiry" className="btn btn-primary btn-arrow btn-block" onClick={(e) => go(e, '#enquiry')}>{t.hero.cta1}</a>
            <a href="#story" className="btn btn-ghost btn-block" onClick={(e) => go(e, '#story')}>{t.hero.cta2}</a>
          </div>
        </div>
        <div className="hero-stage">
          <div className="bottle-wrap fade-up" style={{ animationDelay: '0.1s' }}>
            <div className="bottle-glow" aria-hidden="true"></div>
            <div className="bottle-media">
              <div className="bp-frame">
                <SitePhoto
                  src="assets/francis-01-bottle.jpg"
                  alt="FRANCIS Atlantic Chardonnay Gin bottle"
                  className="hero-product-photo"
                  loading="eager"
                  fit="contain"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <a href="#story" className="hero-peek" onClick={(e) => go(e, '#story')} aria-label={`Next: ${t.story.eyebrow}`}>
        <div>
          <div className="peek-eyebrow">{t.hero.peekLabel} · {t.story.eyebrow}</div>
          <div className="peek-title">{t.hero.peekTitle}</div>
        </div>
        <span className="arrow" aria-hidden="true"><span className="down">↓</span></span>
      </a>
    </section>
  );
}

// ============ STORY ============
function Story({ t }) {
  const ref = useReveal();
  return (
    <section className="section story-section" id="story" ref={ref}>
      <div className="story">
        <div className="story-image" data-reveal>
          <SitePhoto
            src="assets/francis-02-vineyard.jpg"
            alt="Green Chardonnay grapes growing among sunlit vine leaves"
            className="story-photo"
            position="50% 48%"
          />
        </div>
        <div data-reveal>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t.story.eyebrow}</div>
          <h2 className="section-title">
            {t.story.title[0]}<br />
            {t.story.title[1]}<em>{t.story.title[2]}</em>
          </h2>
          <p className="section-body">{t.story.body}</p>
          <div className="rope-divider" style={{ justifyContent: 'flex-start', marginTop: 28, marginLeft: 0 }}>
            <span className="line"></span>
            <span className="knot"></span>
            <span className="line"></span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ TASTING ============
function Tasting({ t }) {
  const ref = useReveal();
  return (
    <section className="section section-narrow" id="tasting" ref={ref}>
      <div className="tasting">
        <div data-reveal>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t.tasting.eyebrow}</div>
          <h2 className="section-title">
            {t.tasting.title[0]}<em>{t.tasting.title[1]}</em>
          </h2>
          <p className="section-body">{t.tasting.lead}</p>
        </div>
        <ul className="notes-list" data-reveal>
          {t.tasting.notes.map((note, i) => (
            <li className="note" key={i}>
              <span className="note-num">0{i + 1}</span>
              <span className="note-text">{note}</span>
              <span className="note-line" aria-hidden="true"></span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============ PERFECT SERVE ============
function Serve({ t }) {
  const ref = useReveal();
  return (
    <section className="section" id="serve" ref={ref}>
      <div className="serve">
        <div className="serve-image" data-reveal>
          <SitePhoto
            src="assets/francis-03-ice-grapes.jpg"
            alt="Glowing ice block with grapes and vine leaves by running water"
            className="serve-photo"
            position="50% 48%"
          />
        </div>
        <div data-reveal>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t.serve.eyebrow}</div>
          <h2 className="section-title">
            {t.serve.title[0]}<em>{t.serve.title[1]}</em><br />{t.serve.title[2]}
          </h2>
          <p className="section-body">{t.serve.body}</p>
          <div className="serve-recipe">
            {t.serve.recipe.map((r, i) => (
              <div className="recipe-item" key={i}>
                <div className="label">{r.label}</div>
                <div className="value">{r.value}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ BOTTLE DETAIL ============
function Detail({ t }) {
  const ref = useReveal();
  return (
    <section className="section" id="detail" ref={ref}>
      <div className="detail">
        <div className="detail-image" data-reveal>
          <SitePhoto
            src="assets/francis-04-pour.jpg"
            alt="FRANCIS gin being poured into a glass"
            className="detail-photo"
            position="58% 50%"
          />
        </div>
        <div data-reveal>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t.detail.eyebrow}</div>
          <h2 className="section-title">
            {t.detail.title[0]}<em>{t.detail.title[1]}</em>
          </h2>
          <p className="section-body">{t.detail.body}</p>
          <div className="detail-facts">
            {t.detail.facts.map((f, i) => (
              <div className="fact" key={i}>
                <div className="k">{f.k}</div>
                <div className="v">{f.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ ORIGIN ============
function Origin({ t }) {
  const ref = useReveal();
  return (
    <section className="origin" id="origin" ref={ref}>
      <div className="inner" data-reveal>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{t.origin.eyebrow}</div>
        <h2 className="section-title">
          {t.origin.title[0]}<em>{t.origin.title[1]}</em>{t.origin.title[2]}
        </h2>
        <p className="section-body" style={{ maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>{t.origin.body}</p>
        <div className="coordinates">
          {t.origin.coords.map((c, i) => (
            <div key={i}>
              <span className="label">{c.label}</span>
              <span className="val">{c.value}</span>
            </div>
          ))}
        </div>
        <div className="rope-divider" style={{ marginTop: 36 }}>
          <span className="line"></span>
          <span className="knot"></span>
          <span className="line"></span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, SitePhoto, AgeGate, Nav, Hero, Story, Tasting, Serve, Detail, Origin });