/* Studio 76 — shared UI components. Exported to window. */

/* S76 monogram — a jeweller's hallmark punch: squircle with a double keyline,
   an italic serif "S" over the numerals "76", split by a hairline rule.
   Inherits the surrounding colour via `stroke`. */
function MonogramMark({ size = 34, stroke = 'currentColor', sw = 1.6 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <rect x="2.4" y="2.4" width="43.2" height="43.2" rx="11.5" stroke={stroke} strokeWidth={sw} />
      <rect x="5.8" y="5.8" width="36.4" height="36.4" rx="8.5" stroke={stroke} strokeWidth={sw * 0.5} opacity="0.42" />
      <text x="24" y="22.5" textAnchor="middle" fill={stroke}
        style={{ fontFamily: 'var(--font-serif), Georgia, serif', fontWeight: 600, fontStyle: 'italic', fontSize: '20px' }}>S</text>
      <line x1="16.5" y1="27.5" x2="31.5" y2="27.5" stroke={stroke} strokeWidth={sw * 0.7} opacity="0.55" />
      <text x="24" y="39.5" textAnchor="middle" fill={stroke}
        style={{ fontFamily: 'var(--font-serif), Georgia, serif', fontWeight: 600, fontSize: '12px', letterSpacing: '2px' }}>76</text>
    </svg>
  );
}
/* keep the old name working for existing call sites (footer, CTA, Jewellers card) */
const RingsMark = MonogramMark;

/* Wordmark: STUDIO + gold italic 76 */
function Wordmark({ size = 26, color = 'currentColor', accent }) {
  return (
    <span style={{
      fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: size,
      letterSpacing: '0.14em', color, lineHeight: 1, whiteSpace: 'nowrap',
      textTransform: 'uppercase'
    }}>
      Studio<span style={{
        fontWeight: 700, fontStyle: 'italic', letterSpacing: '0.02em',
        color: accent || 'inherit', marginLeft: '.32em'
      }}>76</span>
    </span>
  );
}

function Logo({ dark = false }) {
  return (
    <a href="#top" className="logo" style={{ display:'inline-flex', alignItems:'center', gap:11, textDecoration:'none', color: dark ? 'var(--on-ink)' : 'var(--ink)' }}>
      <MonogramMark size={34} sw={1.7} />
      <Wordmark size={22} accent={dark ? 'var(--gold-light)' : 'var(--accent)'} />
    </a>
  );
}

const ArrowUR = (p) => (
  <svg viewBox="0 0 24 24" fill="none" {...p}>
    <path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const ArrowR = (p) => (
  <svg viewBox="0 0 24 24" fill="none" {...p}>
    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

function RoundArrow({ filled = false, onClick, label = 'Open' }) {
  return (
    <button className={'btn-round' + (filled ? ' filled' : '')} onClick={onClick} aria-label={label}>
      <ArrowUR />
    </button>
  );
}

/* Transformation / product card */
function TransformCard({ item, onAdd }) {
  return (
    <article className="card">
      <div className="card-media frame">
        <span className="pill card-pill">{item.cat}</span>
        <img className="img-hover" src={item.img} alt={item.name} loading="lazy" style={item.pos ? { objectPosition: item.pos } : undefined} />
      </div>
      <div className="card-body">
        <h3 className="card-name">{item.name}</h3>
        <p className="card-prov">{item.prov}</p>
        <div className="card-foot">
          <div className="price-twin">
            <span className="pr"><span className="k"><span className="dot-luxe"></span> Luxe</span> <b>{item.luxe}</b></span>
            <span className="pr"><span className="k"><span className="dot-deluxe"></span> Deluxe</span> <b>{item.deluxe}</b></span>
          </div>
          <button className="plus-btn" onClick={onAdd} aria-label={'Begin ' + item.name}>+</button>
        </div>
      </div>
    </article>
  );
}

/* Eyebrow with sparkle */
function Eyebrow({ children, dark = false, style }) {
  return (
    <p className={'eyebrow' + (dark ? ' on-dark' : '')} style={{ display:'flex', alignItems:'center', gap:10, margin:0, ...style }}>
      <i className="spark">✦</i>{children}
    </p>
  );
}

Object.assign(window, { MonogramMark, RingsMark, Wordmark, Logo, ArrowUR, ArrowR, RoundArrow, TransformCard, Eyebrow });