// Pagine del sito Grey Loft
const { useState: glUseState, useEffect: glUseEffect } = React;

function GLWaLink(text) {
  return `https://wa.me/${GL_CONTACT.wa}?text=${encodeURIComponent(text || '')}`;
}

function GLKicker({ children, n }) {
  return <div className="gl-kicker">{n && <span className="gl-kicker-n">{n}</span>}{children}</div>;
}

function GLReveal({ children, className = '', as = 'div', ...rest }) {
  const ref = React.useRef(null);
  const [on, setOn] = glUseState(false);
  glUseEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.12 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={`gl-reveal ${on ? 'is-on' : ''} ${className}`} {...rest}>{children}</Tag>;
}

/* ---------------- HOME ---------------- */
function GLHero({ t, layout, go, copy }) {
  const title = copy.heroTitle || t.heroTitle;
  const sub = copy.heroSub || t.heroSub;
  if (layout === 'split') {
    return (
      <section className="gl-hero gl-hero--split" data-screen-label="Home hero">
        <div className="gl-hero-split-text">
          <GLKicker>{t.heroKicker}</GLKicker>
          <h1 className="gl-display">{title}</h1>
          <p className="gl-lead">{sub}</p>
          <div className="gl-row">
            <a className="gl-btn" href={GLWaLink('')} target="_blank" rel="noreferrer">{t.cta}</a>
            <button className="gl-btn gl-btn--ghost" onClick={() => go('loft')}>{t.seeLoft}</button>
          </div>
        </div>
        <div className="gl-hero-split-img"><img src="img/living-scala.jpg" alt="" /></div>
      </section>
    );
  }
  if (layout === 'type') {
    return (
      <section className="gl-hero gl-hero--type" data-screen-label="Home hero">
        <div className="gl-wrap">
          <div className="gl-hero-type-top">
            <GLKicker>{t.heroKicker}</GLKicker>
            <p className="gl-lead">{sub}</p>
          </div>
          <h1 className="gl-mega">{title}</h1>
        </div>
        <div className="gl-hero-type-img"><img src="img/living-scala.jpg" alt="" /></div>
      </section>
    );
  }
  return (
    <section className="gl-hero gl-hero--full" data-screen-label="Home hero">
      <img className="gl-hero-bg" src="img/living-scala.jpg" alt="" />
      <div className="gl-hero-shade" />
      <div className="gl-wrap gl-hero-full-inner">
        <GLKicker>{t.heroKicker}</GLKicker>
        <h1 className="gl-mega">{title}</h1>
        <div className="gl-hero-full-foot">
          <p className="gl-lead">{sub}</p>
          <a className="gl-btn gl-btn--light" href={GLWaLink('')} target="_blank" rel="noreferrer">{t.cta}</a>
        </div>
      </div>
    </section>
  );
}

