// ────────────────────────────────────────────────────────────────────────
//  savedate.jsx — "Save the Date" centre content, recreated as real,
//  responsive HTML/CSS text (no baked-in image). Royal Tamil/Hindu palette:
//  antique gold, ivory, deep maroon. The number 10 is the focal point.
// ────────────────────────────────────────────────────────────────────────

const GOLD = '#a9802f';
const GOLD_LT = '#c9a24b';
const MAROON = '#6e1f22';
const INK = '#5a3a18';

// small diamond ornament
function Diamond({ size = 6, color = GOLD }) {
  return <span style={{ display: 'inline-block', width: size, height: size,
    background: color, transform: 'rotate(45deg)', borderRadius: 1 }} />;
}

// lotus-bud divider (re-uses the global one but with STD gold)
function Div({ reveal = 1, width = 188 }) {
  const OD = window.OrnamentalDivider;
  return <OD width={width} color={GOLD} reveal={reveal} />;
}

// The framed date cartouche — FEBRUARY · 10 · 2027
function DateCartouche() {
  return (
    <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column',
      alignItems: 'center', padding: 'clamp(7px,1.7vw,13px) clamp(24px,8vw,44px)',
      borderTop: `1px solid ${GOLD}`, borderBottom: `1px solid ${GOLD}`,
      boxShadow: `inset 0 0 0 1px rgba(169,128,47,0.0)`,
    }}>
      {/* thin inner frame lines (top & bottom doubled) */}
      <span style={{ position: 'absolute', left: '8%', right: '8%', top: 3, height: 1,
        background: 'rgba(169,128,47,0.55)' }} />
      <span style={{ position: 'absolute', left: '8%', right: '8%', bottom: 3, height: 1,
        background: 'rgba(169,128,47,0.55)' }} />
      {/* flanking diamonds */}
      <span style={{ position: 'absolute', left: -4, top: '50%', transform: 'translateY(-50%)' }}><Diamond size={7} /></span>
      <span style={{ position: 'absolute', right: -4, top: '50%', transform: 'translateY(-50%)' }}><Diamond size={7} /></span>

      <div style={{ fontFamily: 'Marcellus, serif', color: GOLD,
        fontSize: 'min(clamp(14px,4.2vw,21px), 2.9vh)', letterSpacing: '0.34em', paddingLeft: '0.34em' }}>
        FEBRUARY
      </div>
      <div style={{ fontFamily: '"Cormorant Garamond", serif', color: MAROON, fontWeight: 700,
        fontSize: 'min(clamp(56px,17vw,104px), 14vh)', lineHeight: 0.96, margin: '0.02em 0',
        fontVariantNumeric: 'lining-nums', fontFeatureSettings: '"lnum" 1, "tnum" 0',
        textShadow: '0 2px 18px rgba(110,31,34,0.18)' }}>
        10
      </div>
      <div className="gold-shimmer" style={{ fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
        fontSize: 'min(clamp(20px,5.6vw,34px), 4.6vh)', letterSpacing: '0.26em',
        fontVariantNumeric: 'lining-nums', fontFeatureSettings: '"lnum" 1, "tnum" 1',
        background: 'linear-gradient(100deg,#7a5418 0%,#c79a3a 30%,#ecd592 50%,#c79a3a 70%,#7a5418 100%)',
        WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        backgroundSize: '200% 100%',
        display: 'flex', gap: '0.26em', justifyContent: 'center' }}>
        <span>2</span><span>0</span><span>2</span><span>7</span>
      </div>
    </div>
  );
}

// Whole centre block. `reveal` slides/fades it in; `celebrate` brings the
// closing line up a touch later.
function SaveTheDate({ reveal = 0, celebrate = 0 }) {
  const rise = (1 - reveal) * 30;
  return (
    <div style={{
      opacity: reveal, transform: `translateY(${rise}px)`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
      gap: 'clamp(5px,1.1vh,12px)', width: 'min(94vw, 520px)', pointerEvents: 'none',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'clamp(9px,1.6vh,15px)' }}>
        <h2 className="gold-text gold-shimmer" style={{ margin: 0, fontFamily: '"Cormorant Garamond", serif',
          fontWeight: 700, fontSize: 'min(clamp(30px,8.4vw,54px), 7vh)', letterSpacing: '0.05em',
          lineHeight: 1.0, whiteSpace: 'nowrap' }}>
          SAVE THE DATE
        </h2>
        <p style={{ margin: 0, fontFamily: 'Jost, sans-serif', color: MAROON,
          fontSize: 'clamp(10px,2.8vw,13px)', letterSpacing: '0.42em', paddingLeft: '0.42em',
          textTransform: 'uppercase' }}>
          For our wedding
        </p>
      </div>

      <Div width={170} />

      <DateCartouche />

      <p style={{ margin: 0, fontFamily: 'Marcellus, serif', color: MAROON,
        fontSize: 'min(clamp(12px,3.4vw,17px), 2.6vh)', letterSpacing: '0.22em', paddingLeft: '0.22em',
        textTransform: 'uppercase' }}>
        Trincomalee, Sri Lanka
      </p>

      <Div width={150} />

      <p style={{ margin: 0, opacity: celebrate, fontFamily: '"Cormorant Garamond", serif',
        fontStyle: 'italic', color: INK, fontSize: 'min(clamp(15px,4vw,20px), 2.8vh)', lineHeight: 1.38,
        maxWidth: '40ch' }}>
        We can’t wait to celebrate with you
      </p>
    </div>
  );
}

Object.assign(window, { SaveTheDate });