// Hero.jsx — with canvas botanical particles + parallax depth layers

const BIO_IMG = "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/7b1350d2-5543-4add-13f7-272003a23800/public";
const WORK_IMG = "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/e0f17ae9-c2ad-43be-c515-691856a2a400/public";

/* ── Leaf SVG ── */
function Leaf({ size = 120, style = {}, rotate = 0 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="currentColor" aria-hidden="true">
      <path d="M60 10 C90 10, 110 40, 60 110 C10 40, 30 10, 60 10 Z" opacity="0.7" />
      <line x1="60" y1="14" x2="60" y2="105" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.5" />
      <line x1="60" y1="38" x2="45" y2="54" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
      <line x1="60" y1="52" x2="74" y2="66" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
      <line x1="60" y1="66" x2="47" y2="79" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
    </svg>);

}

/* ── Canvas Particles ── */
function useParticles(canvasRef) {
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf;
    let W,H,particles = [];

    const resize = () => {
      W = canvas.width = canvas.offsetWidth;
      H = canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener("resize", resize);

    // Particle types: dot, leaf-outline, petal
    const COLORS = ["rgba(143,162,135,", "rgba(201,169,110,", "rgba(199,211,194,"];

    function makeParticle() {
      const type = Math.random() < 0.5 ? "dot" : "leaf";
      const c = COLORS[Math.floor(Math.random() * COLORS.length)];
      return {
        x: Math.random() * W,
        y: Math.random() * H,
        vx: (Math.random() - 0.5) * 0.35,
        vy: -Math.random() * 0.4 - 0.1,
        size: type === "dot" ? Math.random() * 3 + 1.5 : Math.random() * 18 + 10,
        alpha: Math.random() * 0.35 + 0.08,
        rot: Math.random() * Math.PI * 2,
        rotV: (Math.random() - 0.5) * 0.008,
        type, color: c,
        life: 0, maxLife: Math.random() * 500 + 300
      };
    }

    for (let i = 0; i < 38; i++) particles.push(makeParticle());

    function drawLeaf(ctx, x, y, size, rot, alpha, color) {
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(rot);
      ctx.globalAlpha = alpha;
      ctx.strokeStyle = color + "1)";
      ctx.lineWidth = 0.8;
      ctx.beginPath();
      ctx.moveTo(0, -size / 2);
      ctx.bezierCurveTo(size * 0.6, -size * 0.3, size * 0.6, size * 0.3, 0, size / 2);
      ctx.bezierCurveTo(-size * 0.6, size * 0.3, -size * 0.6, -size * 0.3, 0, -size / 2);
      ctx.stroke();
      // vein
      ctx.beginPath();
      ctx.moveTo(0, -size / 2);
      ctx.lineTo(0, size / 2);
      ctx.globalAlpha = alpha * 0.5;
      ctx.stroke();
      ctx.restore();
    }

    function tick() {
      ctx.clearRect(0, 0, W, H);
      particles.forEach((p, i) => {
        p.x += p.vx;p.y += p.vy;p.rot += p.rotV;p.life++;
        const fade = p.life < 60 ? p.life / 60 : p.life > p.maxLife - 60 ? (p.maxLife - p.life) / 60 : 1;
        const a = p.alpha * fade;
        if (p.type === "dot") {
          ctx.save();
          ctx.globalAlpha = a;
          ctx.fillStyle = p.color + "1)";
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
        } else {
          drawLeaf(ctx, p.x, p.y, p.size, p.rot, a, p.color);
        }
        if (p.life >= p.maxLife || p.y < -20) {
          particles[i] = { ...makeParticle(), x: Math.random() * W, y: H + 10 };
        }
      });
      raf = requestAnimationFrame(tick);
    }
    tick();
    return () => {cancelAnimationFrame(raf);window.removeEventListener("resize", resize);};
  }, []);
}

