/* global React */
const { useState, useEffect, useRef } = React;

/* ----------------------------------------------------------
   Rooster silhouette — composed shapes, unified fill.
   Proud gamecock facing right, tail sweeping up-left.
---------------------------------------------------------- */
function Rooster({ size = 80, color = "currentColor", style }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={style} aria-hidden="true">
      <g fill={color} stroke={color} strokeLinejoin="round" strokeLinecap="round">
        {/* tail feathers — long sweeping crescents */}
        <path d="M44 70 C 30 64 16 50 12 26 C 24 38 30 44 40 54 C 36 42 34 32 38 20 C 46 34 50 46 52 60 Z" strokeWidth="1.5" />
        <path d="M46 66 C 34 62 22 54 18 38 C 30 48 38 52 48 60 Z" strokeWidth="1.5" />
        {/* body */}
        <ellipse cx="60" cy="68" rx="27" ry="21" />
        {/* breast lift toward neck */}
        <path d="M78 56 C 86 60 88 72 84 84 C 78 80 74 70 74 60 Z" />
        {/* neck */}
        <path d="M70 54 C 70 40 76 30 86 28 C 92 30 92 42 86 50 C 82 54 76 56 70 60 Z" />
        {/* head */}
        <circle cx="90" cy="30" r="9" />
        {/* beak */}
        <path d="M98 27 L 110 30 L 98 34 Z" />
        {/* comb (three bumps) */}
        <path d="M82 21 C 83 15 88 14 89 19 C 91 13 96 13 96 19 C 99 14 103 16 101 22 C 98 25 86 25 82 24 Z" />
        {/* wattle */}
        <path d="M90 38 C 94 40 95 47 91 49 C 88 47 88 41 90 38 Z" />
        {/* thigh */}
        <ellipse cx="60" cy="84" rx="11" ry="12" />
        {/* legs */}
        <path d="M55 92 L 53 110 L 45 113 M 53 110 L 55 114 M 53 110 L 61 113" strokeWidth="3" fill="none" />
        <path d="M67 92 L 69 110 L 61 113 M 69 110 L 71 114 M 69 110 L 77 113" strokeWidth="3" fill="none" />
      </g>
    </svg>
  );
}

/* ----------------------------------------------------------
   Logo oficial (imagen) — escudo Rancho La Vega
---------------------------------------------------------- */
function LogoImg({ height = 48, className = "", style }) {
  return (
    <img src="logo.png" alt="Rancho La Vega" className={"logo-img " + className}
      style={{ height, width: "auto", ...style }} draggable="false" />
  );
}

/* Emblema = logo oficial (mantiene API previa) */
function Emblem({ size = 150 }) {
  return <LogoImg height={size} className="emblem-logo" style={{ display: "block" }} />;
}

/* ----------------------------------------------------------
   Reveal-on-scroll hook
---------------------------------------------------------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.add("in");
            io.unobserve(en.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

/* Section heading with flourishes */
function SectionHead({ children, className = "" }) {
  return (
    <div className={"section-head reveal " + className}>
      <span className="flourish" />
      <h2 className="gold-text">{children}</h2>
      <span className="flourish right" />
    </div>
  );
}

Object.assign(window, { Rooster, Emblem, LogoImg, useReveal, SectionHead });