/* global React */
const { useState, useEffect, useRef } = React;

/* ──────────────────────────────────────────────────────────────
   LOGO PRIMITIVES — Heller Lauritsen
   - Monogram H|L (overlay, EB Garamond Italic)
   - Wordmark "HELLER  LAURITSEN"
   - 3 variants: Navy, Bone, Gold
   ────────────────────────────────────────────────────────────── */

const Monogram = ({ size = 120, ring = '#C9A961', h = '#C9A961', l = '#F5F1E8', seal = true }) => {
  const stroke = Math.max(0.6, size * (0.8 / 120));
  const letter = size * (72 / 120);
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <rect x="1" y="1" width="118" height="118" fill="none" stroke={ring} strokeWidth={stroke * (120 / size)} />
      {/* H — gold, slightly left */}
      <text
        x="48" y="78"
        fontFamily="EB Garamond, Garamond, serif"
        fontStyle="italic"
        fontWeight="400"
        fontSize="72"
        fill={h}
        textAnchor="middle"
      >H</text>
      {/* L — bone, slightly right, overlapping */}
      <text
        x="72" y="78"
        fontFamily="EB Garamond, Garamond, serif"
        fontStyle="italic"
        fontWeight="400"
        fontSize="72"
        fill={l}
        opacity="0.92"
        textAnchor="middle"
      >L</text>
      {seal && (
        <line x1="44" y1="96" x2="76" y2="96" stroke={ring} strokeWidth={stroke * (120 / size)} opacity="0.9" />
      )}
    </svg>
  );
};

const Wordmark = ({ color = '#F5F1E8', size = 18, spacing = '0.32em' }) => (
  <span style={{
    fontFamily: 'EB Garamond, Garamond, serif',
    fontStyle: 'italic',
    fontWeight: 400,
    color,
    letterSpacing: spacing,
    fontSize: size,
    whiteSpace: 'nowrap',
    display: 'inline-block',
  }}>
    HELLER&nbsp;&nbsp;LAURITSEN
  </span>
);

const ClaimCaps = ({ color = '#C9A961', size = 11, children }) => (
  <span style={{
    fontFamily: 'DM Sans, sans-serif',
    fontWeight: 500,
    color,
    textTransform: 'uppercase',
    letterSpacing: '0.42em',
    fontSize: size,
    lineHeight: 1.4,
  }}>{children}</span>
);

/* Combined lockup for nav and headers */
const Lockup = ({ markSize = 36, color = '#F5F1E8', wordSize = 14 }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 18 }}>
    <Monogram size={markSize} seal={false} />
    <Wordmark color={color} size={wordSize} spacing="0.30em" />
  </div>
);

/* Stationery-style stacked lockup */
const StackedLockup = ({ background = '#0E1B2C', tint = '#F5F1E8', accent = '#C9A961' }) => (
  <div style={{
    background,
    padding: '64px 56px',
    display: 'grid',
    placeItems: 'center',
    gap: 28,
  }}>
    <Monogram size={110} ring={accent} h={accent} l={tint} />
    <div style={{ height: 0.5, width: 80, background: accent, opacity: 0.7 }} />
    <Wordmark color={tint} size={20} spacing="0.36em" />
    <ClaimCaps color={accent} size={10}>
      Boutique Property Capital · Mallorca
    </ClaimCaps>
  </div>
);

window.Monogram = Monogram;
window.Wordmark = Wordmark;
window.ClaimCaps = ClaimCaps;
window.Lockup = Lockup;
window.StackedLockup = StackedLockup;