// shared.jsx — constants, icons, and reusable bits for the landing page
const TEL = "+56992919059";
const WA = "56992919059";
const EMAIL = "paularojasabogada@gmail.com";
const WA_BASE = (msg) => `https://wa.me/${WA}?text=${encodeURIComponent(msg)}`;
const WA_AGENDAR = WA_BASE("Hola Paula, quisiera agendar una primera consulta.");

// ---- Line icons (24x24 stroke) -------------------------------------------
function Icon({ name, className, stroke = 1.5 }) {
  const common = {
    width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round",
    strokeLinejoin: "round", className,
  };
  const paths = {
    familia: <g><circle cx="8" cy="8" r="3" /><circle cx="17" cy="9.5" r="2.2" /><path d="M2.5 19c.4-3 2.8-4.8 5.5-4.8S13.1 16 13.5 19" /><path d="M14.5 14.6c2-.2 4.3 1 4.9 4.4" /></g>,
    civil: <g><path d="M6 3.5h8.5L18 7v13.5H6z" /><path d="M14 3.5V7h4" /><path d="M8.5 12h7M8.5 15h7M8.5 9h3" /></g>,
    policia: <g><path d="M3 21h7" /><path d="M6.5 21V9" /><path d="M3.2 9.4 9.8 6" /><path d="m4 7 5 2.6L7.6 12 2.6 9.4z" /><path d="M14 21h7" /><path d="M17.5 21V9" /><path d="m14 7 5 2.6L17.6 12l-5-2.6z" /><path d="M9.8 6 11.8 3" /></g>,
    laboral: <g><rect x="3" y="7.5" width="18" height="12.5" rx="1.5" /><path d="M8.5 7.5V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v1.5" /><path d="M3 12.5h18" /><path d="M11 12.5h2" /></g>,
    admin: <g><path d="M3 20.5h18" /><path d="M5 20.5V10M19 20.5V10M9 20.5V13.5h6V20.5" /><path d="M12 3.5 20 9H4z" /></g>,
    phone: <g><path d="M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2Z" /></g>,
    wa: <g><path d="M3.5 20.5 5 16a8 8 0 1 1 3 3l-4.5 1.5Z" /><path d="M9 9.5c0 4 2.5 6.5 6.5 6.5.7-1.4.2-1.8-.8-2.3l-1.3.9c-1-.4-2-1.4-2.4-2.4l.9-1.3c-.5-1-.9-1.5-2.3-.8C9.2 10.4 9 9.9 9 9.5Z" fill="currentColor" stroke="none" /></g>,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3.5 7 8.5 6 8.5-6" /></g>,
    clock: <g><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></g>,
    pin: <g><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></g>,
    check: <g><path d="m5 12.5 4.5 4.5L19 7" /></g>,
    plus: <g><path d="M12 5v14M5 12h14" /></g>,
    arrow: <g><path d="M5 12h14M13 6l6 6-6 6" /></g>,
    scale: <g><path d="M12 4v16M7 20h10" /><path d="M12 6 5 8m7-2 7 2" /><path d="m5 8-2.5 5h5L5 8Zm14 0-2.5 5h5L19 8Z" /></g>,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

// ---- Buttons --------------------------------------------------------------
function PrimaryBtn({ href, children, className = "", onClick }) {
  return (
    <a href={href} onClick={onClick}
       className={`group inline-flex items-center justify-center gap-2.5 whitespace-nowrap rounded-sm bg-bronze px-7 py-3.5 font-body text-[15px] font-semibold tracking-wide text-white shadow-[0_8px_24px_-10px_rgba(169,118,63,0.8)] transition-all duration-200 hover:brightness-95 hover:shadow-[0_12px_30px_-10px_rgba(169,118,63,0.95)] hover:-translate-y-[1px] ${className}`}>
      {children}
      <span className="transition-transform duration-200 group-hover:translate-x-1"><span className="block h-4 w-4"><Icon name="arrow" /></span></span>
    </a>
  );
}
function GhostBtn({ href, children, className = "", icon = "phone" }) {
  return (
    <a href={href}
       className={`inline-flex items-center justify-center gap-2.5 whitespace-nowrap rounded-sm border border-ink/25 px-6 py-3.5 font-body text-[15px] font-semibold tracking-wide transition-all duration-200 hover:border-bronze/60 hover:bg-bronze/[0.06] ${className}`}>
      <span className="block h-[18px] w-[18px] opacity-80"><Icon name={icon} /></span>
      {children}
    </a>
  );
}

// ---- Small eyebrow label --------------------------------------------------
function Eyebrow({ children, className = "" }) {
  return (
    <span className={`inline-flex items-center gap-3 font-roman text-[12.5px] uppercase tracking-[0.32em] ${className}`}>
      <span className="h-px w-7 bg-current opacity-50"></span>
      {children}
    </span>
  );
}

Object.assign(window, { TEL, WA, EMAIL, WA_BASE, WA_AGENDAR, Icon, PrimaryBtn, GhostBtn, Eyebrow });
