// components.jsx — small shared UI primitives

const Placeholder = ({ label, className = '', style = {} }) => (
  <div className={`placeholder ${className}`} style={style}>
    <span className="placeholder__label">{label}</span>
  </div>
);

const Pill = ({ children, variant = 'default' }) => (
  <span className={`pill ${variant === 'warn' ? 'pill--warn' : ''}`}>
    <span className="dot"></span>
    {children}
  </span>
);

const Eyebrow = ({ children, center = false }) => (
  <span className={`eyebrow ${center ? 'eyebrow--center' : ''}`}>{children}</span>
);

const Check = () => <span className="check">✓</span>;

// Reveal-on-scroll wrapper
const Reveal = ({ children, delay = 0 }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add('is-visible'), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
};

// Countdown
const Countdown = ({ target }) => {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  const cell = (n, l) => (
    <div className="countdown__cell" key={l}>
      <div className="countdown__num">{String(n).padStart(2, '0')}</div>
      <div className="countdown__label">{l}</div>
    </div>
  );
  return (
    <div className="countdown">
      {cell(days, 'días')}
      {cell(hours, 'horas')}
      {cell(mins, 'min')}
      {cell(secs, 'seg')}
    </div>
  );
};

// Compact countdown for the nav bar — replaces the brand mark+name.
// Format: 02d : 14h : 32m : 18s — separators are tabular, monospace.
const NavCountdown = ({ target }) => {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  const pad = (n) => String(n).padStart(2, '0');
  const unit = (n, l, key) => (
    <span className="nav-countdown__unit" key={key}>
      <span className="nav-countdown__n">{pad(n)}</span>
      <span className="nav-countdown__l">{l}</span>
    </span>
  );
  return (
    <div className="nav-countdown" aria-label="Tiempo restante para el workshop">
      <span className="nav-countdown__live" aria-hidden="true">
        <span className="nav-countdown__live-dot"></span>
        <span className="nav-countdown__live-text">Empieza en</span>
      </span>
      <span className="nav-countdown__row">
        {unit(days, 'd', 'd')}
        <span className="nav-countdown__sep">:</span>
        {unit(hours, 'h', 'h')}
        <span className="nav-countdown__sep">:</span>
        {unit(mins, 'm', 'm')}
        <span className="nav-countdown__sep">:</span>
        {unit(secs, 's', 's')}
      </span>
    </div>
  );
};

// FAQ Item
const FaqItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq__item ${open ? 'faq__item--open' : ''}`}>
      <button className="faq__q" onClick={() => setOpen(o => !o)}>
        <span>{q}</span>
        <span className="faq__icon">+</span>
      </button>
      <div className="faq__a">{a}</div>
    </div>
  );
};

Object.assign(window, { Placeholder, Pill, Eyebrow, Check, Reveal, Countdown, NavCountdown, FaqItem });