// hero.jsx — three hero variants + blueprint tower crane.  Exports: Hero → window
const { useState: _useState } = React;

const WA_HERO = "https://wa.me/5491150522993?text=" +
encodeURIComponent("Hola Grupo Remodelar 👷 quisiera pedir un presupuesto para mi obra.");

// ── Blueprint tower crane (geometric line drawing, gently animated) ──────────
function Crane() {
  const S = { stroke: "rgba(255,255,255,0.26)", strokeWidth: 1.5, fill: "none" };
  const A = { stroke: "var(--gr-yellow)", strokeWidth: 1.8, fill: "none" };
  return (
    <svg className="crane" viewBox="0 0 600 820" preserveAspectRatio="xMidYMax meet" aria-hidden="true">
      {/* base / footings */}
      <g {...S}>
        <line x1="114" y1="806" x2="70" y2="816" />
        <line x1="146" y1="806" x2="190" y2="816" />
        <rect x="58" y="816" width="28" height="6" />
        <rect x="176" y="816" width="28" height="6" />
        {/* mast */}
        <line x1="114" y1="300" x2="114" y2="806" />
        <line x1="146" y1="300" x2="146" y2="806" />
        {[348, 396, 444, 492, 540, 588, 636, 684, 732, 780].map((y) =>
        <g key={y}>
            <line x1="114" y1={y} x2="146" y2={y} />
            <line x1="114" y1={y} x2="146" y2={y - 48} />
            <line x1="146" y1={y} x2="114" y2={y - 48} />
          </g>
        )}
      </g>

      {/* upper assembly sways slightly */}
      <g className="swing">
        <g {...S}>
          {/* apex */}
          <line x1="118" y1="300" x2="130" y2="206" />
          <line x1="142" y1="300" x2="130" y2="206" />
          {/* operator cab */}
          <rect x="150" y="304" width="30" height="26" />
          {/* counter-jib + counterweight */}
          <line x1="130" y1="300" x2="26" y2="300" />
          <line x1="130" y1="318" x2="40" y2="318" />
          <line x1="26" y1="300" x2="40" y2="318" />
          <rect x="14" y="300" width="26" height="36" fill="rgba(255,255,255,0.10)" />
          {/* main jib — top + bottom chord + truss */}
          <line x1="130" y1="300" x2="560" y2="300" />
          <line x1="160" y1="330" x2="540" y2="320" />
          {[200, 260, 320, 380, 440, 500].map((x, i) =>
          <g key={x}>
              <line x1={x} y1="300" x2={x} y2={328 - i} />
              <line x1={x} y1="300" x2={x + 60} y2={327 - i} />
            </g>
          )}
        </g>
        {/* pendant tie-bars */}
        <g {...S} stroke="rgba(255,255,255,0.4)">
          <line x1="130" y1="206" x2="300" y2="300" />
          <line x1="130" y1="206" x2="520" y2="300" />
          <line x1="130" y1="206" x2="40" y2="300" />
        </g>
        {/* beacon */}
        <circle cx="130" cy="200" r="3.5" fill="var(--gr-red)" />

        {/* trolley slides along the jib; hook swings beneath it */}
        <g className="trolley">
          <rect x="486" y="300" width="30" height="13" {...A} fill="rgba(255,196,0,0.14)" />
          <g className="hookgrp">
            <line x1="501" y1="313" x2="501" y2="470" {...A} />
            <path d="M495 470 h12 v10 a6 6 0 0 1 -12 0" {...A} />
            <path d="M501 488 q-9 4 -3 12" {...A} />
          </g>
        </g>
      </g>
    </svg>);

}

// ── shared bits ──────────────────────────────────────────────────────────────
function HeroEyebrow({ pulse = true }) {
  return (
    <div className="hero-eyebrow">
      <span className={pulse ? "dot pulse" : "dot"} />
      <span className="eyebrow" style={{ opacity: "0.73", fontSize: "15px" }}>Construcción · Remodelación · Flipping · CABA y GBA</span>
    </div>);

}

function HeroActions() {
  return (
    <div className="hero-actions">
      <a className="btn solid" href={WA_HERO} target="_blank" rel="noopener">Cotización gratis <span className="arrow">→</span></a>
      <a className="btn ghost" href={WA_HERO} target="_blank" rel="noopener">WhatsApp directo</a>
    </div>);

}

function HeroStats() {
  return (
    <div className="hero-stats">
      <div className="stat"><div className="v"><Counter value={10} suffix="" />+</div><div className="l">Años de oficio</div></div>
      <div className="stat"><div className="v"><Counter value={240} />+</div><div className="l">Obras entregadas</div></div>
      <div className="stat"><div className="v"><em><Counter value={18} suffix="k" /></em></div><div className="l">m² intervenidos</div></div>
    </div>);

}

