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

// ─────────────────────────────────────────────────────────────────────
// Vinyl 3D — CSS only, with tone-arm
// ─────────────────────────────────────────────────────────────────────
function Vinyl3D({ name }) {
  return (
    <div className="vinyl-wrap">
      <div className="vinyl">
        <div className="disc"></div>
        <div className="label">
          <div>33⅓ RPM</div>
          <div className="hole"></div>
          <div className="big">{name}</div>
          <div>side a · 2026</div>
        </div>
      </div>
      <div className="tonearm" aria-hidden="true"></div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// Background floating shapes
// ─────────────────────────────────────────────────────────────────────
function BgShapes() {
  return (
    <div className="bg-shapes" aria-hidden="true">
      <div className="grid"></div>
      <div className="shape disc"></div>
      <div className="shape bar"></div>
      <div className="shape dot"></div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// Section header
// ─────────────────────────────────────────────────────────────────────
function SectionHd({ num, title, sub, accentWord }) {
  // accentWord: piece of `title` rendered as <em>
  let titleNode = title;
  if (accentWord && title.includes(accentWord)) {
    const parts = title.split(accentWord);
    titleNode = (
      <>
        {parts[0]}
        <em>{accentWord}</em>
        {parts[1]}
      </>
    );
  }
  return (
    <div className="section-hd">
      <span className="num">
        <span>{num}</span>
      </span>
      <h2>{titleNode}</h2>
      {sub ? <span className="sub">{sub}</span> : null}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 3D tilt card (mouse parallax)
// ─────────────────────────────────────────────────────────────────────
function TiltCard({ children, intensity = 1, className = "", ...rest }) {
  const ref = useRef(null);
  const onMove = (e) => {
    if (!ref.current || intensity <= 0) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const ry = (px - 0.5) * 14 * intensity;
    const rx = -(py - 0.5) * 10 * intensity;
    ref.current.style.setProperty("--rx", `${rx}deg`);
    ref.current.style.setProperty("--ry", `${ry}deg`);
  };
  const reset = () => {
    if (!ref.current) return;
    ref.current.style.setProperty("--rx", `0deg`);
    ref.current.style.setProperty("--ry", `0deg`);
  };
  return (
    <div
      ref={ref}
      className={`tilt-3d ${className}`}
      onMouseMove={onMove}
      onMouseLeave={reset}
      {...rest}
    >
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// Format date
// ─────────────────────────────────────────────────────────────────────
function fmtDate(iso, lang) {
  const d = new Date(iso + "T00:00:00");
  const months = lang === "fr"
    ? ["JAN","FÉV","MAR","AVR","MAI","JUIN","JUIL","AOÛT","SEPT","OCT","NOV","DÉC"]
    : ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
  return { day: String(d.getDate()).padStart(2, "0"), mo: months[d.getMonth()], year: d.getFullYear() };
}

// expose
Object.assign(window, { Vinyl3D, BgShapes, SectionHd, TiltCard, fmtDate });