function GLHome({ t, go, heroLayout, copy }) {
  return (
    <div data-screen-label="01 Home">
      <GLHero t={t} layout={heroLayout} go={go} copy={copy} />

      <section className="gl-section gl-wrap gl-intro">
        <GLKicker n="01">{t.introKicker}</GLKicker>
        <GLReveal as="p" className="gl-statement">{copy.intro || t.intro}</GLReveal>
        <div className="gl-facts">
          {t.facts.map(([n, l], i) => (
            <GLReveal key={i} className="gl-fact" style={{ transitionDelay: i * 80 + 'ms' }}>
              <span className="gl-fact-n">{n}</span><span className="gl-fact-l">{l}</span>
            </GLReveal>
          ))}
        </div>
      </section>

      <section className="gl-section gl-wrap">
        <div className="gl-sec-head">
          <GLKicker n="02">{t.spacesKicker}</GLKicker>
          <button className="gl-link" onClick={() => go('loft')}>{t.seeLoft} →</button>
        </div>
        <div className="gl-spaces">
          {t.spaces.map((s, i) => (
            <GLReveal key={s.k} className="gl-space" style={{ transitionDelay: i * 100 + 'ms' }}>
              <button className="gl-space-img" onClick={() => go('gallery')}><img src={s.img} alt={s.t} /></button>
              <div className="gl-space-n">0{i + 1}</div>
              <h3 className="gl-h3">{s.t}</h3>
              <p className="gl-body">{s.d}</p>
            </GLReveal>
          ))}
        </div>
      </section>

      <section className="gl-night">
        <img src="img/cortile.jpg" alt="" />
        <div className="gl-night-shade" />
        <GLReveal as="blockquote" className="gl-night-q gl-wrap">{t.nightQuote}</GLReveal>
      </section>

      <section className="gl-section gl-wrap gl-around-teaser">
        <div>
          <GLKicker n="03">{t.aroundKicker}</GLKicker>
          <h2 className="gl-h2">{t.aroundTitle}</h2>
          <button className="gl-btn gl-btn--ghost" onClick={() => go('around')}>{t.aroundCta}</button>
        </div>
        <ol className="gl-mini-list">
          {t.places.slice(0, 4).map((p, i) => (
            <li key={i}><span>{p.t}</span><span className="gl-mono">{p.dist}</span></li>
          ))}
        </ol>
      </section>

      <section className="gl-mosaic gl-wrap">
        {['img/cucina-calda.jpg', 'img/bagno-chiaro.jpg', 'img/camera-tv.jpg', 'img/living-vista.jpg'].map((s, i) => (
          <button key={s} className={`gl-mosaic-i gl-mosaic-i${i}`} onClick={() => go('gallery')}><img src={s} alt="" /></button>
        ))}
        <button className="gl-mosaic-more gl-link" onClick={() => go('gallery')}>{t.seeAll} →</button>
      </section>

      <GLContactBand t={t} />
    </div>
  );
}

