// ─────────────────────────────────────────────────────────────────
// sections.jsx — Nav, Hero (A & B), Story, ThreeActs, Info, Gallery, Messages, Footer
// ─────────────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useMemo } = React;

// ─── helper: i18n t() ───
function makeT(lang) {
  return (key, fallback) => I18N[lang] && I18N[lang][key] || I18N.pt[key] || fallback || key;
}

// ─── helper: hook que carrega fotos da seção via API com fallback ───
function useSectionPhotos(section, fallback) {
  const [photos, setPhotos] = useState(null);
  useEffect(() => {
    let alive = true;
    fetch('/api/photos?section=' + section)
      .then(r => r.ok ? r.json() : { photos: [] })
      .then(({ photos }) => {
        if (!alive) return;
        if (photos && photos.length > 0) setPhotos(photos.map(p => p.url));
        else setPhotos(fallback);
      })
      .catch(() => { if (alive) setPhotos(fallback); });
    return () => { alive = false; };
  }, [section]);
  return photos === null ? fallback : photos;
}

// ─── Nav ───
function Nav({ lang, setLang, t, mode, scrollTo, openRSVP }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  { id: 'info', label: t('nav.info') },
  { id: 'rsvp', label: t('nav.rsvp') },
  { id: 'gifts', label: t('nav.gifts') },
  { id: 'gallery', label: t('nav.gallery') },
  { id: 'messages', label: t('nav.messages') },
  { id: 'faq', label: 'FAQ' }];


  return (
    <>
      <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
        <a className="nav__brand" onClick={() => scrollTo('home')}>
          <span className="nav__brand-mark"><NavMark size={44} variant="dourado" /></span>
        </a>
        <nav className="nav__links">
          {links.map((l) =>
          <a key={l.id} onClick={() => scrollTo(l.id)}>{l.label}</a>
          )}
        </nav>
        <div className="nav__right">
          <div className="lang-toggle" role="group" aria-label="language">
            <button className={lang === 'pt' ? 'is-active' : ''} onClick={() => setLang('pt')}>PT</button>
            <button className={lang === 'en' ? 'is-active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="nav__burger" onClick={() => setMenuOpen((o) => !o)} aria-label="menu">
            <span /><span /><span />
          </button>
        </div>
      </header>
      <div className={`menu-sheet ${menuOpen ? 'is-open' : ''}`} onClick={() => setMenuOpen(false)}>
        {links.map((l) =>
        <a key={l.id} onClick={() => {scrollTo(l.id);setMenuOpen(false);}}>{l.label}</a>
        )}
      </div>
    </>);

}

// ─── Countdown hook ───
const WEDDING_DATE = new Date('2027-03-27T16:00:00-03:00').getTime();
function useCountdown() {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const i = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(i);
  }, []);
  const diff = Math.max(0, WEDDING_DATE - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor(diff % 86400000 / 3600000);
  const m = Math.floor(diff % 3600000 / 60000);
  const s = Math.floor(diff % 60000 / 1000);
  return { d, h, m, s };
}

function Countdown({ t, ink }) {
  const { d, h, m, s } = useCountdown();
  return (
    <div className={`countdown ${ink ? 'countdown--ink' : ''}`}>
      <div className="countdown__cell"><div className="n">{String(d).padStart(3, '0')}</div><span className="l">{t('hero.days')}</span></div>
      <div className="countdown__cell"><div className="n">{String(h).padStart(2, '0')}</div><span className="l">{t('hero.hours')}</span></div>
      <div className="countdown__cell"><div className="n">{String(m).padStart(2, '0')}</div><span className="l">{t('hero.mins')}</span></div>
      <div className="countdown__cell"><div className="n">{String(s).padStart(2, '0')}</div><span className="l">{t('hero.secs')}</span></div>
    </div>);

}

