// Logo marks for lâl. The circumflex (â) is the hero — it acts as a brow/eyelid over
// the 'a', which becomes the iris/pupil. Pure type-led; no illustrated mysticism.

const Wordmark = ({ size = 240, color = 'currentColor', variant = 'primary' }) => {
  // variant: primary | stacked | pupil | withDot
  const fs = size;
  if (variant === 'stacked') {
    return (
      <div style={{ display:'inline-flex', flexDirection:'column', alignItems:'center', color, lineHeight: 0.85 }}>
        <div className="display" style={{ fontSize: fs, fontWeight: 500, letterSpacing: '-0.02em' }}>lâl</div>
        <div className="mono upper" style={{ fontSize: fs * 0.055, marginTop: fs * 0.04, letterSpacing: '0.38em', paddingLeft: '0.38em' }}>amsterdam · fal evi</div>
      </div>
    );
  }
  if (variant === 'pupil') {
    // a with a filled dot above (pupil) replacing the circumflex
    return (
      <div style={{ display:'inline-flex', alignItems:'center', color, lineHeight: 0.85 }}>
        <span className="display" style={{ fontSize: fs, fontWeight: 500, letterSpacing: '-0.03em' }}>l</span>
        <span style={{ position:'relative', display:'inline-block' }}>
          <span className="display" style={{ fontSize: fs, fontWeight: 500, letterSpacing: '-0.03em' }}>a</span>
          <span style={{
            position:'absolute', left:'50%', top: -fs*0.08, transform:'translateX(-50%)',
            width: fs*0.09, height: fs*0.09, borderRadius:'50%', background: color
          }} />
        </span>
        <span className="display" style={{ fontSize: fs, fontWeight: 500, letterSpacing: '-0.03em' }}>l</span>
      </div>
    );
  }
  // primary
  return (
    <div style={{ display:'inline-flex', alignItems:'baseline', color, lineHeight: 0.85 }}>
      <span className="display" style={{ fontSize: fs, fontWeight: 500, letterSpacing: '-0.035em' }}>lâl</span>
    </div>
  );
};

// Nazar-mark: concentric circles echoing the evil-eye bead, with the â floating inside
const NazarMark = ({ size = 180, palette }) => {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 180 180" style={{ display:'block' }}>
      <circle cx="90" cy="90" r="88" fill={palette.accent} />
      <circle cx="90" cy="90" r="66" fill={palette.paper} />
      <circle cx="90" cy="90" r="42" fill={palette.accent} />
      <circle cx="90" cy="90" r="20" fill={palette.ink} />
      {/* â glyph as pupil */}
      <text x="90" y="102" textAnchor="middle" fontFamily="Noto Serif Display, Fraunces, serif" fontSize="36" fontWeight="500" fill={palette.paper} letterSpacing="-0.02em">â</text>
    </svg>
  );
};

// Monogram: "lâ" stacked like an Ottoman tughra, compact square
const Monogram = ({ size = 140, palette }) => {
  return (
    <div style={{
      width: size, height: size, background: palette.ink, color: palette.paper,
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily:'Noto Serif Display, serif', fontSize: size*0.62, fontWeight:500,
      letterSpacing:'-0.04em', lineHeight: 1
    }}>
      lâ
    </div>
  );
};

// Eye-brow mark: just the circumflex sitting over a long oval (eye shape)
const EyeBrow = ({ size = 180, palette }) => {
  const w = size, h = size*0.6;
  return (
    <svg width={w} height={h} viewBox="0 0 180 108" style={{ display:'block' }}>
      {/* circumflex */}
      <path d="M 40 20 L 90 6 L 140 20" stroke={palette.ink} strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      {/* eye oval */}
      <ellipse cx="90" cy="68" rx="64" ry="26" fill="none" stroke={palette.ink} strokeWidth="2"/>
      {/* iris */}
      <circle cx="90" cy="68" r="18" fill={palette.accent}/>
      <circle cx="90" cy="68" r="8" fill={palette.ink}/>
      <circle cx="86" cy="64" r="2.5" fill={palette.paper}/>
    </svg>
  );
};

window.Wordmark = Wordmark;
window.NazarMark = NazarMark;
window.Monogram = Monogram;
window.EyeBrow = EyeBrow;