function GLContactBand({ t }) {
  return (
    <section className="gl-band">
      <div className="gl-wrap gl-band-inner">
        <div>
          <h2 className="gl-h2">{t.contactBandTitle}</h2>
          <p className="gl-body">{t.contactBandSub}</p>
        </div>
        <div className="gl-band-actions">
          <a className="gl-btn gl-btn--light" href={GLWaLink('')} target="_blank" rel="noreferrer">{t.cta}</a>
          <a className="gl-band-line" href={`tel:${GL_CONTACT.phone.replace(/\s/g, '')}`}>{GL_CONTACT.phone}</a>
          <a className="gl-band-line" href={`mailto:${GL_CONTACT.email}`}>{GL_CONTACT.email}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- LOFT ---------------- */
function GLLoft({ t, go }) {
  return (
    <div data-screen-label="02 Il loft">
      <section className="gl-page-head gl-wrap">
        <GLKicker>{t.loftKicker}</GLKicker>
        <h1 className="gl-display">{t.loftTitle}</h1>
        <p className="gl-lead gl-measure">{t.loftLead}</p>
      </section>
      <div className="gl-wide-img"><img src="img/living-vista.jpg" alt="" /></div>

      {t.floors.map((f, i) => (
        <section key={f.n} className={`gl-section gl-wrap gl-floor ${i % 2 ? 'gl-floor--rev' : ''}`}>
          <GLReveal className="gl-floor-img"><img src={f.img} alt={f.t} /></GLReveal>
          <div className="gl-floor-text">
            <div className="gl-floor-n">{f.n}</div>
            <h2 className="gl-h2">{f.t}</h2>
            <ul className="gl-list">{f.items.map((x) => <li key={x}>{x}</li>)}</ul>
          </div>
        </section>
      ))}

      <section className="gl-section gl-wrap">
        <GLKicker>{t.amenitiesTitle}</GLKicker>
        <div className="gl-amen">
          {t.amenities.map((a) => <div key={a} className="gl-amen-i">{a}</div>)}
        </div>
      </section>

      <section className="gl-strip">
        {['img/bagno-scuro.jpg', 'img/cucina-luce.jpg', 'img/camera-tv.jpg'].map((s) => <img key={s} src={s} alt="" />)}
      </section>
      <div className="gl-wrap gl-center-cta">
        <button className="gl-btn gl-btn--ghost" onClick={() => go('gallery')}>{t.seeAll} →</button>
      </div>
      <GLContactBand t={t} />
    </div>
  );
}

/* ---------------- GALLERY ---------------- */
function GLGallery({ t, lang }) {
  const [cat, setCat] = glUseState('all');
  const [open, setOpen] = glUseState(-1);
  const list = GL_PHOTOS.filter((p) => cat === 'all' || p.cat === cat);
  glUseEffect(() => {
    if (open < 0) return;
    const k = (e) => {
      if (e.key === 'Escape') setOpen(-1);
      if (e.key === 'ArrowRight') setOpen((o) => (o + 1) % list.length);
      if (e.key === 'ArrowLeft') setOpen((o) => (o - 1 + list.length) % list.length);
    };
    window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k);
  }, [open, list.length]);
  return (
    <div data-screen-label="03 Foto">
      <section className="gl-page-head gl-wrap">
        <GLKicker>{t.galleryKicker}</GLKicker>
        <h1 className="gl-display">{t.galleryTitle}</h1>
        <div className="gl-chips">
          {Object.entries(t.cats).map(([k, l]) => (
            <button key={k} className={`gl-chip ${cat === k ? 'is-on' : ''}`} onClick={() => setCat(k)}>{l}</button>
          ))}
        </div>
      </section>
      <section className="gl-wrap gl-gallery">
        {list.map((p, i) => (
          <button key={p.src} className="gl-g-item" onClick={() => setOpen(i)}>
            <img src={p.src} alt={p[lang]} loading="lazy" />
            <span className="gl-g-cap">{p[lang]}</span>
          </button>
        ))}
      </section>
      {open >= 0 && list[open] && (
        <div className="gl-lightbox" onClick={() => setOpen(-1)}>
          <img src={list[open].src} alt="" onClick={(e) => e.stopPropagation()} />
          <div className="gl-lb-bar" onClick={(e) => e.stopPropagation()}>
            <button onClick={() => setOpen((o) => (o - 1 + list.length) % list.length)}>←</button>
            <span>{String(open + 1).padStart(2, '0')} / {String(list.length).padStart(2, '0')} — {list[open][lang]}</span>
            <button onClick={() => setOpen((o) => (o + 1) % list.length)}>→</button>
            <button onClick={() => setOpen(-1)}>✕</button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- AROUND ---------------- */
function GLAround({ t }) {
  return (
    <div data-screen-label="04 Dintorni">
      <section className="gl-page-head gl-wrap">
        <GLKicker>{t.aroundKicker}</GLKicker>
        <h1 className="gl-display">{t.aroundPageTitle}</h1>
        <p className="gl-lead gl-measure">{t.aroundLead}</p>
      </section>
      <section className="gl-wrap gl-places">
        {t.places.map((p, i) => (
          <GLReveal key={p.t} className="gl-place" style={{ transitionDelay: (i % 3) * 80 + 'ms' }}>
            <div className="gl-place-img"><img src={p.img} alt={p.t} loading="lazy" /></div>
            <div className="gl-place-meta"><span className="gl-mono">{String(i + 1).padStart(2, '0')}</span><span className="gl-mono">{p.dist}</span></div>
            <h3 className="gl-h3">{p.t}</h3>
            <p className="gl-body">{p.d}</p>
          </GLReveal>
        ))}
      </section>
      <section className="gl-section gl-wrap gl-tips">
        <GLKicker>{t.tipsTitle}</GLKicker>
        <ol>
          {t.tips.map((x, i) => <li key={i}><span className="gl-mono">{String(i + 1).padStart(2, '0')}</span>{x}</li>)}
        </ol>
      </section>
      <GLContactBand t={t} />
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function GLAbout({ t, go }) {
  return (
    <div data-screen-label="05 Chi siamo">
      <section className="gl-page-head gl-wrap">
        <GLKicker>{t.aboutKicker}</GLKicker>
      </section>
      <section className="gl-wrap gl-about">
        <div className="gl-about-ph"><img src="img/massimo-2.jpg" alt="Massimo" /></div>
        <div>
          <h1 className="gl-display gl-display--sm">{t.aboutTitle}</h1>
          {t.aboutBody.map((p, i) => <p key={i} className="gl-lead">{p}</p>)}
          <div className="gl-row">
            <a className="gl-btn" href={GLWaLink('')} target="_blank" rel="noreferrer">{t.cta}</a>
            <button className="gl-btn gl-btn--ghost" onClick={() => go('contact')}>{t.nav.contact}</button>
          </div>
        </div>
      </section>
      <div className="gl-wide-img gl-wide-img--short"><img src="img/cancello.jpg" alt="" /></div>
    </div>
  );
}

/* ---------------- CONTACT ---------------- */
function GLContact({ t }) {
  const [d, setD] = glUseState({ in: '', out: '', guests: 2, name: '', msg: '' });
  const set = (k) => (e) => setD({ ...d, [k]: e.target.value });
  return (
    <div data-screen-label="06 Contatti">
      <section className="gl-page-head gl-wrap">
        <GLKicker>{t.contactKicker}</GLKicker>
        <h1 className="gl-display">{t.contactTitle}</h1>
        <p className="gl-lead gl-measure">{t.contactLead}</p>
      </section>
      <section className="gl-wrap gl-contact">
        <form className="gl-form" onSubmit={(e) => { e.preventDefault(); window.open(GLWaLink(t.waMsg(d)), '_blank'); }}>
          <h2 className="gl-h3">{t.formTitle}</h2>
          <div className="gl-form-grid">
            <label><span>{t.fIn}</span><input type="date" value={d.in} onChange={set('in')} /></label>
            <label><span>{t.fOut}</span><input type="date" value={d.out} onChange={set('out')} /></label>
            <label><span>{t.fGuests}</span>
              <div className="gl-stepper">
                <button type="button" onClick={() => setD({ ...d, guests: Math.max(1, d.guests - 1) })}>−</button>
                <span>{d.guests}</span>
                <button type="button" onClick={() => setD({ ...d, guests: Math.min(4, d.guests + 1) })}>+</button>
              </div>
            </label>
            <label><span>{t.fName}</span><input value={d.name} onChange={set('name')} /></label>
            <label className="gl-span2"><span>{t.fMsg}</span><textarea rows="3" value={d.msg} onChange={set('msg')} /></label>
          </div>
          <button className="gl-btn" type="submit">{t.fSend}</button>
          <p className="gl-note">{t.fNote}</p>
        </form>
        <div className="gl-direct">
          <a href={GLWaLink('')} target="_blank" rel="noreferrer"><span className="gl-mono">WhatsApp</span><strong>{GL_CONTACT.phone}</strong></a>
          <a href={`tel:${GL_CONTACT.phone.replace(/\s/g, '')}`}><span className="gl-mono">Tel</span><strong>{GL_CONTACT.phone}</strong></a>
          <a href={`mailto:${GL_CONTACT.email}`}><span className="gl-mono">Email</span><strong>{GL_CONTACT.email}</strong></a>
          <div><span className="gl-mono">Indirizzo</span><strong>{GL_CONTACT.address}</strong></div>
        </div>
      </section>
      <section className="gl-section gl-wrap gl-getthere">
        <div>
          <GLKicker>{t.getThereTitle}</GLKicker>
          <dl>
            {t.getThere.map(([k, v]) => (<div key={k}><dt>{k}</dt><dd>{v}</dd></div>))}
          </dl>
        </div>
        <div className="gl-map">
          <iframe title={t.mapPh} src={`https://maps.google.com/maps?q=${GL_CONTACT.geo}&z=16&output=embed`} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen />
          <a className="gl-btn gl-map-btn" href={`https://www.google.com/maps/dir/?api=1&destination=${GL_CONTACT.geo}`} target="_blank" rel="noreferrer">{t.mapCta}</a>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { GLHome, GLLoft, GLGallery, GLAround, GLAbout, GLContact, GLWaLink });