// Primitives.jsx — shared AlfaBeth building blocks

// Square-module dotted line (signature). Squares with equal gap — never rectangles.
function DashedRule({ width = 140, color = 'var(--peach)', style }) {
  return (
    <div className="sq-line" style={{ width, color, ...style }} />
  );
}

// Square-module dotted RING (SVG — squares stay square on circles). Wraps content.
function DottedRing({ size = 90, color = 'var(--peach)', sw = 4, fill = '#fff', children, style }) {
  const r = size / 2 - sw / 2 - 0.5;
  return (
    <div style={{ position: 'relative', width: size, height: size, flex: '0 0 auto', ...style }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: 'absolute', inset: 0 }}>
        <circle cx={size/2} cy={size/2} r={r} fill={fill} stroke={color}
          strokeWidth={sw} strokeDasharray={`${sw} ${sw}`} strokeLinecap="butt" />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
    </div>
  );
}

// Circular icon/letter badge with the square-module dotted ring.
function IconBadge({ label, icon, size = 90, ring = 'var(--peach)', ink = 'var(--teal)', sw = 4, italic = false }) {
  return (
    <DottedRing size={size} color={ring} sw={sw} fill="#fff">
      {icon
        ? <Icon name={icon} size={size * 0.46} stroke="var(--purple)" sw={1.8} />
        : <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontStyle: italic ? 'italic' : 'normal',
            fontSize: size * 0.42, lineHeight: 1, color: ink,
          }}>{label}</span>}
    </DottedRing>
  );
}

// Text CTA — "Solicitar Presupuesto" style: dashed rule above + 2-line label
function TextCTA({ children, color = 'var(--teal)', onClick }) {
  return (
    <button onClick={onClick} style={{
      background: 'none', border: 'none', padding: 0, cursor: 'pointer',
      display: 'inline-flex', flexDirection: 'column', gap: 12, textAlign: 'left',
    }}>
      <DashedRule width={140} />
      <span className="t-cta" style={{
        color, whiteSpace: 'pre-line',
        filter: 'drop-shadow(0px 3px 3px rgba(0,0,0,0.20))',
        transition: 'opacity .15s ease, transform .15s ease',
      }}>{children}</span>
    </button>
  );
}

// Solid pill button (used in forms / secondary surfaces)
function PillButton({ children, variant = 'peach', onClick }) {
  const palettes = {
    peach: { bg: 'var(--peach)', fg: 'var(--purple)' },
    teal:  { bg: 'var(--teal)',  fg: 'var(--white)' },
    ghost: { bg: 'transparent',  fg: 'var(--peach)', border: '2px solid var(--peach)' },
  };
  const p = palettes[variant];
  return (
    <button onClick={onClick} className="t-cta" style={{
      background: p.bg, color: p.fg, border: p.border || 'none',
      borderRadius: 'var(--radius-pill)', padding: '14px 32px',
      cursor: 'pointer', boxShadow: variant === 'ghost' ? 'none' : 'var(--shadow-cta)',
      transition: 'transform .15s ease, filter .15s ease',
    }}
    onMouseEnter={e => e.currentTarget.style.filter = 'brightness(0.94)'}
    onMouseLeave={e => e.currentTarget.style.filter = 'none'}
    >{children}</button>
  );
}

// BleedLayer — paints a section's surface (and any edge-anchored brand imagery)
// full viewport-width on wide monitors. Drop it as the FIRST child of a section
// that is `position: relative; isolation: isolate; overflow: visible`. It sits
// at z-index:-1 (above the section's own background, below content — so no
// content rewiring needed) and clips its own children at the true viewport edge.
function BleedLayer({ bg, children }) {
  return (
    <div className="bleed-layer" aria-hidden="true" style={{ background: bg }}>
      {children}
    </div>
  );
}

// Primary brand CTA — peach pill with icon, swaps to teal on hover (matches the
// footer "Charlemos" button). Pass an `icon` name from Icons.jsx.
function BrandCTA({ icon, children, onClick, href }) {
  const [hover, setHover] = React.useState(false);
  const Tag = href ? 'a' : 'button';
  const linkProps = href ? { href, target: '_blank', rel: 'noopener noreferrer' } : {};
  return (
    <Tag onClick={onClick} {...linkProps}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 12,
        background: hover ? 'var(--teal)' : 'var(--peach)', color: 'var(--purple)',
        border: 'none', borderRadius: 'var(--radius-pill)',
        padding: '16px 40px', cursor: 'pointer', fontFamily: 'var(--font-display)',
        fontWeight: 700, fontSize: 22, boxShadow: 'var(--shadow-cta)',
        textDecoration: 'none',
        transition: 'background .15s ease',
      }}>
      {icon && <Icon name={icon} size={24} stroke="var(--purple)" sw={2} />}
      {children}
    </Tag>
  );
}

Object.assign(window, { DashedRule, DottedRing, IconBadge, TextCTA, PillButton, BleedLayer, BrandCTA });