// Landing page with ornate animated doorway
const { useState: useStateLanding, useEffect: useEffectLanding } = React;

window.Landing = function Landing({ onEnter }) {
  const [opening, setOpening] = useStateLanding(false);
  const [exiting, setExiting] = useStateLanding(false);

  const enter = () => {
    setOpening(true);
    setTimeout(() => setExiting(true), 1400);
    setTimeout(() => onEnter(), 2400);
  };

  return React.createElement('div', { className: 'landing' + (exiting ? ' exiting' : '') },
    React.createElement('div', { className: 'landing-inner' },
      React.createElement('div', { className: 'doorway' + (opening ? ' opening' : '') },
        React.createElement(Doorway),
        React.createElement('div', { className: 'door-light' })
      ),
      React.createElement('h1', { className: 'mystic-title' }, "Sarah's Secret Chamber"),
      React.createElement('p', { className: 'subtitle' }, 'Where the cards whisper truths'),
      React.createElement('button', { className: 'enter-btn', onClick: enter, disabled: opening },
        opening ? '✦ Opening ✦' : 'Enter the Chamber'
      )
    )
  );
};

function Doorway() {
  return React.createElement('svg', { viewBox: '0 0 200 300', xmlns: 'http://www.w3.org/2000/svg' },
    React.createElement('defs', null,
      React.createElement('linearGradient', { id: 'doorGrad', x1: '0', y1: '0', x2: '0', y2: '1' },
        React.createElement('stop', { offset: '0%', stopColor: '#2d1b4e' }),
        React.createElement('stop', { offset: '100%', stopColor: '#0a0618' })
      )
    ),
    // ornate frame
    React.createElement('path', {
      d: 'M 20 290 L 20 80 Q 20 20, 100 10 Q 180 20, 180 80 L 180 290',
      fill: 'none', stroke: '#d4af37', strokeWidth: 2
    }),
    React.createElement('path', {
      d: 'M 28 285 L 28 82 Q 28 26, 100 18 Q 172 26, 172 82 L 172 285',
      fill: 'none', stroke: '#d4af37', strokeWidth: 0.6, opacity: 0.6
    }),
    // left leaf
    React.createElement('g', { className: 'door-leaf left' },
      React.createElement('path', {
        d: 'M 32 285 L 32 84 Q 32 30, 100 22 L 100 285 Z',
        fill: 'url(#doorGrad)', stroke: '#d4af37', strokeWidth: 1
      }),
      // ornament on left leaf
      React.createElement('circle', { cx: 66, cy: 100, r: 18, fill: 'none', stroke: '#d4af37', strokeWidth: 0.8 }),
      React.createElement('circle', { cx: 66, cy: 100, r: 12, fill: 'none', stroke: '#d4af37', strokeWidth: 0.5, strokeDasharray: '2 2' }),
      React.createElement('text', { x: 66, y: 105, textAnchor: 'middle', fill: '#f4d06f', fontSize: 18, fontFamily: 'Cinzel, serif' }, '☽'),
      React.createElement('path', { d: 'M 50 160 L 82 160 M 50 180 L 82 180 M 66 150 L 66 190', stroke: '#d4af37', strokeWidth: 0.5, opacity: 0.7 }),
      React.createElement('circle', { cx: 66, cy: 230, r: 8, fill: 'none', stroke: '#d4af37', strokeWidth: 0.6 }),
      React.createElement('text', { x: 66, y: 234, textAnchor: 'middle', fill: '#d4af37', fontSize: 10 }, '✦'),
      // handle
      React.createElement('circle', { cx: 92, cy: 155, r: 2.5, fill: '#f4d06f' })
    ),
    // right leaf
    React.createElement('g', { className: 'door-leaf right' },
      React.createElement('path', {
        d: 'M 168 285 L 168 84 Q 168 30, 100 22 L 100 285 Z',
        fill: 'url(#doorGrad)', stroke: '#d4af37', strokeWidth: 1
      }),
      React.createElement('circle', { cx: 134, cy: 100, r: 18, fill: 'none', stroke: '#d4af37', strokeWidth: 0.8 }),
      React.createElement('circle', { cx: 134, cy: 100, r: 12, fill: 'none', stroke: '#d4af37', strokeWidth: 0.5, strokeDasharray: '2 2' }),
      React.createElement('text', { x: 134, y: 105, textAnchor: 'middle', fill: '#f4d06f', fontSize: 18, fontFamily: 'Cinzel, serif' }, '☉'),
      React.createElement('path', { d: 'M 118 160 L 150 160 M 118 180 L 150 180 M 134 150 L 134 190', stroke: '#d4af37', strokeWidth: 0.5, opacity: 0.7 }),
      React.createElement('circle', { cx: 134, cy: 230, r: 8, fill: 'none', stroke: '#d4af37', strokeWidth: 0.6 }),
      React.createElement('text', { x: 134, y: 234, textAnchor: 'middle', fill: '#d4af37', fontSize: 10 }, '✦'),
      React.createElement('circle', { cx: 108, cy: 155, r: 2.5, fill: '#f4d06f' })
    ),
    // keystone arch ornament
    React.createElement('path', {
      d: 'M 60 40 Q 100 -8, 140 40', fill: 'none', stroke: '#f4d06f', strokeWidth: 1.2
    }),
    React.createElement('circle', { cx: 100, cy: 30, r: 5, fill: 'none', stroke: '#f4d06f', strokeWidth: 1 }),
    React.createElement('text', { x: 100, y: 34, textAnchor: 'middle', fill: '#f4d06f', fontSize: 7 }, '✦'),
    // stars around frame
    React.createElement('text', { x: 30, y: 50, textAnchor: 'middle', fill: '#f4d06f', fontSize: 6, opacity: 0.7 }, '✦'),
    React.createElement('text', { x: 170, y: 50, textAnchor: 'middle', fill: '#f4d06f', fontSize: 6, opacity: 0.7 }, '✦'),
    React.createElement('text', { x: 14, y: 150, textAnchor: 'middle', fill: '#f4d06f', fontSize: 5, opacity: 0.5 }, '✦'),
    React.createElement('text', { x: 186, y: 150, textAnchor: 'middle', fill: '#f4d06f', fontSize: 5, opacity: 0.5 }, '✦')
  );
}