// Section components for atouchmoment.com
const { useState, useEffect, useRef, useMemo } = React;

// Resolve an asset path to a bundled blob URL (window.__resources) when present,
// otherwise fall back to the plain path. Lets the same code work in the normal
// page and in the standalone bundled file.
function res(path) {
  if (!path) return path;
  const map = window.__resources || {};
  if (path.indexOf("about-concert") >= 0 && map.aboutImg) return map.aboutImg;
  if (path.indexOf("qloze-app") >= 0 && map.qlozeApp) return map.qlozeApp;
  if (path.indexOf("garland") >= 0 && map.garlandImg) return map.garlandImg;
  if (path.indexOf("letters") >= 0 && map.lettersImg) return map.lettersImg;
  if (path.indexOf("hologram") >= 0 && map.hologramImg) return map.hologramImg;
  if (path.indexOf("qr2shot") >= 0 && map.qr2shotImg) return map.qr2shotImg;
  return path;
}

// ---------- shared bits ----------

// Striped/textured placeholder block with monospace caption
function Placeholder({ ratio = "16/9", label = "// placeholder", tone = "warm", className = "", style = {}, src = null, alt = "" }) {
  const bg = tone === "dark"
    ? "repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px), linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0)), var(--ink)"
    : "repeating-linear-gradient(135deg, rgba(31,18,12,0.06) 0 1px, transparent 1px 14px), linear-gradient(135deg, rgba(255,210,180,0.6), rgba(255,235,220,0.2)), var(--cream-2)";
  if (src) {
    return (
      <div className={"atm-placeholder atm-placeholder--img " + className} style={{ aspectRatio: ratio, ...style }}>
        <img className="atm-placeholder__img" src={src} alt={alt} loading="lazy" />
      </div>
    );
  }
  return (
    <div className={"atm-placeholder " + className} style={{ aspectRatio: ratio, background: bg, ...style }}>
      <span className="atm-placeholder__label" style={{ color: tone === "dark" ? "rgba(255,235,220,0.55)" : "rgba(31,18,12,0.45)" }}>{label}</span>
    </div>
  );
}

// IntersectionObserver-based fade-in wrapper
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {}, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={"atm-reveal " + (seen ? "is-in " : "") + className} style={{ transitionDelay: (delay) + "ms", ...style }} {...rest}>
      {children}
    </As>
  );
}

