// Home screen — sealed letter waiting on a dressing table.

function HomeScreen({ onOpenLetter, tweaks, featuredLetter }) {
  const [hover, setHover] = useState(false);

  // Dynamic date logic
  const dateOptions = { weekday: 'long', month: 'long', day: 'numeric' };
  const today = new Date().toLocaleDateString('en-US', dateOptions).replace(',', ' ·');

  const receiverName = tweaks.letterReceiver || 'Kefilwe';

  return (
    <div style={{
      position: 'absolute', inset: 0,
      padding: '70px 32px 100px',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
    }}>
      {/* Date header */}
      <div style={{
        fontFamily: sans, fontSize: 11, letterSpacing: 3,
        color: MUTED, textTransform: 'uppercase', marginTop: 6,
      }}>
        {today}
      </div>

      {/* Soft rule with heart */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, marginTop: 18,
        opacity: 0.55,
      }}>
        <div style={{ width: 26, height: 1, background: GOLD }} />
        <svg width="8" height="8" viewBox="0 0 8 8">
          <path d="M4 7s-3-1.8-3-4a1.6 1.6 0 013-.8A1.6 1.6 0 017 3c0 2.2-3 4-3 4z" fill={GOLD}/>
        </svg>
        <div style={{ width: 26, height: 1, background: GOLD }} />
      </div>

      {/* Poetic title */}
      <div style={{
        marginTop: 24, textAlign: 'center',
      }}>
        <div style={{
          fontFamily: serifDisplay, fontStyle: 'italic',
          fontSize: 32, lineHeight: '40px', color: INK,
          fontWeight: 400, letterSpacing: -0.3,
        }}>
          {featuredLetter ? <>{featuredLetter.status === 'unread' ? 'A letter is waiting' : 'Your letters wait'}</> : 'A letter is waiting'}<br/>for
        </div>
      </div>

      {/* Kefilwe name in script */}
      <div style={{
        fontFamily: script, fontSize: 48, color: ROSE,
        marginTop: 28, lineHeight: 1, paddingTop: 8, paddingBottom: 10,
      }}>
        {receiverName}
      </div>

      {/* The envelope */}
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={onOpenLetter}
        style={{
          marginTop: 24, cursor: 'pointer',
          transform: hover ? 'translateY(-4px)' : 'translateY(0)',
          transition: 'transform 1.2s cubic-bezier(.4,.1,.2,1)',
          filter: hover ? 'drop-shadow(0 18px 28px rgba(20,26,58,0.22))' : 'drop-shadow(0 10px 20px rgba(20,26,58,0.16))',
        }}>
        <Envelope sealed={true} glow={hover} receiverName={receiverName} />
      </div>

      {/* Hint */}
      <div style={{
        marginTop: 28,
        fontFamily: sans, fontSize: 11, letterSpacing: 2.5,
        color: MUTED, textTransform: 'uppercase',
        opacity: 0.7,
        animation: 'pulseHint 3.6s ease-in-out infinite',
      }}>
        Tap to open
      </div>

      <style>{`
        @keyframes pulseHint {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 0.85; }
        }
        @keyframes sealBreathe {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.03); }
        }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────
// Envelope component — with wax seal
// ─────────────────────────────────────────────
function Envelope({ sealed = true, glow = false, sealBroken = false, crackProgress = 0, receiverName = 'Kefilwe' }) {
  const W = 240, H = 160;
  return (
    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="env-face" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--env-face-1)"/>
          <stop offset="1" stopColor="var(--env-face-2)"/>
        </linearGradient>
        <linearGradient id="env-flap" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--env-flap-1)"/>
          <stop offset="1" stopColor="var(--env-flap-2)"/>
        </linearGradient>
        <radialGradient id="wax" cx="0.35" cy="0.3" r="0.9">
          <stop offset="0" stopColor="var(--wax-light)"/>
          <stop offset="0.5" stopColor="var(--wax-mid)"/>
          <stop offset="1" stopColor="var(--wax-dark)"/>
        </radialGradient>
        <filter id="waxShadow">
          <feGaussianBlur stdDeviation="1"/>
        </filter>
      </defs>

      {/* Body */}
      <rect x="0" y="0" width={W} height={H} rx="3" fill="url(#env-face)" />

      {/* Inside-flap shadow (visible when flap is open) */}
      <path d={`M0 0 L${W/2} ${H*0.55} L${W} 0 Z`} fill="#BBBFCE" opacity={0.5}/>

      {/* The flap (closed triangle, bent along diagonal lines for realism) */}
      <g style={{
        transformOrigin: `${W/2}px 0px`,
      }}>
        <path d={`M0 0 L${W/2} ${H*0.55} L${W} 0 Z`} fill="url(#env-flap)"/>
        <path d={`M0 0 L${W/2} ${H*0.55} L${W} 0`} fill="none" stroke="#9499AD" strokeWidth="0.5" opacity="0.6"/>
      </g>

      {/* Inner fold guides (subtle) */}
      <path d={`M0 ${H} L${W/2} ${H*0.55}`} stroke="#9499AD" strokeWidth="0.5" opacity="0.35" fill="none"/>
      <path d={`M${W} ${H} L${W/2} ${H*0.55}`} stroke="#9499AD" strokeWidth="0.5" opacity="0.35" fill="none"/>

      {/* Address — placed high on the envelope, well above the wax seal */}
      <text x={W/2} y={H*0.28} textAnchor="middle" style={{
        fontFamily: script, fontSize: 24, fill: INK, opacity: 0.75,
      }}>{receiverName}</text>
      <text x={W/2} y={H*0.86} textAnchor="middle" style={{
        fontFamily: sans, fontSize: 7, fill: MUTED, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.6,
      }}>From the one who means it</text>

      {/* WAX SEAL */}
      {sealed && (
        <g transform={`translate(${W/2}, ${H*0.55})`}>
          {/* shadow */}
          <ellipse cx="1" cy="2" rx="22" ry="21" fill="#0F1433" opacity="0.35" filter="url(#waxShadow)"/>
          {/* Wax splatter ring — irregular circle */}
          <path
            d="M-22 -1 C -22 -13, -12 -22, 0 -22 C 14 -22, 22 -13, 22 0 C 22 12, 13 22, 1 22 C -12 22, -22 11, -22 -1 Z"
            fill="url(#wax)"
          />
          {/* Cracks — appear as seal breaks */}
          {crackProgress > 0 && (
            <g stroke="#2A0708" strokeWidth="0.6" fill="none" strokeLinecap="round"
              style={{ opacity: crackProgress }}>
              <path d="M0 -22 L2 -4 L-6 6 L-4 22"/>
              <path d="M-22 -1 L-5 -2 L3 4 L22 0" />
              <path d="M-18 14 L-3 2 L12 -16"/>
              <path d="M18 14 L6 5 L0 -5"/>
            </g>
          )}
          {/* Monogram */}
          <text textAnchor="middle" dominantBaseline="central" y="1" style={{
            fontFamily: serifDisplay, fontStyle: 'italic', fontSize: 22,
            fill: '#E3C98A', opacity: 0.88, fontWeight: 600,
          }}>D&amp;K</text>
          {/* Highlight */}
          <ellipse cx="-7" cy="-9" rx="7" ry="4" fill="#fff" opacity="0.14"/>
          {/* Glow on hover */}
          {glow && (
            <circle r="32" fill="none" stroke={ROSE} strokeWidth="0.5" opacity="0.4">
              <animate attributeName="r" from="24" to="38" dur="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" from="0.5" to="0" dur="2s" repeatCount="indefinite"/>
            </circle>
          )}
        </g>
      )}
    </svg>
  );
}

Object.assign(window, { HomeScreen, Envelope });