// Eyeballs landing — multi-page app with simultaneous reveal, custom cursor,
// and routed Brands/Clippers pages.

const { useState: useAppState, useEffect: useAppEffect, useRef: useAppRef, useLayoutEffect: useAppLayout } = React;

const PALETTES = {
  classic: {
    label: 'Classic',
    bg: '#e35d4e',
    sclera: '#ffffff',
    iris: '#5cb6d4',
    pupil: '#143a52',
    fg: '#ffffff',
    fgInk: '#143a52'
  },
  poster: {
    label: 'Poster',
    bg: '#e35d4e',
    sclera: '#fbf3e2',
    iris: '#3a86c4',
    pupil: '#0c1f33',
    fg: '#fbf3e2',
    fgInk: '#0c1f33'
  },
  midnight: {
    label: 'Midnight',
    bg: '#0c1f33',
    sclera: '#fbf3e2',
    iris: '#5cb6d4',
    pupil: '#000000',
    fg: '#fbf3e2',
    fgInk: '#0c1f33'
  }
};

function App() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "classic",
    "eyeSize": 64,
    "density": 0.85,
    "parallax": true
  } /*EDITMODE-END*/);

  // route: 'home' | 'brands' | 'clippers'
  const [route, setRoute] = useAppState('home');
  const [revealed, setRevealed] = useAppState(false);
  const [navVisible, setNavVisible] = useAppState(false);

  // Reveal: eyes visible (closed) + hero text visible immediately.
  // After ~1.5s the eyes open in unison.
  useAppEffect(() => {
    setNavVisible(true);
    const t = setTimeout(() => setRevealed(true), 1500);
    return () => clearTimeout(t);
  }, []);

  const palette = PALETTES[tweaks.palette] || PALETTES.classic;
  const isMobile = useIsMobile();

  // Hero exclusion zone
  const heroRef = useAppRef(null);
  const [exclusion, setExclusion] = useAppState([]);

  useAppLayout(() => {
    function measure() {
      const el = heroRef.current;
      if (!el) {setExclusion([]);return;}
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const rx = r.width / 2 + 70;
      const ry = r.height / 2 + 50;
      setExclusion([{ shape: 'ellipse', cx, cy, rx, ry }]);
    }
    measure();
    const id = setTimeout(measure, 100); // re-measure after fonts load
    window.addEventListener('resize', measure);
    return () => {
      clearTimeout(id);
      window.removeEventListener('resize', measure);
    };
  }, [route]);

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        cursor: 'auto',
        overflow: 'hidden',
        background: palette.bg
      }}>
      
      <EyeGrid
        tweaks={{
          eyeSize: tweaks.eyeSize,
          density: tweaks.density,
          irisColor: palette.iris,
          scleraColor: palette.sclera,
          pupilColor: palette.pupil,
          parallax: tweaks.parallax,
          revealed,
          simultaneousOpen: true
        }}
        exclusionZones={route === 'home' ? exclusion : []} />
      

      {/* Home centerpiece */}
      {route === 'home' &&
      <div
        ref={heroRef}
        style={{
          position: 'absolute',
          left: '50%',
          top: isMobile ? '50%' : '44%',
          transform: 'translate(-50%, -50%)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: isMobile ? 20 : 28,
          opacity: navVisible ? 1 : 0,
          transition: 'opacity 700ms ease-out 200ms',
          pointerEvents: navVisible ? 'auto' : 'none',
          zIndex: 10,
          width: isMobile ? 'calc(100vw - 48px)' : 'auto',
          maxWidth: 720,
          textAlign: 'center'
        }}>
        
          <Wordmark palette={palette} />

          {/* Tagline — exact copy from user (placeholder until provided) */}
          <p style={{
          margin: 0,
          fontStyle: 'normal',
          fontSize: 'clamp(22px, 2.4vw, 32px)',
          lineHeight: 1.25,
          letterSpacing: '0',
          color: palette.fg,
          maxWidth: 720,
          opacity: 0.98,
          textAlign: 'center',
          fontFamily: '"Instrument Serif"',
          fontWeight: '700',
        }}>
            VIRALITY. ON COMMAND. <br />
          </p>

          <div style={{
            display: 'flex',
            gap: 12,
            marginTop: 8,
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'stretch' : 'center',
            width: isMobile ? '100%' : 'auto'
          }}>
            <PillButton palette={palette} label="For brands" variant="solid" onClick={() => setRoute('brands')} />
            <PillButton palette={palette} label="For clippers" variant="outline" onClick={() => setRoute('clippers')} />
          </div>
        </div>
      }

      {/* Routed pages */}
      {route === 'brands' && <BrandsPage palette={palette} onBack={() => setRoute('home')} />}
      {route === 'clippers' && <ClippersPage palette={palette} onBack={() => setRoute('home')} />}

      {/* Footer */}
      <Footer palette={palette} visible={navVisible} />

      {/* Custom cursor — always on top */}
      {/* Custom cursor removed per request — native cursor only */}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Color"
            value={tweaks.palette}
            options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.label }))}
            onChange={(v) => setTweak('palette', v)} />
          
        </TweakSection>
        <TweakSection title="Grid">
          <TweakSlider label="Eye size" value={tweaks.eyeSize} min={32} max={140} step={2} onChange={(v) => setTweak('eyeSize', v)} />
          <TweakSlider label="Density" value={tweaks.density} min={0.7} max={1.6} step={0.05} onChange={(v) => setTweak('density', v)} />
        </TweakSection>
        <TweakSection title="Behavior">
          <TweakToggle label="Parallax tracking" value={tweaks.parallax} onChange={(v) => setTweak('parallax', v)} />
          <TweakButton label="Replay reveal" onClick={() => {
            setRevealed(false);
            setTimeout(() => setRevealed(true), 700);
          }} />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