// ---------- HERO ----------
function Hero({ t }) {
  return (
    <section className="atm-hero" id="top">
      <div className="atm-hero__mesh" aria-hidden="true">
        <span className="atm-mesh atm-mesh--a"></span>
        <span className="atm-mesh atm-mesh--b"></span>
        <span className="atm-mesh atm-mesh--c"></span>
        <span className="atm-grain" aria-hidden="true"></span>
      </div>
      <div className="atm-hero__inner">
        <Reveal as="div" className="atm-eyebrow">— {t.hero.eyebrow}</Reveal>
        <h1 className="atm-hero__h1">
          <Reveal delay={80}><span>{t.hero.headline_l1}</span></Reveal>
          <Reveal delay={160}><span className="atm-hero__line2">{t.hero.headline_l2}</span></Reveal>
          <Reveal delay={240}><span className="atm-hero__line3"><em>{t.hero.headline_l3}</em></span></Reveal>
        </h1>
        <Reveal delay={360} className="atm-hero__sub">{t.hero.sub}</Reveal>
        <Reveal delay={440} className="atm-hero__ctas">
          <a href="#about" className="atm-btn atm-btn--primary">{t.hero.cta1}</a>
          <a href="#products" className="atm-btn atm-btn--ghost">{t.hero.cta2} <span aria-hidden="true">↓</span></a>
        </Reveal>
      </div>
      <div className="atm-hero__marquee" aria-hidden="true">
        <div className="atm-marquee__track">
          {Array.from({length: 4}).map((_, i) => (
            <span key={i} className="atm-marquee__row">
              <em>artist × fan</em> · <em>moment</em> · <em>touch</em> · <em>tipping</em> · <em>letters</em> · <em>hologram</em> · <em>2-shot</em> · <em>T-POP</em> · <em>luuk thung</em> ·{" "}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- ABOUT ----------
function About({ t }) {
  return (
    <section className="atm-section atm-about" id="about">
      <Reveal as="p" className="atm-eyebrow">— {t.about.eyebrow}</Reveal>
      <Reveal as="h2" delay={80} className="atm-section__h2">
        {t.about.title.split("\n").map((l, i) => <span key={i}>{l}</span>)}
      </Reveal>
      <div className="atm-about__grid">
        <Reveal delay={140} className="atm-about__body">
          <p className="atm-lead">{t.about.body1}</p>
          <p>{t.about.body2}</p>
          <p>{t.about.body3}</p>
        </Reveal>
        <Reveal delay={220} className="atm-about__visual">
          <Placeholder ratio="3/4" src={res("assets/about-concert.png")} alt="Artist on stage reaching out to fans, connected through the a touch moment app" />
          <div className="atm-about__stats">
            {[t.about.stat1, t.about.stat2, t.about.stat3].map((s, i) => (
              <div key={i} className="atm-stat">
                <span className="atm-stat__n">{s[0]}</span>
                <span className="atm-stat__l">{s[1]}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- BELIEVE ----------
function Believe({ t }) {
  return (
    <section className="atm-section atm-believe" id="believe">
      <Reveal as="p" className="atm-eyebrow">— {t.believe.eyebrow}</Reveal>
      <Reveal as="h2" delay={80} className="atm-section__h2">{t.believe.title}</Reveal>
      <div className="atm-believe__grid">
        {t.believe.pillars.map((p, i) => (
          <Reveal key={i} delay={140 + i * 80} className="atm-pillar">
            <span className="atm-pillar__n">{p.n}</span>
            <h3 className="atm-pillar__t">{p.t}</h3>
            <p className="atm-pillar__b">{p.b}</p>
            <span className="atm-pillar__rule" aria-hidden="true"></span>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- PRODUCTS (scroll-driven flow) ----------
function ProductPanel({ item, i }) {
  const ref = useRef(null);
  const visRef = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.2, rootMargin: "0px 0px -12% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Pointer-driven 3D tilt + cursor-tracking glow
  function onMove(e) {
    const el = visRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    el.style.setProperty("--rx", ((0.5 - py) * 7).toFixed(2) + "deg");
    el.style.setProperty("--ry", ((px - 0.5) * 9).toFixed(2) + "deg");
    el.style.setProperty("--gx", (px * 100).toFixed(1) + "%");
    el.style.setProperty("--gy", (py * 100).toFixed(1) + "%");
  }
  function onLeave() {
    const el = visRef.current;
    if (!el) return;
    el.style.setProperty("--rx", "0deg");
    el.style.setProperty("--ry", "0deg");
  }

  const flip = i % 2 === 1;
  return (
    <article
      ref={ref}
      className={"atm-prod-panel" + (item.hero ? " is-hero" : "") + (flip ? " is-flip" : "") + (seen ? " is-in" : "")}
    >
      <div className="atm-prod-panel__visual" ref={visRef} onMouseMove={onMove} onMouseLeave={onLeave}>
        <Placeholder ratio="4/5" label={item.placeholder || "// product"} tone={item.hero ? "dark" : "warm"} src={res(item.img) || null} alt={item.name} />
        {item.hero && <span className="atm-product-card__chip">{item.tag}</span>}
      </div>
      <div className="atm-prod-panel__body">
        <span className="atm-product-card__n">{item.hero ? "Flagship · 01" : item.n}</span>
        <h3 className="atm-product-card__name">{item.name}</h3>
        <p className="atm-product-card__kicker">{item.kicker}</p>
        {item.line && <p className="atm-product-card__line"><em>{item.line}</em></p>}
        <p className="atm-product-card__b">{item.body}</p>
        {item.use && <p className="atm-product-card__use"><span>Use case</span> {item.use}</p>}
        {item.cta && (
          <a className="atm-btn atm-btn--primary" href={item.href || "#contact"} target={item.href ? "_blank" : undefined} rel={item.href ? "noopener noreferrer" : undefined}>
            {item.cta} {item.href ? "↗" : "→"}
          </a>
        )}
      </div>
    </article>
  );
}

function Products({ t }) {
  const items = useMemo(() => {
    return [
      { hero: true, ...t.products.featured, n: "01" },
      ...t.products.list,
    ];
  }, [t]);

  return (
    <section className="atm-section atm-products" id="products">
      <Reveal as="p" className="atm-eyebrow">— {t.products.eyebrow}</Reveal>
      <div className="atm-products__head">
        <Reveal as="h2" delay={80} className="atm-section__h2">
          {t.products.title.split("\n").map((l, i) => <span key={i}>{l}</span>)}
        </Reveal>
        <Reveal as="p" delay={140} className="atm-products__intro">{t.products.intro}</Reveal>
      </div>

      {/* Scroll-driven product flow — each panel slides in on its own */}
      <div className="atm-products__flow">
        {items.map((it, i) => (
          <ProductPanel key={i} item={it} i={i} />
        ))}
      </div>

      {/* Supporting services */}
      {t.products.also && (
        <Reveal className="atm-also">
          <div className="atm-also__head">
            <span className="atm-eyebrow">— {t.products.also.label}</span>
            <h3 className="atm-also__t">{t.products.also.title}</h3>
          </div>
          <ul className="atm-also__list">
            {t.products.also.services.map(([n, b], i) => (
              <li key={i} className="atm-also__item">
                <span className="atm-also__n">{String(i + 1).padStart(2, "0")}</span>
                <span className="atm-also__name">{n}</span>
                <span className="atm-also__b">{b}</span>
              </li>
            ))}
          </ul>
          <p className="atm-also__note">{t.products.also.note}</p>
        </Reveal>
      )}
    </section>
  );
}

// ---------- APPROACH ----------
function Approach({ t }) {
  return (
    <section className="atm-section atm-approach" id="approach">
      <Reveal as="p" className="atm-eyebrow">— {t.approach.eyebrow}</Reveal>
      <Reveal as="h2" delay={80} className="atm-section__h2">
        {t.approach.title.split("\n").map((l, i) => <span key={i}>{l}</span>)}
      </Reveal>
      <div className="atm-approach__grid">
        {t.approach.cols.map((c, i) => (
          <Reveal key={i} delay={120 + i * 80} className="atm-approach__col">
            <span className="atm-approach__n">{c.n}</span>
            <h3 className="atm-approach__t">{c.t}</h3>
            <p className="atm-approach__b">{c.b}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- PARTNERS ----------
function Partners({ t }) {
  // 6 placeholder logo blocks
  return (
    <section className="atm-section atm-partners" id="partners">
      <Reveal as="p" className="atm-eyebrow">— {t.partners.eyebrow}</Reveal>
      <div className="atm-partners__row">
        <Reveal as="h2" className="atm-section__h2 atm-partners__h2">{t.partners.title}</Reveal>
        <Reveal as="p" delay={80} className="atm-partners__sub">{t.partners.sub}</Reveal>
      </div>
      <Reveal delay={140} className="atm-partners__grid">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="atm-partner">
            <span className="atm-partner__mark">/</span>
            <span className="atm-partner__label">partner {String(i + 1).padStart(2, "0")}</span>
          </div>
        ))}
      </Reveal>
      <Reveal delay={220} className="atm-partners__cta">
        <span>{t.partners.cta}</span>
        <a href="#contact" className="atm-link">{t.partners.cta_link}</a>
      </Reveal>
    </section>
  );
}

// ---------- NEWS ----------
function News({ t }) {
  return (
    <section className="atm-section atm-news" id="news">
      <Reveal as="p" className="atm-eyebrow">— {t.news.eyebrow}</Reveal>
      <div className="atm-news__head">
        <Reveal as="h2" delay={80} className="atm-section__h2">{t.news.title}</Reveal>
        <Reveal as="p" delay={140} className="atm-news__sub">{t.news.sub}</Reveal>
      </div>
      <div className="atm-news__grid">
        {Array.from({ length: 3 }).map((_, i) => (
          <Reveal key={i} delay={120 + i * 80} className="atm-news__card">
            <Placeholder ratio="4/3" label={"// story " + String(i + 1).padStart(2, "0")} />
            <span className="atm-news__date">— soon</span>
            <h3 className="atm-news__t">{t.news.empty}</h3>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- CONTACT ----------
function Contact({ t }) {
  return (
    <section className="atm-section atm-contact" id="contact">
      <Reveal as="p" className="atm-eyebrow">— {t.contact.eyebrow}</Reveal>

      <div className="atm-contact__head">
        <Reveal as="h2" delay={80} className="atm-section__h2 atm-contact__h2">
          {t.contact.title.split("\n").map((l, i) => <span key={i}>{l}</span>)}
        </Reveal>
        <Reveal as="p" delay={140} className="atm-contact__body">{t.contact.body}</Reveal>
      </div>

      <Reveal delay={180}>
        <a href={"mailto:" + t.contact.email} className="atm-contact__mail">
          <span className="atm-contact__mail-label">{t.contact.email_label}</span>
          <span className="atm-contact__mail-addr">{t.contact.email}</span>
          <span className="atm-contact__mail-arrow" aria-hidden="true">↗</span>
        </a>
      </Reveal>

      <div className="atm-contact__info">
        <Reveal delay={220} className="atm-contact__cell">
          <span className="atm-contact__k">{t.contact.company_label}</span>
          <span className="atm-contact__v atm-contact__v--strong">{t.contact.company}</span>
        </Reveal>
        <Reveal delay={280} className="atm-contact__cell atm-contact__cell--wide">
          <span className="atm-contact__k">{t.contact.office[0]}</span>
          <span className="atm-contact__v">{t.contact.office[1]}</span>
        </Reveal>
        <Reveal delay={340} className="atm-contact__cell">
          <span className="atm-contact__k">{t.contact.socials_label}</span>
          <div className="atm-contact__socials">
            {t.contact.socials.map(s => (
              <a key={s} href="#" className="atm-social">{s} →</a>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer({ t }) {
  return (
    <footer className="atm-footer">
      <div className="atm-footer__top">
        <div className="atm-footer__brand">
          <span className="atm-footer__mark">a touch moment</span>
          <span className="atm-footer__tag">{t.footer.tag}</span>
        </div>
        <ul className="atm-footer__links">
          {t.footer.links.map(l => <li key={l}><a href="#">{l}</a></li>)}
        </ul>
      </div>
      <div className="atm-footer__bottom">
        <span className="atm-footer__legal">{t.footer.legal}</span>
        <span className="atm-footer__big" aria-hidden="true">a · touch · moment</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, About, Believe, Products, Approach, Partners, News, Contact, Footer });