/* eslint-disable */
// Components.jsx — reusable atoms

const { useState: __useState, useEffect: __useEffect } = React;

/* Responsive hook */
const useMediaQuery = (query) => {
  const [matches, setMatches] = __useState(() =>
    typeof window !== 'undefined' ? window.matchMedia(query).matches : false
  );
  __useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);
    mq.addEventListener('change', handler);
    setMatches(mq.matches);
    return () => mq.removeEventListener('change', handler);
  }, [query]);
  return matches;
};

const Monogram = ({ initials = "ER", size = 56, fontSize = 20 }) => (
  <div
    className="ds-monogram"
    style={{ width: size, height: size, fontSize, fontFamily: "'Cormorant Garamond', serif", fontWeight: 600 }}
  >{initials}</div>
);

const IconCircle = ({ children, size = 42, dark = false, style = {} }) => (
  <div
    style={{
      width: size, height: size, borderRadius: 9999,
      border: "1.5px solid var(--gold)",
      background: dark ? "var(--bg-dark)" : "var(--paper-warm)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0,
      ...style,
    }}
  >{children}</div>
);

const Button = ({ children, className = "", style = {}, href = "#" }) => {
  const base = {
    boxSizing: "border-box",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    gap: 10,
    font: "600 13px/1.5 var(--font-sans)",
    textTransform: "uppercase",
    letterSpacing: "0.08em",
    padding: "16px 28px",
    borderRadius: 9999,
    border: 0,
    cursor: "pointer",
    textDecoration: "none",
    background: "var(--gold)",
    color: "#fff",
  };
  return (
    <a href={href} className={`ds-btn ${className}`} style={{ ...base, ...style }} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
};

const Avatar = ({ initials, color = "#4A90D9", size = 40 }) => (
  <div
    style={{
      width: size, height: size, borderRadius: 9999,
      background: color, color: "#fff",
      font: "600 13px/1 var(--font-sans)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0,
    }}
  >{initials}</div>
);

const Eyebrow = ({ children, color = "var(--ink)", letterSpacing = "0.08em" }) => (
  <p style={{
    font: "600 13px/1.5 var(--font-sans)",
    color, textTransform: "uppercase", letterSpacing, margin: 0,
  }}>{children}</p>
);

const SectionTitle = ({ children, color = "var(--ink)", style = {} }) => (
  <h2 style={{
    font: "400 38px/120% var(--font-serif)",
    color, fontVariantCaps: "small-caps",
    letterSpacing: "0.01em",
    margin: 0,
    ...style,
  }}>{children}</h2>
);

/* Contact data */
const WA_NUMBER = "551124006797";
const WA_MSG = encodeURIComponent("Olá, vim pela página e gostaria de agendar uma consulta com o Dr. Emilio Rengel.");
const WA = `https://wa.me/${WA_NUMBER}?text=${WA_MSG}`;

const CONTACT = {
  whatsappDisplay: "(11) 2400-6797",
  instagramHandle: "@dremiliorengel",
  instagramUrl: "https://www.instagram.com/dremiliorengel",
  address: "Rua Pedro de Toledo, 129 — Vila Clementino, São Paulo · SP",
};

Object.assign(window, { Monogram, IconCircle, Button, Avatar, Eyebrow, SectionTitle, WA, CONTACT, useMediaQuery });