// Scène hero + icônes

const Lighthouse = () => {
  return (
    <>
      <div className="hero__stars"></div>
      <div className="hero__moon"></div>

      {/* Particules dorées */}
      <div className="hero__particles" aria-hidden="true">
        {[...Array(14)].map((_, i) => {
          const left = (i * 7.3 + 5) % 100;
          const d = 7 + (i % 5) * 1.4;
          const dl = (i % 7) * 1.2;
          const dr = i % 2 === 0 ? 40 : -40;
          const size = 1.5 + (i % 3) * 0.7;
          return (
            <span
              key={i}
              className="hero__particle"
              style={{
                left: `${left}%`,
                width: `${size}px`,
                height: `${size}px`,
                "--d": `${d}s`,
                "--dl": `${dl}s`,
                "--dr": `${dr}px`,
              }}
            />
          );
        })}
      </div>

      <div className="hero__flash" aria-hidden="true"></div>

      {/* Silhouette du phare réel */}
      <div className="hero__silhouette">
        <img src="assets/cap-frehel-phare.png" alt="Phare du Cap Fréhel" />
      </div>

      {/* Faisceau rotatif positionné sur la lanterne */}
      <div className="beam-anchor" aria-hidden="true">
        <div className="beam-scatter"></div>
        <div className="beam-cone"></div>
        <div className="beam-cone-inner"></div>
        <div className="beam-glow"></div>
      </div>
    </>
  );
};

// Icônes (SVG monochromes)
const Icon = ({ kind, size = 22 }) => {
  const common = {
    width: size, height: size, fill: "none",
    stroke: "currentColor", strokeWidth: 1.4,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (kind) {
    case "wave":
      return <svg {...common} viewBox="0 0 24 24"><path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0M2 17c2-2 4-2 6 0s4 2 6 0 4-2 6 0" /></svg>;
    case "moon":
      return <svg {...common} viewBox="0 0 24 24"><path d="M20 14a8 8 0 1 1-9.5-9.5 6 6 0 0 0 9.5 9.5z" /></svg>;
    case "leaf":
      return <svg {...common} viewBox="0 0 24 24"><path d="M4 20s.5-9 7-15c0 0 7 0 9 2-2 13-16 13-16 13zM4 20l10-10" /></svg>;
    case "star":
      return <svg {...common} viewBox="0 0 24 24"><path d="M12 3l2.5 6.5L21 10l-5 4.5L17.5 21 12 17.5 6.5 21 8 14.5 3 10l6.5-.5z" /></svg>;
    case "sun":
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5" /></svg>;
    case "book":
      return <svg {...common} viewBox="0 0 24 24"><path d="M4 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4zM20 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z" /></svg>;
    case "wind":
      return <svg {...common} viewBox="0 0 24 24"><path d="M3 8h11a3 3 0 1 0-3-3M3 12h17a3 3 0 1 1-3 3M3 16h9" /></svg>;
    case "heather":
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="6" r="2" /><circle cx="8" cy="10" r="2" /><circle cx="16" cy="10" r="2" /><circle cx="10" cy="14" r="2" /><circle cx="14" cy="14" r="2" /><path d="M12 16v6" /></svg>;
    case "anchor":
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" /><path d="M12 7v15M5 14a7 7 0 0 0 14 0M8 12h8" /></svg>;
    case "leaf2":
      return <svg {...common} viewBox="0 0 24 24"><path d="M6 18s2-8 8-12c4 6 2 14-6 14-1 0-2-2-2-2z" /><path d="M6 18l4-4" /></svg>;
    case "lab":
      return <svg {...common} viewBox="0 0 24 24"><path d="M9 3v6L4 20a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-11V3M8 3h8M7 14h10" /></svg>;
    case "shield":
      return <svg {...common} viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-4 9-8 10-4-1-8-5-8-10V6l8-4z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "eu":
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /></svg>;
    case "package":
      return <svg {...common} viewBox="0 0 24 24"><path d="M21 8L12 3 3 8v8l9 5 9-5V8zM3 8l9 5 9-5M12 13v8" /></svg>;
    default:
      return null;
  }
};

window.Lighthouse = Lighthouse;
window.Icon = Icon;