/* ── Parallax hook ── */
function useParallax() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    const botanicals = document.querySelectorAll(".botanical-parallax");
    const onScroll = () => {
      const y = window.scrollY;
      botanicals.forEach((b, i) => {
        const speed = i % 2 === 0 ? 0.15 : 0.22;
        b.style.transform = `translateY(${y * speed}px)`;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return ref;
}

function Hero() {
  const canvasRef = React.useRef(null);
  const imgRef = React.useRef(null);
  const sectionRef = useParallax();

  useParticles(canvasRef);

  // Subtle 3D tilt on image
  React.useEffect(() => {
    const el = imgRef.current;if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.transform = `perspective(900px) rotateY(${x * 5}deg) rotateX(${-y * 4}deg)`;
    };
    const onLeave = () => {el.style.transform = "perspective(900px) rotateY(0) rotateX(0)";};
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {el.removeEventListener("mousemove", onMove);el.removeEventListener("mouseleave", onLeave);};
  }, []);

  return (
    <section id="hero" ref={sectionRef} style={{ position: "relative" }}>
      {/* Particle canvas */}
      <canvas ref={canvasRef} id="hero-canvas" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 1, opacity: 0.6 }} />

      {/* Botanical layers */}
      <div className="botanical botanical-parallax" style={{ top: "6%", left: "-3%", color: "var(--green-soft)", opacity: 0.45 }}>
        <Leaf size={240} rotate={-25} />
      </div>
      <div className="botanical botanical-parallax" style={{ bottom: "8%", left: "8%", color: "var(--green-light)", opacity: 0.25 }}>
        <Leaf size={130} rotate={18} />
      </div>
      <div className="botanical botanical-parallax" style={{ top: "20%", right: "-2%", color: "var(--green-soft)", opacity: 0.3 }}>
        <Leaf size={190} rotate={125} />
      </div>
      <div className="botanical botanical-parallax" style={{ bottom: "20%", right: "4%", color: "var(--green-light)", opacity: 0.2 }}>
        <Leaf size={100} rotate={60} />
      </div>

      <div className="hero-grid" style={{ position: "relative", zIndex: 2 }}>
        {/* ── Text ── */}
        <div className="hero-text">
          <div className="hero-eyebrow eyebrow reveal">STUDIO DE SOBRANCELHAS · GOIÂNIA</div>

          <h1 className="hero-title reveal d1">
            Sobrancelhas desenhadas<br />
            para revelar sua{" "}
            <span className="hl" style={{ fontSize: "55px" }}>beleza natural.</span>
          </h1>

          {/* Animated gold line */}
          <div className="gold-animated-line reveal d2" />

          <p className="hero-sub reveal d2">
            Design personalizado, mapeamento facial e técnicas precisas
            para realçar a harmonia do seu rosto com naturalidade e cuidado.
          </p>

          <div className="hero-btns reveal d3">
            <a href={WA_LINK} target="_blank" rel="noopener" className="btn-primary">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
              </svg>
              Agendar pelo WhatsApp
            </a>
            <a href="#results" className="btn-outline">Ver resultados →</a>
          </div>

          <div className="reveal d4" style={{ display: "flex", gap: 36, marginTop: 52, paddingTop: 40, borderTop: "1px solid var(--gold-bd)" }}>
            {[["100+", "Clientes atendidas"], ["2 anos", "De experiência"], ["98%", "Satisfação"]].map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: "var(--font-ed)", fontSize: 30, fontWeight: 500, color: "var(--green-dark)", lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 12, color: "var(--text-lt)", marginTop: 4, letterSpacing: "0.04em" }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* ── Image ── */}
        <div className="hero-img-wrap reveal-right d1" ref={imgRef} style={{ transition: "transform 0.35s ease" }}>
          <div className="hero-frame">
            <img src={BIO_IMG} alt="Beatriz — Essenza Glow" className="hero-photo" />
            <div className="hero-badge">
              <div className="hero-badge-n">✦</div>
              <div className="hero-badge-t">Design Personalizado</div>
            </div>
            <div className="hero-badge2">
              <div className="hero-badge2-t">Especialidade</div>
              <div className="hero-badge2-v">Brow Design</div>
            </div>
          </div>
          {/* Gold corner dots */}
          {[["−18px", "−18px"], ["−18px", "calc(100% + 4px)"], ["calc(100% + 4px)", "−18px"], ["calc(100% + 4px)", "calc(100% + 4px)"]].map(([t, l], i) =>
          <div key={i} style={{ position: "absolute", top: t, left: l, width: 8, height: 8, borderRadius: "50%", background: "var(--gold)", opacity: 0.65, zIndex: 3 }} />
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero, Leaf, BIO_IMG, WORK_IMG });