/* =========================================================================
   HOME — page content
   ========================================================================= */
(function () {
  const { useRef, useLayoutEffect, useState, useEffect } = React;
  const H = C.home;

  /* Solid petrol fill (see .fillword CSS) — used when there's no hero video. */
  function HeroFill({ text }) {
    return <span className="fillword">{text}</span>;
  }

  /* Decorative background layer 1 — thin vertical lines breathing in polyrhythm.
     Pure CSS animation; goes static under reduced-motion (CSS handles that). */
  const HERO_LINES = [
    { left: '8%',  top: '0%',  height: '100%', delay: 0,   dur: 6 },
    { left: '17%', top: '15%', height: '50%',  delay: 1.2, dur: 7 },
    { left: '24%', top: '0%',  height: '70%',  delay: 0.5, dur: 5 },
    { left: '38%', top: '40%', height: '60%',  delay: 2.0, dur: 8 },
    { left: '52%', top: '0%',  height: '100%', delay: 0.8, dur: 6.5 },
    { left: '63%', top: '20%', height: '45%',  delay: 1.5, dur: 7.5 },
    { left: '76%', top: '0%',  height: '85%',  delay: 0.3, dur: 5.5 },
    { left: '84%', top: '30%', height: '55%',  delay: 2.5, dur: 6 },
    { left: '92%', top: '0%',  height: '100%', delay: 1.0, dur: 7 }
  ];
  function HeroLines() {
    return (
      <div className="hero-lines" aria-hidden="true">
        {HERO_LINES.map((l, i) => (
          <div key={i} className="hero-line"
               data-i={i}
               style={{ left: l.left, top: l.top, height: l.height,
                        animationDelay: `${l.delay}s`, animationDuration: `${l.dur}s` }} />
        ))}
      </div>);

  }

  /* Decorative background layer 2 — dot grid revealed only near the cursor via a
     mask that follows the mouse (CSS vars, no DOM thrash). Desktop only. */
  function HeroDotsGrid() {
    const ref = useRef(null);
    useEffect(() => {
      if (isTouch || prefersReduced) return;
      const el = ref.current;
      if (!el) return;
      let raf = null, nx = 50, ny = 50;
      const onMove = (e) => {
        const r = el.getBoundingClientRect();
        nx = ((e.clientX - r.left) / r.width) * 100;
        ny = ((e.clientY - r.top) / r.height) * 100;
        if (raf) return;
        raf = requestAnimationFrame(() => {
          el.style.setProperty('--mouse-x', nx + '%');
          el.style.setProperty('--mouse-y', ny + '%');
          raf = null;
        });
      };
      window.addEventListener('mousemove', onMove, { passive: true });
      return () => { window.removeEventListener('mousemove', onMove); if (raf) cancelAnimationFrame(raf); };
    }, []);
    if (isTouch || prefersReduced) return null;
    return <div ref={ref} className="hero-dots-grid" aria-hidden="true"></div>;
  }

  /* Video letter-fill: ONE <video>, rendered once, masked by BOTH name lines.
     The words are windows onto the same footage, perfectly in sync. A single
     offset shadow sits under the whole group. */
  function HeroVideoName({ first, last, video }) {
    const videoRef = useRef(null);
    const maskId = useRef('hm' + Math.random().toString(36).slice(2, 7)).current;
    useEffect(() => {
      const v = videoRef.current;
      if (!v) return;
      // reduced-motion: show a static frame instead of playing footage
      if (prefersReduced) {try {v.pause();} catch (e) {}return;}
      const p = v.play();if (p && p.catch) p.catch(() => {});
    }, []);
    return (
      <h1 className="bigname bigname--video" aria-label={`${first} ${last}`}>
        <svg className="hero-vsvg" viewBox="0 0 1600 820" preserveAspectRatio="xMidYMid meet"
        role="img" aria-label={`${first} ${last}`}>
          <defs>
            <mask id={maskId}>
              <rect x="0" y="0" width="1600" height="820" fill="#000" />
              <text x="800" y="285" textAnchor="middle" dominantBaseline="middle"
              fontFamily="'Cinzel', serif" fontWeight="700" fontSize="240" letterSpacing="12" fill="#fff">{first}</text>
              <text x="800" y="600" textAnchor="middle" dominantBaseline="middle"
              fontFamily="'Cinzel', serif" fontWeight="700" fontSize="240" letterSpacing="12" fill="#fff">{last}</text>
            </mask>
          </defs>
          <foreignObject x="0" y="0" width="1600" height="820" mask={`url(#${maskId})`}>
            <video ref={videoRef} src={video} autoPlay={!prefersReduced} muted loop playsInline preload="auto"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center' }} />
          </foreignObject>
        </svg>
      </h1>);

  }

  function HomeHero({ first, last }) {
    return (
      <header className="hero hero--solid">
        <HeroDotsGrid />
        <HeroLines />
        <div className="shell hero__inner hero__content">
          <div className="hero__top">
            <span className="kicker">{H.hero.tagTop}</span>
            <span className="hero__role">{CFG.role} — <b>{CFG.city}</b></span>
          </div>
          {CFG.heroVideo ?
          <HeroVideoName first={first} last={last} video={CFG.heroVideo} /> :
          <h1 className="bigname">
              <span className="line"><HeroFill text={first} /></span>
              <span className="line"><HeroFill text={last} /></span>
            </h1>
          }
          <p className="hero__sub">{H.hero.subtitle}</p>
          <p className="hero__credential">{H.hero.credential}</p>
        </div>
      </header>);

  }

  function CtaPrincipal() {
    const k = H.cta;
    return (
      <section className="section section--tight">
        <div className="shell">
          <div className="card-glass cta-band reveal" style={{ padding: 'clamp(40px,6vw,72px)' }}>
            <span className="kicker" style={{ marginInline: 'auto', justifyContent: 'center' }}>{k.kicker}</span>
            <p className="lead" style={{ marginInline: 'auto', marginTop: 18, marginBottom: 30, textAlign: 'center', color: 'var(--text)' }}>{k.lead}</p>
            <WhatsAppButton label={k.button} />
          </div>
        </div>
      </section>);

  }

  function Sobre() {
    const s = H.sobre;
    return (
      <section className="section section-editorial" id="sobre">
        <div className="shell editorial-row">
          <div className="reveal"><span className="label-num">{s.label}</span></div>
          <div className="editorial-row__body reveal" data-d="1">
            <h2 className="headline-md">{s.headline}</h2>
            <p>{s.body}</p>
            <a className="text-link" href={s.link.href}>{s.link.label} <span className="arr">→</span></a>
          </div>
        </div>
      </section>);

  }

  function Numeros() {
    const s = H.stats;
    return (
      <section className="section section--tight">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 26 }}><span className="label-num">{s.label}</span></div>
          <div className="stats reveal" data-d="1">
            {s.items.map((it, i) =>
            <div className="stat" key={i}>
                <div className="stat__num">{it.num}<span className="u">{it.unit}</span></div>
                <div className="stat__label">{it.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>);

  }

  function Depoimentos() {
    const s = H.depoimentos;
    return (
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 'clamp(28px,4vw,48px)' }}>
            <span className="label-num">{s.label}</span>
            <h2 className="h-section">{s.headline}</h2>
          </div>
          <div className="quotes reveal" data-d="1">
            {s.items.map((q, i) => <QuoteCard key={i} q={q} />)}
          </div>
          <div className="reveal" data-d="2"><a className="text-link" href={s.link.href}>{s.link.label} <span className="arr">→</span></a></div>
        </div>
      </section>);

  }

  function NavGrid() {
    const items = NAV.filter((n) => n.id !== 'home');
    return (
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 'clamp(28px,4vw,48px)' }}>
            <span className="label-num">{H.navGrid.label}</span>
          </div>
          <div className="navgrid reveal" data-d="1">
            {items.map((n, i) =>
            <a className="navcard card-glass" key={n.id} href={n.href}>
                <span className="navcard__i">0{i + 1}</span>
                <span className="navcard__arr" aria-hidden="true">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="5" y1="19" x2="19" y2="5" /><polyline points="9 5 19 5 19 15" /></svg>
                </span>
                <span className="navcard__name">{n.label}</span>
                <span className="navcard__desc">{n.desc}</span>
              </a>
            )}
          </div>
        </div>
      </section>);

  }

  function HomeContent(props) {
    const t = props.t;
    const first = (t.first || '').toUpperCase();
    const last = (t.last || '').toUpperCase();
    return (
      <React.Fragment>
        <HomeHero first={first} last={last} />
        <CtaPrincipal />
        <Sobre />
        <Numeros />
        <Depoimentos />
        <NavGrid />
      </React.Fragment>);

  }

  mountPage('home', (t) => <HomeContent t={t} />, C.bgWords.home);
})();