/* shared.jsx — small shared primitives. Globals on window. */

function Heart({ size = 10, color }) {
  return (
    <span
      className="lb-h"
      style={{
        width: size, height: size,
        ...(color ? { backgroundColor: color } : {}),
      }}
    />
  );
}

function HeartRule({ children, style }) {
  return <div className="lb-heart-rule" style={style}>{children}</div>;
}

/* The hero lockup, recreated from the business card.
   Uses Cardo (display fallback) — wide tracking, two-row composition. */
function LogoBlock({ size = 1, showSprig = true }) {
  const s = size;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      {/* EST · sprig · 2025 */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 18 * s,
        color: 'var(--lb-mulberry-wine)',
        fontFamily: 'var(--lb-font-display)',
        fontSize: 11 * s,
        letterSpacing: '0.42em',
        textTransform: 'uppercase',
        marginBottom: 6 * s,
      }}>
        <span>est.</span>
        {showSprig && (
          <img
            src="assets/wheat-flower.png"
            alt=""
            style={{ width: 40 * s, height: 56 * s, objectFit: 'contain' }}
          />
        )}
        <span>2025</span>
      </div>
      <div
        style={{
          fontFamily: 'var(--lb-font-display)',
          fontSize: 44 * s,
          letterSpacing: '0.04em',
          textTransform: 'uppercase',
          color: 'var(--lb-mulberry-wine)',
          lineHeight: 0.95,
          fontWeight: 500,
          textAlign: 'center',
        }}
      >
        Laurel’s
      </div>
      <div
        style={{
          fontFamily: 'var(--lb-font-display)',
          fontSize: 14 * s,
          letterSpacing: '0.46em',
          textTransform: 'uppercase',
          color: 'var(--lb-vintage-clay)',
          marginTop: 6 * s,
          textAlign: 'center',
        }}
      >
        Bakehouse
      </div>
    </div>
  );
}

function SloganLine({ style }) {
  return (
    <div
      style={{
        fontFamily: 'var(--lb-font-display)',
        fontSize: 11,
        letterSpacing: '0.38em',
        textTransform: 'uppercase',
        color: 'var(--lb-vintage-clay)',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 12,
        ...style,
      }}
    >
      <span>Homemade</span>
      <Heart size={11} color="var(--lb-vintage-clay)" />
      <span>Heartmade</span>
    </div>
  );
}

/* Lucide-style line icons inline (we don't want CDN deps to fail) */
const Icon = {
  phone: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="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-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 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-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  message: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  ),
  instagram: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
    </svg>
  ),
  x: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
    </svg>
  ),
  arrowRight: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  arrowLeft: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
  ),
  check: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  lock: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
  ),
};

/* Site-header logo — exact pattern from the design system's components-nav.
   Front: LB monogram. Back: round secondary mark. Hover-in adds +180,
   hover-out adds another +180 (full 360 per cycle). Tap on touch devices
   spins a full +360. */
function FlippingLogo({ size = 56, onClick }) {
  const ref = React.useRef(null);
  const rot = React.useRef(0);

  const apply = () => {
    const el = ref.current;
    if (el) el.style.transform = `rotateY(${rot.current}deg)`;
  };

  React.useEffect(() => {
    const canHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
    if (!canHover) return;
    const enter = () => { rot.current += 180; apply(); };
    const leave = () => { rot.current += 180; apply(); };
    const btn = ref.current && ref.current.parentElement;
    if (!btn) return;
    btn.addEventListener('mouseenter', enter);
    btn.addEventListener('mouseleave', leave);
    return () => {
      btn.removeEventListener('mouseenter', enter);
      btn.removeEventListener('mouseleave', leave);
    };
  }, []);

  const handleClick = (e) => {
    const canHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
    if (!canHover) { rot.current += 360; apply(); }
    if (onClick) onClick(e);
  };

  return (
    <button
      type="button"
      className="lb-fliplogo"
      style={{ width: size, height: size }}
      onClick={handleClick}
      aria-label="Laurel’s Bakehouse"
    >
      <span className="lb-fliplogo__inner" ref={ref}>
        <span className="lb-fliplogo__face">
          <img
            src="assets/logo-monogram.png"
            alt=""
            aria-hidden="true"
          />
        </span>
        <span className="lb-fliplogo__face lb-fliplogo__face--back">
          <img
            src="assets/logo-circle.png"
            alt=""
            aria-hidden="true"
          />
        </span>
      </span>
    </button>
  );
}

Object.assign(window, { Heart, HeartRule, LogoBlock, SloganLine, Icon, FlippingLogo });