/* Gallery with lightbox, reviews, FAQ. */
function Gallery(props) {
  const { SectionHead, GalleryTile, IconButton } = window.PE;
  const t = props.t;
  const items = window.PE_CONTENT.gallery;
  const [open, setOpen] = React.useState(-1);
  const step = function (d) { setOpen(function (i) { return (i + d + items.length) % items.length; }); };
  return (
    <Section id="gallery">
      <SectionHead align="center" kicker={t.gallery.kicker} title={t.gallery.title} lead={t.gallery.lead} />
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'var(--space-4)'}}>
        {items.map(function (g, i) {
          return <GalleryTile key={g.key} src={g.src} caption={t.galleryCaptions[g.key]} onClick={function () { setOpen(i); }} />;
        })}
      </div>
      {open > -1 ? (
        <div role="dialog" aria-modal="true" onClick={function () { setOpen(-1); }}
          style={{position:'fixed', inset:0, zIndex:90, background:'rgba(26,19,48,.78)', backdropFilter:'blur(6px)', display:'grid', placeItems:'center', padding:'var(--space-8)'}}>
          <img src={items[open].src} alt={t.galleryCaptions[items[open].key]}
            style={{maxWidth:'min(78vw, 900px)', maxHeight:'76vh', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-lift)'}} />
          <div onClick={function (e) { e.stopPropagation(); }} style={{display:'flex', gap:'var(--space-4)', alignItems:'center', marginTop:'var(--space-6)'}}>
            <IconButton tone="white" aria-label="Prev" onClick={function () { step(-1); }}>‹</IconButton>
            <span style={{color:'var(--white)', font:'var(--weight-bold) var(--text-sm)/1 var(--font-ui)'}}>{t.galleryCaptions[items[open].key]}</span>
            <IconButton tone="white" aria-label="Next" onClick={function () { step(1); }}>›</IconButton>
            <IconButton tone="magenta" aria-label={t.cta.close} onClick={function () { setOpen(-1); }}>✕</IconButton>
          </div>
        </div>
      ) : null}
    </Section>
  );
}

function Reviews(props) {
  const { SectionHead, ReviewCard } = window.PE;
  const t = props.t;
  return (
    <Section id="reviews" alt>
      <SectionHead align="center" kicker={t.reviews.kicker} title={t.reviews.title} lead={t.reviews.lead} />
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--gap-card)'}}>
        {t.reviews.items.map(function (r, i) { return <ReviewCard key={i} author={r.a}>{r.q}</ReviewCard>; })}
      </div>
    </Section>
  );
}

function Faq(props) {
  const { SectionHead, FaqItem } = window.PE;
  const t = props.t;
  return (
    <Section id="faq">
      <SectionHead align="center" kicker={t.faq.kicker} title={t.faq.title} />
      <div style={{display:'grid', gap:'var(--space-3)', maxWidth:'var(--container-narrow)', margin:'0 auto'}}>
        {t.faq.items.map(function (q, i) { return <FaqItem key={i} question={q.q} defaultOpen={i === 0}>{q.a}</FaqItem>; })}
      </div>
    </Section>
  );
}

Object.assign(window, { Gallery, Reviews, Faq });