function Wordmark({ palette }) {
  const isMobile = useIsMobile();
  return (
    <div style={{ position: 'relative', padding: '8px 20px' }}>
      <div
        style={{
          position: 'absolute',
          inset: '-30px -60px',
          background: `radial-gradient(ellipse at center, ${palette.bg} 0%, ${palette.bg} 38%, transparent 78%)`,
          pointerEvents: 'none',
          zIndex: -1
        }} />

      <h1 style={{
        margin: 0,
        fontFamily: '"Instrument Serif", "Times New Roman", serif',
        fontWeight: 400,
        fontSize: 'clamp(72px, 11vw, 168px)',
        lineHeight: 0.92,
        letterSpacing: '-0.02em',
        color: palette.fg,
        fontStyle: 'italic',
        textAlign: 'center',
        WebkitTextStroke: isMobile ? '1px #000000' : '2px #000000'
      }}>
        Eyeballs.
      </h1>
    </div>);

}

function PillButton({ palette, label, variant = 'solid', onClick }) {
  const [hover, setHover] = useAppState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        padding: '13px 24px',
        borderRadius: 999,
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: 12,
        fontWeight: 500,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        background: '#ffffff',
        color: palette.fgInk,
        border: '1px solid #ffffff',
        cursor: 'pointer',
        transition: 'transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease-out',
        transform: hover ? 'scale(1.08)' : 'scale(1)',
        boxShadow: hover
          ? '0 8px 30px rgba(0,0,0,0.22), 0 0 0 1.5px #000000'
          : '0 0 0 1.5px #000000',
        outline: 'none'
      }}>
      
      <span>{label}</span>
      <span style={{
        display: 'inline-block',
        transform: hover ? 'translateX(5px)' : 'translateX(0)',
        transition: 'transform 220ms ease-out'
      }}>→</span>
    </button>);

}

function Footer({ palette, visible }) {
  const isMobile = useIsMobile();
  return (
    <div style={{
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      padding: isMobile ? '12px 20px' : '14px 28px',
      paddingTop: isMobile ? 24 : 30,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: isMobile ? 12 : 24,
      color: palette.fg,
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      opacity: visible ? 1 : 0,
      transition: 'opacity 800ms ease-out 400ms',
      zIndex: 20,
      background: `linear-gradient(to top, ${palette.bg} 0%, ${palette.bg} 60%, transparent 100%)`
    }}>
      <div style={{ opacity: 0.92 }}>
        © Eyeballs 2026
      </div>
      {!isMobile && (
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <FooterLink label="IG" href="#" />
          <FooterLink label="X" href="#" />
          <FooterLink label="TT" href="#" />
          <FooterLink label="YT" href="#" />
        </div>
      )}
      <div style={{ opacity: 0.92, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'currentColor',
          animation: 'blink 2s ease-in-out infinite'
        }} />
        Always watching
      </div>
    </div>);

}

function FooterLink({ label, href }) {
  const [hover, setHover] = useAppState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={(e) => e.preventDefault()}
      style={{
        color: 'inherit',
        textDecoration: 'none',
        opacity: hover ? 1 : 0.7,
        transition: 'opacity 180ms',
        cursor: 'none'
      }}>
      
      {label}
    </a>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);