/* global React */
// Tito — photo sections: banner, grid gallery, slider.
// Real Tito Atelier photography (uploaded), shown in full color so the brand
// yellow in the atelier and garments carries through.
const { createElement: _r } = React;

const IMG = {
  banner: "assets/photo-tailor-work.jpg",
  gridHero: "assets/photo-atelier-table.jpg",
  gridCells: [
    "assets/photo-tailor-portrait.jpg",
    "assets/photo-hoodie-bw.jpg",
    "assets/photo-hoodie-yellow.jpg",
    "assets/photo-crew-yellow.jpg",
  ],
  slides: [
    "assets/photo-hoodie-yellow.jpg",
    "assets/photo-hoodie-bw.jpg",
    "assets/photo-crew-yellow.jpg",
    "assets/photo-atelier-table.jpg",
    "assets/photo-tailor-portrait.jpg",
    "assets/photo-tailor-work.jpg",
  ],
};

const PHOTO_STR = {
  ro: {
    bnKick: "Atelierul",
    bnTitle: "Mâini pricepute, mașini precise.",
    bnCta: "Vezi serviciile",
    grKick: "Din atelier",
    grTitle: "Locul unde prinde formă.",
    slKick: "Colecția",
    slTitle: "Produse croite la Tito.",
    caps: ["Croitorie", "Hanorace", "Linia Tito", "Bluze"],
    slides: [
      ["Hanorac Tito", "Linia proprie"],
      ["Hanorac colorblock", "Serie mică"],
      ["Bluză Tito", "Linia proprie"],
      ["La masa de croit", "Producție"],
      ["Croit manual", "Confecții"],
      ["În atelier", "Cluj-Napoca"],
    ],
  },
  en: {
    bnKick: "The atelier",
    bnTitle: "Skilled hands, precise machines.",
    bnCta: "See services",
    grKick: "From the atelier",
    grTitle: "Where it takes shape.",
    slKick: "The collection",
    slTitle: "Made at Tito.",
    caps: ["Tailoring", "Hoodies", "The line", "Sweatshirts"],
    slides: [
      ["Tito hoodie", "Own line"],
      ["Colorblock hoodie", "Small batch"],
      ["Tito sweatshirt", "Own line"],
      ["On the cutting table", "Production"],
      ["Made by hand", "Tailoring"],
      ["In the atelier", "Cluj-Napoca"],
    ],
  },
};

function PhotoBanner({ lang }) {
  const s = PHOTO_STR[lang];
  const scroll = (id) => () => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" }); };
  return (
    <section className="ph-banner" data-screen-label="Photo banner">
      <div className="bg"><img src={IMG.banner} alt="Tito Atelier" /></div>
      <div className="ov"></div>
      <div className="inner">
        <span className="m-kicker ph-bn-kick" style={{ color: "var(--yellow)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>{s.bnKick}</span>
        </span>
        <h2>{s.bnTitle}</h2>
        <div style={{ marginTop: 30 }}>
          <PillButton variant="solid" icon="bi-arrow-right-circle" onClick={scroll("services")}>{s.bnCta}</PillButton>
        </div>
      </div>
    </section>
  );
}

function PhotoGrid({ lang }) {
  const s = PHOTO_STR[lang];
  return (
    <section className="section section-white photo-band" data-screen-label="Photo grid">
      <div className="ph-head">
        <div className="m-kicker"><ButtonDot size={18} color="var(--ink)" /> {s.grKick}</div>
        <h2 className="section-title" style={{ marginTop: 16 }}>{s.grTitle}</h2>
      </div>
      <div className="ph-grid-wrap">
        <div className="ph-hero-img"><img src={IMG.gridHero} alt="" /></div>
        <div className="ph-row">
          {IMG.gridCells.map((src, i) => (
            <div className="ph-cell" key={i}>
              <img src={src} alt="" />
              <span className="ph-cap">{s.caps[i]}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PhotoSlider({ lang }) {
  const s = PHOTO_STR[lang];
  const by = (d) => () => { const t = document.querySelector(".ph-track"); if (t) t.scrollBy({ left: d * 336, behavior: "smooth" }); };
  return (
    <section className="section section-paper photo-band" data-screen-label="Photo slider">
      <div className="ph-head">
        <div className="m-kicker"><ButtonDot size={18} color="var(--ink)" /> {s.slKick}</div>
        <h2 className="section-title" style={{ marginTop: 16 }}>{s.slTitle}</h2>
      </div>
      <div className="ph-slider-wrap">
        <div className="ph-track">
          {s.slides.map((sl, i) => (
            <div className="ph-slide" key={i}>
              <div className="img"><img src={IMG.slides[i]} alt="" /></div>
              <div className="lbl">{sl[0]}</div>
              <div className="sub">{sl[1]}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="ph-arrows">
        <button className="ph-arrow" onClick={by(-1)} aria-label="Prev"><i className="bi bi-arrow-left"></i></button>
        <button className="ph-arrow" onClick={by(1)} aria-label="Next"><i className="bi bi-arrow-right"></i></button>
      </div>
    </section>
  );
}

Object.assign(window, { PhotoBanner, PhotoGrid, PhotoSlider });