function ScrollHint() {
  return (
    <div className="scroll-hint" data-speed="-0.04">
      <span className="bar" /> Desplazá para construir
    </div>);

}

// ── Animated architectural blueprint (draws itself, loops) ───────────────────
function BlueprintMotion() {
  // pathLength="1" normalizes the draw animation across every shape.
  const P = { pathLength: 1, className: "draw" };
  const d = (i) => ({ ...P, style: { animationDelay: (i * 0.22).toFixed(2) + "s" } });
  return (
    <div className="bp-stage" data-speed="0.05" aria-hidden="true">
      <svg className="bp" viewBox="0 0 1080 660" preserveAspectRatio="xMidYMid meet">
        {/* dimension line (top) */}
        <g className="dim">
          <line x1="120" y1="70" x2="960" y2="70" {...d(0)} />
          <line x1="120" y1="60" x2="120" y2="80" {...d(0)} />
          <line x1="540" y1="60" x2="540" y2="80" {...d(1)} />
          <line x1="960" y1="60" x2="960" y2="80" {...d(2)} />
          <text x="300" y="56">6.40 m</text>
          <text x="720" y="56">6.40 m</text>
        </g>
        {/* outer walls */}
        <rect x="120" y="120" width="840" height="440" {...d(1)} />
        {/* partitions */}
        <line x1="540" y1="120" x2="540" y2="560" {...d(3)} />
        <line x1="540" y1="320" x2="960" y2="320" {...d(4)} />
        <line x1="120" y1="360" x2="360" y2="360" {...d(5)} />
        <line x1="360" y1="120" x2="360" y2="360" {...d(5)} />
        {/* door swings */}
        <path d="M360 300 A60 60 0 0 1 420 360" {...d(6)} />
        <path d="M540 200 A56 56 0 0 0 596 256" {...d(6)} />
        <path d="M700 320 A52 52 0 0 1 752 372" {...d(7)} />
        {/* fixtures */}
        <g className="fix">
          <rect x="170" y="170" width="120" height="70" {...d(7)} />{/* sofa */}
          <circle cx="430" cy="245" r="34" {...d(8)} />{/* table */}
          <rect x="600" y="150" width="110" height="130" {...d(8)} />{/* bed */}
          <rect x="800" y="150" width="110" height="40" {...d(9)} />{/* closet */}
          <rect x="600" y="380" width="150" height="40" {...d(9)} />{/* counter */}
          <circle cx="860" cy="430" r="26" {...d(10)} />{/* sink */}
          {/* stair */}
          <g {...d(11)}>
            <rect x="180" y="430" width="150" height="90" pathLength={1} className="draw" style={{ animationDelay: "2.6s" }} />
            <line x1="180" y1="445" x2="330" y2="445" />
            <line x1="180" y1="460" x2="330" y2="460" />
            <line x1="180" y1="475" x2="330" y2="475" />
            <line x1="180" y1="490" x2="330" y2="490" />
            <line x1="180" y1="505" x2="330" y2="505" />
          </g>
        </g>
        {/* scanning sweep */}
        <line className="sweep" x1="120" y1="100" x2="120" y2="580" />
      </svg>
    </div>);

}

// ── Variant A — blueprint ─────────────────────────────────────────────────────
function HeroA() {
  return (
    <section className="hero hero-a" data-screen-label="Hero A" style={{ gap: "0px", padding: "142px 28px 90px" }}>
      <BlueprintMotion />
      <div className="blueprint-grid" data-speed="0.06" />
      <div className="crane-stage" data-speed="0.12"><Crane /></div>
      <div className="tech-note" style={{ top: "26%", left: "6%" }} data-speed="-0.1">
        <span className="tick">+</span> ESC 1:50 · PROYECTO EN CURSO
      </div>
      <div className="tech-note" style={{ bottom: "24%", right: "8%" }} data-speed="0.08">
        N 34°36′ · OBRA #001 <span className="tick">+</span>
      </div>
      <div className="wrap">
        <HeroEyebrow />
        <h1>
          <span className="h1-plain">Construcción y <span className="ya">remodelación.</span></span>
        </h1>
        <p className="sub">Somos los profesionales que necesitás para tu nueva obra.</p>
        <p className="sub-detail">Construcción y remodelación integral de propiedades residenciales y comerciales en CABA y GBA.</p>
        <HeroActions />
      </div>
      <ScrollHint />
    </section>);

}