// ─── HERO Variant A — full-bleed editorial ; logo is the hero ; wordmark small ───
function HeroA({ t }) {
  const photos = useSectionPhotos('hero', ['assets/photos/01-staircase.jpg']);
  const bg = photos[0] || 'assets/photos/01-staircase.jpg';
  return (
    <section className="hero" id="home" data-screen-label="01 Home">
      <div className="hero__bg" style={{ backgroundImage: `url(${bg})` }} />
      <div className="hero__overlay" />
      <div className="hero__corner hero__corner--bl">N° 01 · Save the date</div>
      <div className="hero__corner hero__corner--br">27 · 03 · 2027</div>

      <div className="hero__inner">
        <div className="hero__stack">
          <div className="hero__big-monogram" style={{ width: "300px" }}><Monogram variant="dourado" size={420} /></div>
          <div className="hero__wordmark">Aura<span className="amp" style={{ fontFamily: "Cinzel" }}>&amp;</span> Marcel</div>
          <div className="hero__meta">
            <span>{t('hero.date')}</span><span className="dot" />
            <span>{t('hero.location')}</span><span className="dot" />
            <span>Curitiba · Brasil</span>
          </div>
          <Countdown t={t} />
        </div>
      </div>
    </section>);

}

// ─── HERO Variant B — editorial split (invite-style) ───
function HeroB({ t }) {
  const photos = useSectionPhotos('hero', ['assets/photos/05-rooftop.jpg']);
  const bg = photos[photos.length > 1 ? 1 : 0] || 'assets/photos/05-rooftop.jpg';
  return (
    <section className="hero-b" id="home" data-screen-label="01 Home">
      <div className="hero-b__copy">
        <div style={{ marginBottom: 36 }}>
          <Monogram variant="petroleo" size={120} />
        </div>
        <div className="hero-b__eyebrow">{t('hero.eyebrow')} · Save the date</div>
        <h1 className="hero-b__title">Aura<span className="amp">&amp;</span>Marcel</h1>
        <p className="hero-b__lede">{t('hero.lede')}</p>
        <div className="hero-b__details">
          <div className="hero-b__detail">
            <label>Cerimônia · 27.03.2027</label>
            <p>16h00 · Capela</p>
          </div>
          <div className="hero-b__detail">
            <label>Recepção</label>
            <p>Suryaa Hotel</p>
          </div>
          <div className="hero-b__detail">
            <label>Traje</label>
            <p>Social completo</p>
          </div>
        </div>
        <div style={{ marginTop: 56 }}>
          <Countdown t={t} ink />
        </div>
      </div>
      <div className="hero-b__photo" style={{ backgroundImage: `url(${bg})` }}>
        <div className="hero-b__signature display" style={{ fontSize: 10, letterSpacing: '0.36em' }}>Ivory · After · Dark</div>
      </div>
    </section>);

}

// ─── STORY (não renderizado atualmente; mantido caso seja reativado) ───
function Story({ t }) {
  return (
    <section className="section" id="story" data-screen-label="02 O Casal">
      <div className="container">
        <div className="story">
          <div className="story__photo">
            <img src="assets/photos/04-rings.jpg" alt="Aura e Marcel" />
          </div>
          <div className="story__text">
            <div className="sec-head sec-head--left" style={{ marginBottom: 36 }}>
              <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('story.title') }} />
            </div>
            <p>{t('story.p1')}</p>
            <p>{t('story.p2')}</p>
            <div className="story__sig">{t('story.sig')}</div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── THREE ACTS ───
function ThreeActs({ t }) {
  return (
    <section className="section" id="program" style={{ background: 'var(--surface)' }} data-screen-label="03 Programação">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('program.title') }} />
          <p className="sec-head__sub">{t('program.sub')}</p>
        </div>

        <div className="acts">
          <article className="act">
            <span className="act__num">i</span>
            <h3 className="act__name">{t('act1.name')}</h3>
            <span className="act__time">{t('act1.time')} · 27.03.2027</span>
            <p className="act__desc">{t('act1.desc')}</p>
            <ul>
              <li>Capela Suryaa · ala leste</li>
              <li>Flores brancas · orquídeas e callas</li>
              <li>Música ao vivo · cordas</li>
            </ul>
          </article>
          <article className="act">
            <span className="act__num">ii</span>
            <h3 className="act__name">{t('act2.name')}</h3>
            <span className="act__time">{t('act2.time')} · 27.03.2027</span>
            <p className="act__desc">{t('act2.desc')}</p>
            <ul>
              <li>Restaurante do hotel · sala principal</li>
              <li>Piano ao vivo · jazz contido</li>
              <li>Antepastos refinados · coquetel volante</li>
            </ul>
          </article>
          <article className="act act--noite">
            <span className="act__num" style={{ color: 'var(--ouro-soft)' }}>iii</span>
            <h3 className="act__name">{t('act3.name')}</h3>
            <span className="act__time">{t('act3.time')} · 27.03.2027</span>
            <p className="act__desc">{t('act3.desc')}</p>
            <ul>
              <li>Rooftop · 12° andar</li>
              <li>Bar · open de coquetel</li>
              <li>DJ · pista a partir das 22h</li>
            </ul>
          </article>
        </div>
      </div>
    </section>);

}

