// ============================================================
// OSCILADOR — primitives & shared components
// Exposes globals: Logo, WaveSVG, Marquee, Reveal, Photo,
// Icon, SectionHead, Eyebrow
// ============================================================

// ──────────────── Wave SVG (used in logo, dividers, hero bg)
function WaveSVG({ stroke = "currentColor", strokeWidth = 1.4, width = 800, height = 40 }) {
  // sinusoidal — single period repeats across width
  const periods = 4;
  const amp = height * 0.35;
  const mid = height / 2;
  const step = width / (periods * 2);
  let d = `M 0 ${mid}`;
  for (let i = 0; i < periods * 2; i++) {
    const x1 = step * i + step / 2;
    const y1 = i % 2 === 0 ? mid - amp : mid + amp;
    const x2 = step * (i + 1);
    d += ` Q ${x1} ${y1}, ${x2} ${mid}`;
  }
  return (
    <svg viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <path d={d} fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" />
    </svg>
  );
}

// ──────────────── Logo (icon + wordmark)
function LogoIcon({ size = 36 }) {
  return (
    <div className="logo-mark" style={{ width: size, height: size }}>
      <img src="assets/logo-icon.png" alt="Oscilador Academy" />
    </div>
  );
}

function Logo({ size = 36, compact = false }) {
  return (
    <a href="#top" className="logo" aria-label="Oscilador Academy">
      <LogoIcon size={size} />
      {!compact && (
        <span className="logo-text">
          <span>Oscilador</span>
          <span>Academy</span>
        </span>
      )}
    </a>
  );
}

// ──────────────── Eyebrow label
function Eyebrow({ children, num }) {
  return (
    <div className="eyebrow">
      {num && <span style={{ color: "rgba(184,184,184,0.5)" }}>{num}</span>}
      <span>{children}</span>
    </div>
  );
}

// ──────────────── Section header with eyebrow + title + optional sub
function SectionHead({ eyebrow, num, title, sub, align = "left", titleClass = "h-3" }) {
  return (
    <div className="sec-head">
      <div>
        {(eyebrow || num) && <Eyebrow num={num}>{eyebrow}</Eyebrow>}
        <h2 className={`display ${titleClass}`} style={{ marginTop: 18 }}>{title}</h2>
      </div>
      {sub && <p className="muted" style={{ fontSize: 17, maxWidth: "44ch", lineHeight: 1.5 }}>{sub}</p>}
    </div>
  );
}

// ──────────────── Marquee (technical band of data)
function Marquee({ items }) {
  // duplicate for seamless loop
  const all = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {all.map((it, i) => (
          <span className="marquee-item" key={i}>
            <span className="dot" />
            <span>{it}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ──────────────── Reveal-on-scroll
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {}, ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add("in");
          io.unobserve(el);
        }
      });
    }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      className={`reveal ${className}`}
      style={{ ...style, "--rd": `${delay}ms` }}
      {...rest}
    >
      {children}
    </As>
  );
}

// ──────────────── Photo placeholder (rider-style annotated empty state)
function Photo({ id = "IMG-001", caption = "Placeholder", src, className = "", style = {}, aspect, children }) {
  const hasImg = Boolean(src);
  const s = {
    ...style,
    background: "linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)",
    border: "1px solid rgba(255,255,255,0.12)",
    borderRadius: "var(--r-4)",
  };
  if (aspect) s.aspectRatio = aspect;
  return (
    <div className={`ph ${hasImg ? "has-img" : ""} ${className}`} style={s}>
      {hasImg ? (
        <img
          src={src}
          alt={caption}
          loading="lazy"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "saturate(0.92) contrast(1.08)" }}
        />
      ) : (
        <div className="ph-cross">
          <svg viewBox="0 0 100 100" width="56" height="56" style={{ opacity: 0.6 }}>
            <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="1" />
            <line x1="100" y1="0" x2="0" y2="100" stroke="currentColor" strokeWidth="1" />
            <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.4" />
          </svg>
        </div>
      )}
      <div className="ph-label">
        <span style={{ fontSize: "13px", opacity: 0.6, display: "block" }}>{caption}</span>
      </div>
      {children}
    </div>
  );
}

// ──────────────── Arrow glyph
function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  );
}

// ──────────────── Cal.com booking URLs — one per event type, easy to replace
const CAL_LINKS = {
  practicaDj1h:         "https://cal.com/oscilador-ktd9dy/practica-dj-1-hora",
  practicaDj2h:         "https://cal.com/oscilador-ktd9dy/practica-dj-2-horas",
  practicaDj2p:         "https://cal.com/oscilador-ktd9dy/practica-dj-2-personas-1-hora",
  claseSesionGuiada:    "https://cal.com/oscilador-ktd9dy/clase-sesion-guiada",
  grabacionSet:         "https://cal.com/oscilador-ktd9dy/grabacion-de-set",
  membresiaPlanMensual: "https://wa.me/59167165251?text=Hola%2C%20quiero%20consultar%20sobre%20membres%C3%ADas",
};
const CAL_PRACTICA_URL = CAL_LINKS.practicaDj1h; // alias — backward compat

// ──────────────── WhatsApp glyph (minimal)
function WhatsAppIcon({ size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M19.05 4.91A10 10 0 0 0 4.07 18.4L3 22l3.69-1.06A10 10 0 1 0 19.05 4.91Zm-7.04 15.42a8.34 8.34 0 0 1-4.25-1.17l-.3-.18-2.18.63.65-2.12-.2-.32a8.36 8.36 0 1 1 6.28 3.16Zm4.79-6.27c-.26-.13-1.55-.76-1.79-.85s-.42-.13-.59.13-.68.85-.83 1.02-.31.2-.57.07a6.83 6.83 0 0 1-2.01-1.24 7.59 7.59 0 0 1-1.39-1.74c-.15-.26 0-.4.12-.53s.26-.31.39-.46a1.78 1.78 0 0 0 .26-.44.48.48 0 0 0 0-.46c-.07-.13-.59-1.41-.8-1.93s-.42-.43-.59-.44h-.5a.96.96 0 0 0-.69.32 2.91 2.91 0 0 0-.91 2.17 5.06 5.06 0 0 0 1.06 2.7 11.55 11.55 0 0 0 4.44 3.93 14.91 14.91 0 0 0 1.48.55 3.56 3.56 0 0 0 1.64.1 2.68 2.68 0 0 0 1.75-1.23 2.16 2.16 0 0 0 .15-1.23c-.07-.11-.24-.18-.5-.31Z"/>
    </svg>
  );
}

// ──────────────── Section divider (thin line between sections)
function SectionDivider({ target = "#top" }) {
  return (
    <div className="container">
      <div className="sec-div" style={{ borderBottom: "none", paddingBottom: 0 }}>
        <div style={{ borderTop: "1px solid var(--line)" }} />
      </div>
    </div>
  );
}

Object.assign(window, {
  CAL_LINKS,
  CAL_PRACTICA_URL,
  WaveSVG,
  LogoIcon,
  Logo,
  Eyebrow,
  SectionHead,
  SectionDivider,
  Marquee,
  Reveal,
  Photo,
  Arrow,
  WhatsAppIcon,
});