// ── Variant B — split (with "obra en vivo" video module) ──────────────────────
function TimeCode() {
  const [s, setS] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setS((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const mm = String(Math.floor(s / 60)).padStart(2, "0");
  const ss = String(s % 60).padStart(2, "0");
  return <span className="tc">{mm}:{ss}:00</span>;
}

function VideoObra() {
  const [src, setSrc] = React.useState(null);
  const inputRef = React.useRef(null);
  const vidRef = React.useRef(null);
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    setSrc(URL.createObjectURL(f));
  };
  React.useEffect(() => {
    if (src && vidRef.current) {vidRef.current.load();const p = vidRef.current.play();if (p && p.catch) p.catch(() => {});}
  }, [src]);
  return (
    <div className="hero-video">
      {src && <video ref={vidRef} src={src} autoPlay muted loop playsInline />}
      {!src &&
      <div className="vid-screen">
          <div className="blueprint-grid" style={{ opacity: .3 }} />
          <div className="vid-crane"><Crane /></div>
          <div className="vid-scan" />
          <div className="vid-lines" />
        </div>
      }
      <div className="vid-ui">
        <div className="vid-top">
          <span className="rec"><i /> {src ? "Reproduciendo" : "Rec · Obra en vivo"}</span>
          <TimeCode />
        </div>
        <div className="vid-bottom">
          <div className="meter"><span /></div>
          <button className="vid-btn" type="button" data-hot onClick={() => inputRef.current && inputRef.current.click()}>
            ▶ {src ? "Cambiar video" : "Subir video de tu obra"}
          </button>
        </div>
      </div>
      <input ref={inputRef} type="file" accept="video/*" style={{ display: "none" }} onChange={onFile} />
    </div>);

}

function HeroB() {
  return (
    <section className="hero hero-b" data-screen-label="Hero B">
      <div className="split">
        <div className="left">
          <HeroEyebrow />
          <h1>
            <span className="line-mask"><span>Tu obra,</span></span>
            <span className="line-mask" data-d="1"><span>de principio</span></span>
            <span className="line-mask" data-d="2"><span>a <span className="yb">fin.</span></span></span>
          </h1>
          <p className="sub">Gestión controlada de punta a punta: profesionalismo, control de obra y
            comunicación fluida. Presupuestos detallados, contratos transparentes y reglas claras.</p>
          <HeroActions />
        </div>
        <div className="right">
          <VideoObra />
        </div>
      </div>
    </section>);

}

// ── Variant C — industrial marquee ────────────────────────────────────────────
function Marquee({ where }) {
  const words = ["Remodelación", "Construcción", "Flipping", "Ampliaciones", "Quinchos", "Dirección de obra"];
  const seq = [...words, ...words, ...words, ...words];
  return (
    <div className={`marquee ${where}`} aria-hidden="true">
      <div className="track">{seq.map((w, i) => <span key={i}>{w} —</span>)}</div>
    </div>);

}

function HeroC() {
  return (
    <section className="hero hero-c" data-screen-label="Hero C">
      <div className="blueprint-grid" data-speed="0.05" />
      <Marquee where="top" />
      <Marquee where="bot" />
      <div className="center wrap">
        <HeroEyebrow />
        <h1>
          <span className="line-mask"><span>Remodelar</span></span>
          <span className="line-mask" data-d="1"><span>es nuestro <span className="ya">oficio.</span></span></span>
        </h1>
        <p className="sub">Construcción, remodelación y flipping inmobiliario en CABA y GBA.
          Tu inversión inteligente comienza acá.</p>
        <HeroActions />
      </div>
      <ScrollHint />
    </section>);

}

// ── Variant D — before/after wipe (foto antes/después) ───────────────────────
function HeroD() {
  return (
    <section className="hero hero-d" data-screen-label="Hero D">
      <div className="ba-stage" data-speed="0.04">
        <div className="ba-layer ba-after">
          <image-slot id="hero-despues" fit="cover" src="assets/hero-despues.jpeg" placeholder="Soltá la foto DESPUÉS (remodelado)"></image-slot>
        </div>
        <div className="ba-layer ba-before">
          <image-slot id="hero-antes" fit="cover" src="assets/hero-antes.jpeg" placeholder="Soltá la foto ANTES (a remodelar)"></image-slot>
        </div>
        <div className="ba-divider" aria-hidden="true"><span className="knob">↔</span></div>
        <span className="ba-tag ba-tag-before">Antes</span>
        <span className="ba-tag ba-tag-after">Después</span>
      </div>
      <div className="ba-scrim" />
      <div className="wrap">
        <HeroEyebrow />
        <h1>
          <span className="h1-plain">Construcción y <span className="ya">remodelación.</span></span>
        </h1>
        <p className="sub">Somos los profesionales que necesitás para tu nueva obra.</p>
        <p className="sub-detail">Construcción y remodelación integral de propiedades residenciales y comerciales en CABA y GBA.</p>
        <HeroActions />
      </div>
      <ScrollHint />
    </section>);

}

function Hero({ variant = "a" }) {
  if (variant === "b") return <HeroB />;
  if (variant === "c") return <HeroC />;
  if (variant === "d") return <HeroD />;
  return <HeroA />;
}

Object.assign(window, { Hero, Crane });