// ─── INFO (cards) ───
const INFO_ICON = {
  hotel: <path d="M2 22h28V8H2zM2 14h28M8 22v-4h6v4M22 22v-4h2v4M8 11h2M14 11h2M20 11h2" />,
  dress: <path d="M11 4h10l3 6-2 18H10L8 10zM12 4l4 4 4-4M14 12h4" />,
  parking: <path d="M16 2C9.4 2 4 7.4 4 14c0 8 12 16 12 16s12-8 12-16C28 7.4 22.6 2 16 2zM12 8h7c2.5 0 4 1.6 4 4s-1.5 4-4 4h-4v4h-3zm3 3v2h4c.8 0 1-.4 1-1s-.2-1-1-1z" />,
  kids: <circle cx="16" cy="10" r="4" />,
  beauty: <path d="M16 4c-1 6-6 6-6 12 0 4 3 8 6 12 3-4 6-8 6-12 0-6-5-6-6-12z" />,
  stay: <path d="M3 26h26M3 22V12l13-8 13 8v10M9 18h14M9 14h14M12 26v-4h2v4M18 26v-4h2v4" />
};

function InfoIcon({ kind }) {
  return (
    <svg viewBox="0 0 32 32" width={32} height={32} fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      {INFO_ICON[kind] || INFO_ICON.hotel}
    </svg>);

}

const INFO_FALLBACK = {
  pt: [
    { icon: 'stay', title: 'Hospedagem no Suryaa', body: 'Bloqueamos um lote de apartamentos com tarifa especial.', detail: 'Tarifa A&M · 26 a 28.03', cta: 'Solicitar disponibilidade' }
  ],
  en: [
    { icon: 'stay', title: 'Stay at Suryaa', body: 'We have blocked a wing of rooms with special rate.', detail: 'A&M rate · 26–28 March', cta: 'Request availability' }
  ]
};

function Info({ t, lang }) {
  const [cards, setCards] = useState(null);

  useEffect(() => {
    let alive = true;
    fetch('/api/content?kind=info')
      .then(r => r.ok ? r.json() : { items: [] })
      .then(({ items }) => {
        if (!alive) return;
        if (items && items.length > 0) {
          const mapped = items.map(it => {
            const d = (lang === 'en' && it.data_en) ? it.data_en : it.data_pt;
            return { icon: d.icon, title: d.title, body: d.body, detail: d.detail, cta: d.cta };
          });
          setCards(mapped);
        } else {
          setCards(INFO_FALLBACK[lang] || INFO_FALLBACK.pt);
        }
      })
      .catch(() => { if (alive) setCards(INFO_FALLBACK[lang] || INFO_FALLBACK.pt); });
    return () => { alive = false; };
  }, [lang]);

  const list = cards || INFO_FALLBACK[lang] || INFO_FALLBACK.pt;


  return (
    <section className="section" id="info" data-screen-label="02 Informações">
      <div className="container">
        <div className="sec-head">
          <span className="sec-head__num">{t('info.eyebrow')}</span>
          <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('info.title') }} />
          <p className="sec-head__sub">{t('info.sub')}</p>
        </div>
        <div className="info-grid">
          {list.map((c, i) =>
          <article key={i} className="info-card">
              <span className="info-card__icon"><InfoIcon kind={c.icon} /></span>
              <h3 className="info-card__title">{c.title}</h3>
              <p className="info-card__body">{c.body}</p>
              <span className="info-card__detail">{c.detail}</span>
              <a className="info-card__cta">{c.cta} <span>→</span></a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─── GALLERY ───
const GALLERY_CLASSES = ['gallery__a','gallery__b','gallery__c','gallery__d','gallery__e','gallery__f','gallery__g'];
const GALLERY_FALLBACK = [
  'assets/photos/01-staircase.jpg','assets/photos/02-bar.jpg','assets/photos/03-luggage.jpg',
  'assets/photos/04-rings.jpg','assets/photos/05-rooftop.jpg','assets/photos/06-balcony.jpg',
  'assets/photos/07-walking.jpg'
];

function Gallery({ t }) {
  const sources = useSectionPhotos('gallery', GALLERY_FALLBACK);
  const photos = sources.map((src, i) => ({ src, cls: GALLERY_CLASSES[i % GALLERY_CLASSES.length] }));

  return (
    <section className="section" id="gallery" style={{ background: 'var(--surface)' }} data-screen-label="05 Galeria">
      <div className="container">
        <div className="sec-head">
          <span className="sec-head__num">{t('gallery.eyebrow')}</span>
          <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('gallery.title') }} />
          <p className="sec-head__sub">{t('gallery.sub')}</p>
        </div>
        <div className="gallery">
          {photos.map((p, i) =>
          <div key={i} className={`gallery__item ${p.cls}`} style={{ backgroundImage: `url(${p.src})` }} />
          )}
        </div>
      </div>
    </section>);

}

