// ─── Paleta y tipografías Vintage ──────────────────────────────────
const V = {
  cream:    '#f4ece0',
  paper:    '#ede2cf',
  paperDk:  '#e5d8bd',
  ink:      '#2d2419',
  inkSoft:  '#5b4a36',
  rose:     '#c08a86',
  roseDeep: '#9c5d57',
  sage:     '#8a9d7e',
  rust:     '#b66a3f',
  gold:     '#b69149',
};

const F = {
  display: "'Cormorant Garamond', serif",
  body:    "'Crimson Pro', 'Cormorant Garamond', serif",
  hand:    "'Caveat', cursive",
  mono:    "'Special Elite', 'Courier New', monospace",
  sans:    "'Plus Jakarta Sans', system-ui, sans-serif",
};

const paperBg = {
  background: `
    radial-gradient(ellipse at 20% 10%, rgba(180,140,90,0.10), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(150,80,60,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(200,170,130,0.05), transparent 60%),
    repeating-linear-gradient(2deg, rgba(120,90,60,0.025) 0 1px, transparent 1px 7px),
    ${V.cream}
  `,
};

// ─── Sello redondeado ──────────────────────────────────────────────
function Stamp({ size = 130, text = "HECHO · A · MANO · EN · ESPAÑA · ", center = "★", color = V.roseDeep }) {
  const r = size / 2;
  const innerR = r - 14;
  const id = `stamp-${size}-${text.length}`;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <defs>
        <path id={id} d={`M ${r},${r} m -${innerR},0 a ${innerR},${innerR} 0 1,1 ${innerR*2},0 a ${innerR},${innerR} 0 1,1 -${innerR*2},0`} fill="none" />
      </defs>
      <circle cx={r} cy={r} r={r-2} fill="none" stroke={color} strokeWidth="1.4" />
      <circle cx={r} cy={r} r={r-8} fill="none" stroke={color} strokeWidth="0.6" strokeDasharray="2 3" />
      <text fill={color} style={{ fontFamily: F.body, fontSize: 11, letterSpacing: 2, fontWeight: 600 }}>
        <textPath href={`#${id}`} startOffset="0">{text.repeat(3)}</textPath>
      </text>
      <text x={r} y={r+8} textAnchor="middle" fill={color} style={{ fontFamily: F.display, fontSize: size*0.32, fontStyle: 'italic' }}>{center}</text>
    </svg>
  );
}

// ─── Hook responsive ───────────────────────────────────────────────
// Sin build ni CSS externo: detectamos el ancho de viewport y conmutamos
// las medidas inline. mobile = teléfono, tablet = tablet/horizontal.
function useResponsive() {
  const read = () => {
    const w = typeof window !== 'undefined' ? window.innerWidth : 1200;
    return { width: w, mobile: w <= 640, tablet: w > 640 && w <= 1024 };
  };
  const [state, setState] = React.useState(read);
  React.useEffect(() => {
    let raf;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setState(read()));
    };
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize); cancelAnimationFrame(raf); };
  }, []);
  return state;
}

window.V = V;
window.F = F;
window.paperBg = paperBg;
window.Stamp = Stamp;
window.useResponsive = useResponsive;