/** Reusable bits: icons, image placeholders, fields. */
const { useState, useEffect, useRef } = React;

/* Lucide-style line icons. 1.5 stroke. */
function Icon({ name, size = 20, stroke = 1.5, color = "currentColor", style = {} }) {
  const paths = {
    "calendar":      ["rect:18,18,3,4,2", "M16 2v4", "M8 2v4", "M3 10h18"],
    "chevron-down":  ["m6 9 6 6 6-6"],
    "chevron-right": ["m9 18 6-6-6-6"],
    "arrow-right":   ["M5 12h14", "m12 5 7 7-7 7"],
    "arrow-down":    ["M12 5v14", "m19 12-7 7-7-7"],
    "map-pin":       ["M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z", "circle:12,10,3"],
    "phone":         ["M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"],
    "mail":          ["rect:20,16,2,4,2", "m22 7-10 5L2 7"],
    "instagram":     ["rect:20,20,2,2,5", "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z", "M17.5 6.5h.01"],
    "facebook":      ["M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"],
    "send":          ["M22 2 11 13", "m22 2-7 20-4-9-9-4 20-7z"],
    "check":         ["M20 6 9 17l-5-5"],
    "menu":          ["M4 12h16", "M4 6h16", "M4 18h16"],
    "x":             ["M18 6 6 18", "m6 6 12 12"],
    "leaf":          ["M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z", "M2 21c0-3 1.85-5.36 5.08-6"],
    "mountain":      ["m8 3 4 8 5-5 5 15H2L8 3z"],
    "utensils":      ["M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2", "M7 2v20", "M21 15V2c-2.8 0-5 2.2-5 5v8c0 1.1.9 2 2 2h3z"],
    "key":           ["m21 2-2 2", "M15.5 7.5 21 2", "m3 21 9-9", "circle:8.5,15.5,4"],
    "flame":         ["M8.5 14.5A2.5 2.5 0 0 0 11 17c1.84 0 3-2 3-3.5 0-2.5-3-4.5-3-7 0 1-2 2-2 4 0 1.5-1 2.5-1 4Z","M12 22c4.97 0 9-4.03 9-9 0-3-1-3.5-1.5-4.5-1-2-1.5-2-1.5-1 0 .5.5 1 .5 2 0 1-.5 2-2 2.5"],
    "footprints":    ["M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z", "M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z", "M16 17h4", "M4 13h4"],
    "tree-pine":     ["m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z", "M12 22v-3"],
    "moon":          ["M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"],
    "bed":           ["M2 4v16", "M2 8h18a2 2 0 0 1 2 2v10", "M2 17h20", "M6 8v9"],
    "wifi":          ["M5 13a10 10 0 0 1 14 0", "M8.5 16.5a5 5 0 0 1 7 0", "M2 8.82a15 15 0 0 1 20 0", "M12 20h.01"],
    "compass":       ["circle:12,12,10", "m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z"],
    "wheat":         ["M2 22 16 8", "M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z", "M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z", "M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z", "M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z", "M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z", "M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z", "M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"],
    "clock":         ["circle:12,12,10", "M12 6v6l4 2"],
    "users":         ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "circle:9,7,4", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"],
  }[name] || [];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {paths.map((p, i) => {
        if (p.startsWith("circle:")) {
          const [cx, cy, r] = p.replace("circle:", "").split(",").map(Number);
          return <circle key={i} cx={cx} cy={cy} r={r} />;
        }
        if (p.startsWith("rect:")) {
          const [w, h, x, y, rx] = p.replace("rect:", "").split(",").map(Number);
          return <rect key={i} width={w} height={h} x={x} y={y} rx={rx} />;
        }
        return <path key={i} d={p} />;
      })}
    </svg>
  );
}

function Button({ children, variant = "primary", size, onClick, type = "button", href, style }) {
  const cls = `btn btn--${variant}${size === "large" ? " btn--large" : ""}`;
  if (href) return <a href={href} className={cls} style={style}>{children}</a>;
  return <button type={type} onClick={onClick} className={cls} style={style}>{children}</button>;
}

function Eyebrow({ children, style, center }) {
  return <p className={`eyebrow${center ? " eyebrow--center" : ""}`} style={style}>{children}</p>;
}

function ImagePlaceholder({ tone = "green", caption, overlayIcon, style = {}, className = "" }) {
  return (
    <div className={`img-ph img-ph--${tone} ${className}`} style={style}>
      {overlayIcon && (
        <div className="img-ph__overlay">
          <Icon name={overlayIcon} size={88} stroke={1.2} color="#fbf8f1" />
        </div>
      )}
      {caption && <div className="img-ph__caption">{caption}</div>}
    </div>
  );
}

function CookieConsent() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    try {
      const consent = localStorage.getItem("endrinos_cookie_consent");
      if (!consent) {
        const timer = setTimeout(() => setShow(true), 600);
        return () => clearTimeout(timer);
      }
    } catch (e) {
      setShow(true);
    }
  }, []);

  const handleAccept = () => {
    try { localStorage.setItem("endrinos_cookie_consent", "accepted"); } catch (e) {}
    setShow(false);
  };

  const handleReject = () => {
    try { localStorage.setItem("endrinos_cookie_consent", "rejected"); } catch (e) {}
    setShow(false);
  };

  if (!show) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-label="Gestión de cookies">
      <div className="cookie-banner__inner">
        <div className="cookie-banner__text">
          <strong>Utilizamos cookies 🍪</strong>
          <p>
            Utilizamos cookies necesarias para garantizar el correcto funcionamiento del sitio. Puedes consultar todos los detalles en nuestra <a href="Cookies.html">Política de cookies</a>.
          </p>
        </div>
        <div className="cookie-banner__actions">
          <button type="button" className="btn btn--primary" onClick={handleAccept} style={{ padding: "10px 18px", fontSize: 13 }}>
            Aceptar todas
          </button>
          <button type="button" className="btn btn--secondary" onClick={handleReject} style={{ padding: "10px 18px", fontSize: 13 }}>
            Rechazar
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Button, Eyebrow, ImagePlaceholder, CookieConsent });