/* Content Sections — À Propos, Programme, Galerie */

/* ── Scroll reveal hook ── */
function useReveal(threshold = 0.15) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

/* ── Ornamental divider ── */
function Divider() {
  return (
    <div className="ornament-divider" aria-hidden="true">
      <span className="ornament-line"></span>
      <span className="ornament-diamond">◆</span>
      <span className="ornament-line"></span>
    </div>
  );
}

/* ═══════════════════════════════════════
   À PROPOS
   ═══════════════════════════════════════ */
function AboutSection() {
  const [ref, vis] = useReveal();
  return (
    <section id="apropos" className="section about-section" ref={ref}>
      <div className={`section-inner reveal ${vis ? 'visible' : ''}`}>
        <div className="section-header">
          <p className="section-overline">Bienvenue</p>
          <h2 className="section-title">À Propos de la Fête</h2>
          <Divider />
        </div>

        <div className="about-grid">
          {/* Decorative left panel */}
          <div className="about-visual">
            <div className="about-visual-frame">
              <div className="about-visual-inner">
                <div className="about-stat">
                  <span className="about-stat-number">12<sup>e</sup></span>
                  <span className="about-stat-label">Édition</span>
                </div>
                <div className="about-stat">
                  <span className="about-stat-number">1</span>
                  <span className="about-stat-label">Jours de fête</span>
                </div>
                <div className="about-stat">
                  <span className="about-stat-number">40+</span>
                  <span className="about-stat-label">Exposants</span>
                </div>
              </div>
            </div>
          </div>

          {/* Text card */}
          <div className="glass-card about-card">
            <p className="about-lead">
              Depuis plus d'une décennie, la <strong>Fête de la Fraise</strong> célèbre le terroir
              exceptionnel de <strong>Skikda</strong> et met en lumière les producteurs
              passionnés de la région.
            </p>
            <p className="about-body">
              Quatre jours d'immersion au cœur d'un festival unique : dégustations
              exclusives, ateliers artisanaux, spectacles vivants et rencontres
              chaleureuses sous le signe de la fraise.
            </p>
            <p className="about-body">
              Rejoignez des milliers de visiteurs pour une expérience sensorielle
              inoubliable — entre saveurs, couleurs et festivités.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════
   PROGRAMME
   ═══════════════════════════════════════ */
const PROGRAMME = [
  {
    jour: 'Jour J',
    date: 'Samedi 23 Mai',
    events: [
      { time: '10h00', title: 'Cérémonie d\'ouverture', desc: 'Discours officiels et coupe du ruban inaugural' },
      { time: '11h00', title: 'Marché des producteurs', desc: 'Découverte des variétés locales et dégustation libre' },
      { time: '13h00', title: 'Atelier confiture artisanale', desc: 'Apprenez les secrets des maîtres confituriers de Skikda' },
      { time: '14h00', title: 'Concours de la meilleure tarte', desc: 'Compétition ouverte aux amateurs et professionnels' },
      { time: '16h00', title: 'Clôture & feu d\'artifice', desc: 'Cérémonie de clôture suivie d\'un spectacle pyrotechnique' },
    ]

  },
];

function ProgrammeSection() {
  const [ref, vis] = useReveal();
  const [activeDay, setActiveDay] = React.useState(0);

  return (
    <section id="programme" className="section programme-section" ref={ref}>
      <div className={`section-inner reveal ${vis ? 'visible' : ''}`}>
        <div className="section-header">
          <p className="section-overline">Agenda</p>
          <h2 className="section-title">Programme</h2>
          <Divider />
        </div>

        {/* Day selector pills */}
        <div className="day-selector">
          {PROGRAMME.map((d, i) => (
            <button
              key={i}
              className={`day-pill ${i === activeDay ? 'active' : ''}`}
              onClick={() => setActiveDay(i)}
            >
              <span className="day-pill-jour">{d.jour}</span>
              <span className="day-pill-date">{d.date}</span>
            </button>
          ))}
        </div>

        {/* Events for selected day */}
        <div className="programme-events">
          {PROGRAMME[activeDay].events.map((ev, i) => (
            <div key={i} className="event-card glass-card" style={{ animationDelay: `${i * 0.15}s` }}>
              <div className="event-time">{ev.time}</div>
              <div className="event-info">
                <h3 className="event-title">{ev.title}</h3>
                <p className="event-desc">{ev.desc}</p>
              </div>
              <div className="event-indicator" aria-hidden="true"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════
   GALERIE
   ═══════════════════════════════════════ */
const GALLERY_ITEMS = [
  { label: 'La Récolte',       span: 'span-tall',  hue: 4,   image: '/uploads/recoltte.png' },
  { label: 'Saveurs de Skikda',span: 'span-wide',  hue: 30,  image: '/uploads/saveur.png' },
  { label: 'Artisanat Local',  span: '',           hue: 140, image: '/uploads/artisana.png' },
  { label: 'Musique & Danse',  span: '',           hue: 280, image: '/uploads/mujsique.png' },
  { label: 'Les Jardins',      span: 'span-wide',  hue: 100, image: '/uploads/jardin.png' },
  { label: 'Nuit Festive',     span: 'span-tall',  hue: 220, image: '/uploads/nuit.png' },
];

function GalleryItem({ label, span, hue, image }) {
  const [mouse, setMouse] = React.useState({ x: 50, y: 50 });
  const [hovered, setHovered] = React.useState(false);

  const handleMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setMouse({
      x: ((e.clientX - r.left) / r.width) * 100,
      y: ((e.clientY - r.top) / r.height) * 100,
    });
  };

  return (
    <div
      className={`gallery-item ${span}`}
      onMouseMove={handleMove}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* z-index 0 — gradient fallback always behind */}
      <div className="gallery-item-bg" style={{
        background: `linear-gradient(135deg, oklch(0.18 0.02 ${hue}) 0%, oklch(0.12 0.03 ${hue}) 100%)`,
        zIndex: 0,
      }}></div>

      {/* z-index 1 — real photo fills tile */}
      {image && (
        <img
          src={image}
          alt={label}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            borderRadius: 'inherit',
            display: 'block',
            zIndex: 1,
          }}
        />
      )}

      {/* z-index 1 — stripes only when no photo */}
      {!image && (
        <div className="gallery-item-stripes" aria-hidden="true"
          style={{ zIndex: 1 }}></div>
      )}

      {/* z-index 2 — dark overlay so label stays readable over photo */}
      {image && (
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          background: 'linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 50%, transparent 100%)',
          pointerEvents: 'none',
        }} />
      )}

      {/* z-index 3 — cursor spotlight */}
      <div className="gallery-spotlight" style={{
        opacity: hovered ? 1 : 0,
        background: `radial-gradient(circle at ${mouse.x}% ${mouse.y}%, oklch(0.65 0.12 ${hue} / 0.2), transparent 55%)`,
        zIndex: 3,
      }}></div>

      {/* z-index 4 — label always on top */}
      <div className="gallery-item-label" style={{ zIndex: 4 }}>
        <span className="gallery-item-tag">galerie photo</span>
        <span className="gallery-item-name">{label}</span>
      </div>
    </div>
  );
}

function GallerySection() {
  const [ref, vis] = useReveal();
  return (
    <section id="galerie" className="section gallery-section" ref={ref}>
      <div className={`section-inner reveal ${vis ? 'visible' : ''}`}>
        <div className="section-header">
          <p className="section-overline">Souvenirs</p>
          <h2 className="section-title">Galerie</h2>
          <Divider />
        </div>

        <div className="gallery-grid">
          {GALLERY_ITEMS.map((item, i) => (
            <GalleryItem key={i} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  useReveal, Divider,
  AboutSection, ProgrammeSection, GallerySection,
});