// ─── MESSAGES ───
function Messages({ t }) {
  const [messages, setMessages] = useState([]);
  const [form, setForm] = useState({ name: '', from: '', text: '' });
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    let alive = true;
    API.messages()
      .then(({ messages }) => { if (alive) setMessages(messages || []); })
      .catch(() => { if (alive) setMessages([]); });
    return () => { alive = false; };
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.text) return;
    setError('');
    try {
      await API.postMessage({ name: form.name, from: form.from, text: form.text });
      setForm({ name: '', from: '', text: '' });
      setSent(true);
      setTimeout(() => setSent(false), 5000);
    } catch (err) {
      setError(err.message || 'erro');
    }
  };

  return (
    <section className="section" id="messages" data-screen-label="06 Recados">
      <div className="container">
        <div className="sec-head">
          <span className="sec-head__num">{t('msg.eyebrow')}</span>
          <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('msg.title') }} />
          <p className="sec-head__sub">{t('msg.sub')}</p>
        </div>

        <div className="messages-wall">
          {messages.slice(0, 6).map((m, i) =>
          <article key={i} className="msg-card">
              <p>{m.text}</p>
              <cite>{m.name} · <span style={{ fontStyle: 'italic', fontFamily: 'var(--serif)', letterSpacing: 0, textTransform: 'none', color: 'var(--muted)' }}>{m.from}</span></cite>
            </article>
          )}
        </div>

        <form className="msg-form" onSubmit={submit}>
          <div className="field">
            <label>{t('msg.name')}</label>
            <input type="text" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Seu nome completo" />
          </div>
          <div className="field">
            <label>{t('msg.from')}</label>
            <input type="text" value={form.from} onChange={(e) => setForm((f) => ({ ...f, from: e.target.value }))} placeholder="Cidade, estado" />
          </div>
          <div className="field field--full">
            <label>{t('msg.body')}</label>
            <textarea rows="3" value={form.text} onChange={(e) => setForm((f) => ({ ...f, text: e.target.value }))} placeholder="Escreva aqui o seu recado..." />
          </div>
          <div className="submit">
            <button type="submit" className="btn btn--gold btn--sm">
              {sent ? '✓ Enviado' : t('msg.send')}
            </button>
          </div>
          {sent && (
            <p style={{ gridColumn: '1 / -1', fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--muted)', fontSize: 14 }}>
              {t('msg.pending')}
            </p>
          )}
          {error && (
            <p style={{ gridColumn: '1 / -1', color: '#c33', fontSize: 14 }}>{error}</p>
          )}
        </form>
      </div>
    </section>);

}

// ─── FOOTER ───
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer__mark"><Monogram variant="dourado" size={200} /></div>
      <div className="footer__date">27 · 03 · 2027 · Suryaa Hotel Pinhais</div>
      <div className="footer__line" />
      <div className="footer__credit">{t('footer.credit')}</div>
    </footer>);

}

Object.assign(window, { Nav, HeroA, HeroB, Story, ThreeActs, Info, Gallery, Messages, Footer, makeT });