/* landing.jsx — Single full-bleed hero page */

const { useEffect: ldUseEffect, useState: ldUseState } = React;

function Landing({ onStart }) {
  const now = useClock();

  // Faintly ticking price chip to hint at live market activity
  const [price, setPrice] = ldUseState(103284.5);
  ldUseEffect(() => {
    const id = setInterval(() => {
      setPrice(p => Math.round((p + (Math.random() - 0.45) * 18) * 10) / 10);
    }, 1600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="relative h-full w-full overflow-hidden bg-bg text-text grid-bg">
      {/* Ambient emerald glow */}
      <div
        className="absolute pointer-events-none"
        style={{
          left: '50%', top: '54%', transform: 'translate(-50%, -50%)',
          width: '1100px', height: '1100px',
          background: 'radial-gradient(ellipse at center, rgba(16,185,129,0.16) 0%, rgba(16,185,129,0.04) 38%, rgba(16,185,129,0) 70%)',
        }}
      />
      {/* Subtle vignette */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%)'
        }}
      />

      {/* Top bar */}
      <div className="absolute top-0 left-0 right-0 h-[56px] px-8 flex items-center justify-between z-10">
        <TriniumMark size={12} />
        <div className="flex items-center gap-5">
          <span className="hidden md:inline-flex items-center gap-2 h-[24px] px-2.5 border border-line-3 bg-bg-2/60">
            <span className="w-1.5 h-1.5 rounded-full bg-green live-dot" />
            <span className="font-mono text-[10px] tracking-[0.12em] text-text-2">
              BTC · {price.toLocaleString(undefined,{minimumFractionDigits:1,maximumFractionDigits:1})}
            </span>
            <span className="font-mono text-[10px] text-text-3">·</span>
            <span className="font-mono text-[10px] text-green">+1.12%</span>
          </span>
        </div>
      </div>

      {/* Main */}
      <div className="absolute inset-0 flex flex-col items-center justify-center z-10 px-6">
        <div className="flex flex-col items-center max-w-[1100px]">

          {/* Eyebrow */}
          <div className="flex items-center gap-3 mb-9">
            <span className="h-px w-10 bg-line-3" />
            <span className="font-mono text-[10px] tracking-[0.28em] uppercase text-text-3">
              TRINIUM · 2026
            </span>
            <span className="h-px w-10 bg-line-3" />
          </div>

          {/* Headline */}
          <h1 className="font-sans font-semibold text-center text-[88px] leading-[0.94] tracking-[-0.02em]">
            Prediction markets,
            <br/>
            <span className="italic font-light text-text-2">rebuilt as</span>{' '}
            <span className="text-emerald" style={{ textShadow: '0 0 40px rgba(16,185,129,0.35)' }}>
              an exchange.
            </span>
          </h1>

          {/* CTA */}
          <div className="mt-12 flex flex-col items-center gap-4">
            <button
              onClick={onStart}
              className="group relative inline-flex items-center h-[58px] px-10 bg-emerald/[0.14] hover:bg-emerald/[0.22] text-emerald border border-emerald/40 font-mono text-[13px] tracking-[0.18em] uppercase font-semibold transition-all"
              style={{ boxShadow: '0 0 32px rgba(16,185,129,0.20)' }}
            >
              <span>Start Trading</span>
            </button>
            <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-text-3">
              First market live → BTC-USD · 5MIN · UP/DOWN
            </div>
          </div>

        </div>
      </div>

      {/* Bottom signature row */}
      <div className="absolute bottom-0 left-0 right-0 h-[42px] px-8 flex items-center justify-end z-10 font-mono text-[10px] tracking-[0.18em] uppercase text-text-3">
        <span className="text-text-2">{utcClock(now)} UTC</span>
      </div>
    </div>
  );
}

Object.assign(window, { Landing });