/* global React, ReactDOM, I18N, BrandSymbol, Wordmark, LiquidCTA, LangCtx, Nav, BeforeAfterCard, useLang */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Hero ----------
function Hero() {
  const { t } = useLang();
  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <video className="hero-bg" autoPlay muted loop playsInline preload="metadata" poster="media/smile-poster.jpg">
        <source src="media/smile.mp4" type="video/mp4" />
      </video>
      <div className="hero-vignette"></div>
      <div className="hero-grain"></div>

      <div className="hero-content pad">
        <div className="hero-eyebrow">
          <span className="ln"></span>
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase" }}>
            {t.hero.eyebrow}
          </span>
        </div>
        <h1>
          {t.hero.title1} <em>{t.hero.title1Em}</em><br />
          {t.hero.title2} <em>{t.hero.title2Em}</em>
        </h1>
        <p className="sub">{t.hero.subtitle}</p>
        <div className="actions">
          <LiquidCTA href="https://ig.me/m/dr.rodrigobenitez" target="_blank" rel="noopener" dataCta="reservar-consulta-privada">{t.hero.cta}</LiquidCTA>
          <a href="#gallery" className="ghost-cta" style={{ color: "rgba(244,239,232,.86)", borderColor: "rgba(244,239,232,.4)" }}>
            {t.hero.ctaSecondary}
          </a>
        </div>
      </div>

      <div className="hero-side">
        <span className="lab">DUBAI · UAE</span>
        <span className="v-line"></span>
        <span className="lab">EST. 2015</span>
      </div>

      <div className="scroll-cue">
        <span>{t.hero.scrollHint}</span>
        <span className="ln"></span>
      </div>

      <div className="hero-marquee">
        <div className="marquee-track">
          {[..."PORCELAIN VENEERS · FULL-MOUTH REHABILITATION · DIGITAL SMILE DESIGN · IMPLANT-SUPPORTED PROSTHETICS · CERAMIC CROWNS · WHITENING · INTRA-ORAL SCAN".split(" · "),
          ..."PORCELAIN VENEERS · FULL-MOUTH REHABILITATION · DIGITAL SMILE DESIGN · IMPLANT-SUPPORTED PROSTHETICS · CERAMIC CROWNS · WHITENING · INTRA-ORAL SCAN".split(" · ")].
          map((s, i) =>
          <span key={i}>{s}<span className="sep" style={{ marginLeft: 30 }}>·</span></span>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Stack Pair (scroll-rotate parallax) ----------
function StackPair({ children }) {
  const itemRefs = useRef([]);
  useEffect(() => {
    const onScroll = () => {
      const arr = itemRefs.current.filter(Boolean);
      const vh = window.innerHeight;
      for (let i = 0; i < arr.length; i++) {
        const next = arr[i + 1];
        if (!next) { arr[i].style.transform = ''; arr[i].style.opacity = 1; continue; }
        const nr = next.getBoundingClientRect();
        const progress = Math.max(0, Math.min(1, (vh - nr.top) / vh));
        const rot = -progress * 3;
        const scale = 1 - progress * 0.05;
        const opacity = 1 - progress * 0.25;
        const y = -progress * 18;
        arr[i].style.transform = `translateY(${y}px) scale(${scale}) rotate(${rot}deg)`;
        arr[i].style.opacity = opacity;
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const arr = React.Children.toArray(children);
  return (
    <div className="stack-pair">
      {arr.map((c, i) => (
        <div key={i} className="stack-pair-item" ref={(el) => itemRefs.current[i] = el}>{c}</div>
      ))}
    </div>
  );
}

// ---------- Manifesto ----------
function Manifesto() {
  const { t } = useLang();
  const imgRef = useRef(null);

  // parallax on portrait
  useEffect(() => {
    const onScroll = () => {
      if (!imgRef.current) return;
      const r = imgRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const center = r.top + r.height / 2;
      const offset = (center - vh / 2) / vh; // -1 .. 1
      const img = imgRef.current.querySelector("img");
      if (img) img.style.transform = `translateY(${offset * -3}%)`;
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="manifesto" data-screen-label="02 Manifesto">
      <div className="manifesto-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.manifesto.eyebrow}</div>
          <h2 className="display">
            {t.manifesto.heading1} <em>{t.manifesto.headingEm}</em> {t.manifesto.heading2}
          </h2>
          <div className="manifesto-rule"></div>
          <p className="body-serif" style={{ maxWidth: 540 }}>
            {t.manifesto.body}
          </p>
          <p style={{ marginTop: 36, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--bronze-deep)" }}>
            {t.manifesto.sig}
          </p>
        </div>

        <div className="manifesto-img" ref={imgRef}>
          <img src="media/portrait-1.jpg" alt="Dr. Rodrigo Benítez" />
          <div className="manifesto-cap">
            <span className="mono" style={{ color: "rgba(244,239,232,.85)" }}>PORTRAIT · 01</span>
            <span className="mono" style={{ color: "rgba(244,239,232,.85)" }}>2026</span>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Services ----------
function Services() {
  const { t } = useLang();
  return (
    <section id="services" className="services" data-screen-label="03 Services">
      <div className="services-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.services.eyebrow}</div>
          <h2 className="display">{t.services.heading}</h2>
        </div>
        <p className="body-serif" style={{ marginBottom: 8 }}>{t.services.sub}</p>
      </div>

      <div className="services-list">
        {t.services.list.map((s) =>
        <div className="service-row" key={s.n}>
            <div className="num">{s.n}</div>
            <div className="ttl">{s.t}</div>
            <div className="desc">{s.d}</div>
            <div className="arr"></div>
          </div>
        )}
      </div>
    </section>);

}

// ---------- Smile Gallery ----------
function SmileGallery() {
  const { t } = useLang();
  const cases = [
  { n: 6, b: "media/before-6.jpg", a: "media/after-6.jpg" },
  { n: 7, b: "media/before-7.jpg", a: "media/after-7.jpg" },
  { n: 1, b: "media/before-1.jpg", a: "media/after-1.jpg" },
  { n: 2, b: "media/before-2.jpg", a: "media/after-2.jpg" },
  { n: 3, b: "media/before-3.jpg", a: "media/after-3.jpg" },
  { n: 4, b: "media/before-4.jpg", a: "media/after-4.jpg" },
  { n: 5, b: "media/before-5.jpg", a: "media/after-5.jpg" },
  { n: 8, b: "media/before-8.jpg", a: "media/after-8.jpg" },
  { n: 9, b: "media/before-9.jpg", a: "media/after-9.jpg" }];

  const [active, setActive] = useState(0);
  const [dir, setDir] = useState(1);
  const total = cases.length;
  const next = () => { setDir(1); setActive((a) => (a + 1) % total); };
  const prev = () => { setDir(-1); setActive((a) => (a - 1 + total) % total); };

  return (
    <section id="gallery" className="gallery" data-screen-label="04 Smile Gallery">
      <div style={{ position: "absolute", left: "-80px", top: "10%" }} className="ambient-symbol">
        <BrandSymbol size={420} dark />
      </div>
      <div style={{ position: "absolute", right: "-80px", bottom: "5%" }} className="ambient-symbol">
        <BrandSymbol size={300} dark />
      </div>

      <div className="gallery-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.gallery.eyebrow}</div>
          <h2 className="display">
            {t.gallery.heading} <em>{t.gallery.headingEm}</em>
          </h2>
        </div>
        <div>
          <p>{t.gallery.sub}</p>
          <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--bronze-2)" }}>
            <span style={{ width: 6, height: 6, background: "var(--bronze-2)", borderRadius: "50%" }}></span>
            {t.gallery.drag}
          </div>
        </div>
      </div>

      <div className="gc-deck-wrap">
        <button className="gc-arrow gc-prev" aria-label="Previous" onClick={prev}><span></span></button>
        <div className="gc-deck">
          {cases.map((c, i) => {
            // position relative to active (mod total), pick shortest direction
            let rel = i - active;
            if (rel > total / 2) rel -= total;
            if (rel < -total / 2) rel += total;
            const isTop = rel === 0;
            const absRel = Math.abs(rel);
            // Stack up to 3 layers visible behind/ahead
            const visible = absRel <= 3;
            const sign = rel === 0 ? 0 : rel > 0 ? 1 : -1;
            const ty = sign * Math.min(absRel, 3) * 14; // vertical fan
            const tx = sign * Math.min(absRel, 3) * 36; // slight horizontal fan
            const rot = sign * Math.min(absRel, 3) * 2.2;
            const scale = 1 - Math.min(absRel, 3) * 0.05;
            const opacity = visible ? 1 - Math.min(absRel, 3) * 0.18 : 0;
            const z = total - absRel;
            return (
              <div
                className={`gc-card-pos ${isTop ? "is-top" : ""}`}
                key={c.n}
                style={{
                  transform: `translate(-50%, calc(-50% + ${ty}px)) translateX(${tx}px) rotate(${rot}deg) scale(${scale})`,
                  opacity,
                  zIndex: z,
                  pointerEvents: isTop ? "auto" : "none",
                  visibility: visible ? "visible" : "hidden",
                }}>
                <BeforeAfterCard before={c.b} after={c.a} caseNo={c.n} bScale={c.bScale} bOrigin={c.bOrigin} aPos={c.aPos} />
              </div>
            );
          })}
        </div>
        <button className="gc-arrow gc-next" aria-label="Next" onClick={next}><span></span></button>
        <div className="gc-counter">
          <span className="cur">{String(active + 1).padStart(2, "0")}</span>
          <span className="sep">/</span>
          <span className="tot">{String(total).padStart(2, "0")}</span>
        </div>
      </div>
    </section>);

}

// ---------- Featured Cases (card stack scroll) ----------
function FeaturedCases() {
  const { t } = useLang();
  const wrapRef = useRef(null);
  const cardRefs = useRef([]);

  useEffect(() => {
    const onScroll = () => {
      if (window.innerWidth <= 720) {
        cardRefs.current.forEach((c) => { if (c) { c.style.transform = ''; c.style.opacity = 1; } });
        return;
      }
      cardRefs.current.forEach((card, i) => {
        if (!card) return;
        const next = cardRefs.current[i + 1];
        if (next) {
          const nr = next.getBoundingClientRect();
          const dist = Math.max(0, Math.min(1, (window.innerHeight - nr.top) / window.innerHeight));
          const scale = 1 - dist * 0.06;
          const opacity = 1 - dist * 0.5;
          const y = -dist * 14;
          card.style.transform = `translateY(${y}px) scale(${scale})`;
          card.style.opacity = opacity;
        } else {
          card.style.transform = "";
          card.style.opacity = 1;
        }
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const caseImages = [
  ["media/case1-1.jpg", "media/case1-2.jpg", "media/case1-3.jpg", "media/case1-4.jpg"],
  ["media/case2-1.jpg", "media/case2-2.jpg", "media/case2-3.jpg", "media/case2-4.jpg"],
  ["media/case3-1.jpg", "media/case3-2.jpg", "media/case3-3.jpg", "media/case3-4.jpg", "media/case3-5.jpg"]];


  return (
    <section id="cases" className="cases" data-screen-label="05 Featured Cases">
      <div className="cases-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.cases.eyebrow}</div>
          <h2 className="display">
            {t.cases.heading} <em>{t.cases.headingEm}</em>
          </h2>
        </div>
        <p>{t.cases.sub}</p>
      </div>

      <div className="stack-wrap" ref={wrapRef}>
        {t.cases.items.map((c, i) => {
          const imgs = caseImages[i] || [];
          return (
            <article
              className="stack-card"
              key={c.id}
              ref={(el) => cardRefs.current[i] = el}
              style={{ zIndex: 10 + i, top: `${80 + i * 16}px` }}>
              
              <div className="meta-pane">
                <div>
                  <div className="num">CASE / {String(c.id).padStart(3, "0")}</div>
                  <h3>{c.name}</h3>
                  <div className="stat">
                    <div className="k">Procedure</div>
                    <div className="v">{c.procedure}</div>
                  </div>
                  <div className="stat">
                    <div className="k">Duration</div>
                    <div className="v">{c.duration}</div>
                  </div>
                  <p className="note">"{c.note}"</p>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", paddingTop: 30 }}>
                  <BrandSymbol size={48} />
                  <div className="mono">RB · 0{c.id}</div>
                </div>
              </div>
              <div className="gallery-pane">
                <div className={`case-imgs ${imgs.length === 5 ? "five" : ""}`}>
                  {imgs.map((src, k) =>
                  <div key={k} className="ci" style={{ backgroundImage: `url("${src}")` }}></div>
                  )}
                </div>
              </div>
            </article>);

        })}
        <div style={{ height: "20vh" }}></div>
      </div>
    </section>);

}

// ---------- Process ----------
function Process() {
  const { t } = useLang();
  return (
    <section id="process" className="process" data-screen-label="06 Process">
      <div className="process-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.process.eyebrow}</div>
          <h2 className="display">
            {t.process.heading} <em>{t.process.headingEm}</em>
          </h2>
        </div>
        <p className="body-serif" style={{ color: "rgba(244,239,232,.7)", maxWidth: 460 }}>
          A predictable, photographable workflow. Every step documented for the patient.
        </p>
      </div>

      <div className="process-grid">
        <div className="process-steps">
          {t.process.list.map((s) =>
          <div className="process-step" key={s.n}>
              <div className="num">{s.n}</div>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          )}
        </div>

        <div className="process-video">
          <video autoPlay muted loop playsInline preload="metadata">
            <source src="media/procedure.mp4" type="video/mp4" />
          </video>
          <div className="label">CHAIRSIDE · LIVE PROCEDURE</div>
        </div>
      </div>
    </section>);

}

// ---------- About ----------
function About() {
  const { t } = useLang();
  return (
    <section id="about" className="about" data-screen-label="07 About">
      <div className="about-grid">
        <div className="about-portrait">
          <img src="media/portrait-12.jpg" alt="Dr. Rodrigo Benítez portrait" />
          <div className="stamp">DR. BENÍTEZ · DUBAI · 2025</div>
        </div>

        <div>
          <div className="eyebrow"><span className="dot"></span>{t.about.eyebrow}</div>
          <h2 className="display">
            {t.about.heading} <em>{t.about.headingEm}</em>
          </h2>
          <div className="title-line">{t.about.titleLine}</div>
          <p className="bio">{t.about.bio}</p>

          <div className="about-section-head">{t.about.langs}</div>
          <div className="about-cred" style={{ borderBottom: "1px solid var(--rule)" }}>
            <div className="y">EN · ES · PT</div>
            <div className="t">{t.about.langList}</div>
          </div>

          <div className="about-section-head">Instagram</div>
          <div className="about-cred" style={{ borderBottom: "1px solid var(--rule)" }}>
            <div className="y"><a href="https://instagram.com/dr.rodrigobenitez" target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: 2 }}>@dr.rodrigobenitez</a></div>
            <div className="t"></div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Contact ----------
function Contact() {
  const { t, lang } = useLang();
  return (
    <section id="contact" className="contact" data-screen-label="08 Contact">
      <div style={{ position: "absolute", right: "-100px", top: "5%" }} className="ambient-symbol">
        <BrandSymbol size={500} dark />
      </div>

      <div className="contact-grid">
        <div>
          <div className="eyebrow" style={{ color: "var(--bronze-2)" }}><span className="dot" style={{ background: "var(--bronze-2)" }}></span>{t.contact.eyebrow}</div>
          <h2 className="display">
            {t.contact.heading} <em>{t.contact.headingEm}</em>
          </h2>
          <p className="sub">{t.contact.sub}</p>

          <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
            <div className="row">
              <input type="text" placeholder={t.contact.name} />
              <input type="email" placeholder={t.contact.email} />
            </div>
            <input type="tel" placeholder={t.contact.phone} />
            <textarea placeholder={t.contact.msg} rows="3"></textarea>
            <div className="submit-row">
              <a href="https://ig.me/m/dr.rodrigobenitez" target="_blank" rel="noopener" data-cta="reservar-consulta-privada" className="liquid-cta light">
                <span>{t.contact.send}</span>
                <span className="arr"></span>
              </a>
            </div>
          </form>
        </div>

        <div className="contact-direct">
          <div className="lab">{t.contact.direct}</div>
          <div className="item">
            <div className="k">Phone</div>
            <div className="v"><a href="https://wa.me/971501436888" target="_blank" rel="noreferrer">+971 501436888</a></div>
          </div>
          <div className="item">
            <div className="k">Email</div>
            <div className="v"><a href="mailto:dr.rodrigobenitezolazar@gmail.com">dr.rodrigobenitezolazar@gmail.com</a></div>
          </div>
        </div>
      </div>

      <div className="contact-map-wrap">
        <div className="contact-map-head">
          <div className="lab">{lang === "es" ? "Dónde encontrarme" : "Where to find me"}</div>
          <div className="contact-map-addr">
            <div className="name">True Smile Works Dental Network</div>
            <div className="city">Dubai · United Arab Emirates</div>
            <a className="dir" href="https://www.google.com/maps/search/?api=1&query=True+Smile+Works+Dental+Network+Dubai" target="_blank" rel="noreferrer">{lang === "es" ? "Abrir en Maps →" : "Open in Maps →"}</a>
          </div>
        </div>
        <div className="contact-map">
          <iframe
            src="https://maps.google.com/maps?q=True+Smile+Works+Dental+Network+Dubai&t=&z=15&ie=UTF8&iwloc=&output=embed"
            width="100%"
            height="100%"
            style={{ border: 0, filter: "grayscale(0.6) contrast(1.05)" }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="True Smile Works Dental Network — Dubai">
          </iframe>
        </div>
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer() {
  const { t } = useLang();
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div className="city">{t.footer.city}</div>
        <div className="tag">"{t.footer.tag}"</div>
        <div className="copy">{t.footer.copy}</div>
      </div>
    </footer>);

}

// ---------- App ----------
function App() {
  const [lang, setLang] = useState("en");
  const t = I18N[lang];

  // dark nav over hero/gallery/process/contact
  const [darkNav, setDarkNav] = useState(true);
  useEffect(() => {
    const darkRanges = () => {
      const sections = ["#top", "#gallery", "#process", "#contact"];
      const els = sections.map((s) => document.querySelector(s)).filter(Boolean);
      const onScroll = () => {
        const y = window.scrollY + 40;
        let hit = false;
        for (const el of els) {
          const r = el.getBoundingClientRect();
          const top = window.scrollY + r.top;
          const bot = top + el.offsetHeight;
          if (y >= top && y < bot) {hit = true;break;}
        }
        setDarkNav(hit);
      };
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    };
    return darkRanges();
  }, []);

  // sync html lang
  useEffect(() => {document.documentElement.lang = lang;}, [lang]);

  const ctx = useMemo(() => ({ lang, setLang, t }), [lang, t]);

  return (
    <LangCtx.Provider value={ctx}>
      <Nav darkMode={darkNav} />
      <Hero />
      <StackPair>
        <Manifesto />
        <Services />
      </StackPair>
      <SmileGallery />
      <FeaturedCases />
      <StackPair>
        <Process />
        <About />
        <Contact />
      </StackPair>
      <Footer />
    </LangCtx.Provider>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);