// garatofive.com — landing portal
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "paper",
  "centerpiece": "lattice",
  "typeface": "mono",
  "motion": 1,
  "wordmarkScale": 1
} /*EDITMODE-END*/;

// ────────────────────────────────────────────────────────────────────
// THEMES
// ────────────────────────────────────────────────────────────────────
const THEMES = {
  midnight: {
    '--bg': '#050510',
    '--bg-2': '#0a0a18',
    '--fg': '#f4f3ff',
    '--fg-dim': '#6b6a8a',
    '--fg-mute': '#3a3a55',
    '--accent-1': '#7c5cff',
    '--accent-2': '#34d8ff',
    '--accent-3': '#ff6ec4',
    '--rule': 'rgba(255,255,255,0.08)',
    '--grain': '0.06'
  },
  chrome: {
    '--bg': '#0c0c0e',
    '--bg-2': '#15151a',
    '--fg': '#f8f6f1',
    '--fg-dim': '#7a766c',
    '--fg-mute': '#3d3a35',
    '--accent-1': '#ff8a3c',
    '--accent-2': '#ff5fa2',
    '--accent-3': '#5fb9ff',
    '--rule': 'rgba(255,255,255,0.07)',
    '--grain': '0.05'
  },
  phosphor: {
    '--bg': '#020403',
    '--bg-2': '#061008',
    '--fg': '#d4ffce',
    '--fg-dim': '#5a8a52',
    '--fg-mute': '#274422',
    '--accent-1': '#b8ff3a',
    '--accent-2': '#3aff9c',
    '--accent-3': '#caff5a',
    '--rule': 'rgba(184,255,58,0.10)',
    '--grain': '0.08'
  },
  paper: {
    '--bg': '#f1ede4',
    '--bg-2': '#e6e0d3',
    '--fg': '#0d0d0d',
    '--fg-dim': '#7c7568',
    '--fg-mute': '#b8b1a3',
    '--accent-1': '#e53935',
    '--accent-2': '#1a1a1a',
    '--accent-3': '#c8581a',
    '--rule': 'rgba(0,0,0,0.10)',
    '--grain': '0.04'
  }
};

const TYPE = {
  editorial: {
    '--font-display': '"Instrument Serif", "Times New Roman", serif',
    '--font-display-style': 'italic',
    '--font-display-weight': '400',
    '--font-display-tracking': '-0.02em',
    '--font-display-size': 'clamp(96px, 19vw, 320px)',
    '--font-ui': '"Geist Mono", ui-monospace, monospace',
    '--font-body': '"Geist", "Helvetica Neue", sans-serif'
  },
  mono: {
    '--font-display': '"Geist Mono", ui-monospace, monospace',
    '--font-display-style': 'normal',
    '--font-display-weight': '500',
    '--font-display-tracking': '-0.06em',
    '--font-display-size': 'clamp(72px, 14vw, 240px)',
    '--font-ui': '"Geist Mono", ui-monospace, monospace',
    '--font-body': '"Geist Mono", ui-monospace, monospace'
  },
  sans: {
    '--font-display': '"Geist", "Helvetica Neue", sans-serif',
    '--font-display-style': 'normal',
    '--font-display-weight': '500',
    '--font-display-tracking': '-0.055em',
    '--font-display-size': 'clamp(88px, 17vw, 280px)',
    '--font-ui': '"Geist Mono", ui-monospace, monospace',
    '--font-body': '"Geist", "Helvetica Neue", sans-serif'
  }
};

// ────────────────────────────────────────────────────────────────────
// Tiny live UTC clock
// ────────────────────────────────────────────────────────────────────
function useClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(now.getUTCHours()).padStart(2, '0');
  const mm = String(now.getUTCMinutes()).padStart(2, '0');
  const ss = String(now.getUTCSeconds()).padStart(2, '0');
  return `${hh}:${mm}:${ss} utc`;
}

// ────────────────────────────────────────────────────────────────────
// Mouse parallax hook
// ────────────────────────────────────────────────────────────────────
function useParallax(strength = 1) {
  const [p, setP] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => {
      const x = e.clientX / window.innerWidth - 0.5;
      const y = e.clientY / window.innerHeight - 0.5;
      setP({ x, y });
    };
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return { x: p.x * strength, y: p.y * strength };
}

// ────────────────────────────────────────────────────────────────────
// Corner labels
// ────────────────────────────────────────────────────────────────────
function CornerLabel({ pos, children, parallax }) {
  const positions = {
    tl: { top: 28, left: 32, textAlign: 'left' },
    tr: { top: 28, right: 32, textAlign: 'right' },
    bl: { bottom: 28, left: 32, textAlign: 'left' },
    br: { bottom: 28, right: 32, textAlign: 'right' }
  };
  return (
    <div
      style={{
        position: 'absolute',
        ...positions[pos],
        fontFamily: 'var(--font-ui)',
        fontSize: 11,
        letterSpacing: '0.06em',
        textTransform: 'uppercase',
        color: 'var(--fg-dim)',
        lineHeight: 1.55,
        transform: parallax ? `translate(${parallax.x * 8}px, ${parallax.y * 8}px)` : undefined,
        transition: 'transform 0.3s cubic-bezier(.2,.6,.2,1)',
        zIndex: 4
      }}>
      {children}</div>);

}

// ────────────────────────────────────────────────────────────────────
// Centerpiece renderer
// ────────────────────────────────────────────────────────────────────
function Centerpiece({ kind, speed }) {
  if (kind === 'prism') return <window.Prism speed={speed} />;
  if (kind === 'lattice') return <window.Lattice speed={speed} />;
  if (kind === 'ribbon') return <window.Ribbon speed={speed} />;
  return <window.Orbital speed={speed} />;
}

// ────────────────────────────────────────────────────────────────────
// Marquee strip
// ────────────────────────────────────────────────────────────────────
function Marquee({ items }) {
  const content =
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 40, paddingRight: 40 }}>
      {items.map((it, i) =>
    <React.Fragment key={i}>
          <span>{it}</span>
          <span style={{ color: 'var(--accent-1)' }}>✦</span>
        </React.Fragment>
    )}
    </span>;

  return (
    <div style={{
      position: 'relative',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      padding: '14px 0',
      fontFamily: 'var(--font-ui)',
      fontSize: 12,
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: 'var(--fg-dim)'
    }}>
      <div style={{ display: 'inline-block', animation: 'marquee 40s linear infinite' }}>
        {content}{content}{content}
      </div>
    </div>);

}

// ────────────────────────────────────────────────────────────────────
// Subdomain row
// ────────────────────────────────────────────────────────────────────
function SubdomainRow({ subdomain, label, note }) {
  return (
    <a
      href={`https://${subdomain}`}
      style={{
        display: 'grid',
        gridTemplateColumns: '20ch 1fr auto',
        gap: 24,
        alignItems: 'baseline',
        padding: '22px 0',
        borderBottom: '1px solid var(--rule)',
        color: 'var(--fg)',
        textDecoration: 'none',
        fontFamily: 'var(--font-ui)',
        fontSize: 13,
        letterSpacing: '0.02em',
        transition: 'opacity 0.2s, transform 0.3s cubic-bezier(.2,.6,.2,1)'
      }}
      onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateX(8px)';}}
      onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateX(0)';}}>
      
      <span style={{ color: 'var(--accent-1)' }}>{subdomain}</span>
      <span style={{ color: 'var(--fg)' }}>{label}</span>
      <span style={{ color: 'var(--fg-dim)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <span>{note}</span>
        <span style={{ fontSize: 16 }}>→</span>
      </span>
    </a>);

}

// ────────────────────────────────────────────────────────────────────
// MAIN APP
// ────────────────────────────────────────────────────────────────────
function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const setTweak = (k, v) => setT({ [k]: v });
  const clock = useClock();
  const parallax = useParallax(t.motion);

  // apply theme + type vars on :root
  useEffect(() => {
    const theme = THEMES[t.theme] || THEMES.midnight;
    const type = TYPE[t.typeface] || TYPE.editorial;
    const root = document.documentElement;
    Object.entries(theme).forEach(([k, v]) => root.style.setProperty(k, v));
    Object.entries(type).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [t.theme, t.typeface]);

  const speed = t.motion;

  return (
    <>
      {/* HERO */}
      <section className="hero" data-screen-label="01 Hero">
        {/* Grid overlay */}
        <div className="grid-overlay" aria-hidden="true" />

        {/* Centerpiece */}
        <div
          className="centerpiece-wrap"
          style={{
            transform: `translate(${parallax.x * 30}px, ${parallax.y * 30}px) scale(1)`,
            transition: 'transform 0.6s cubic-bezier(.2,.6,.2,1)'
          }}>
          
          <Centerpiece kind={t.centerpiece} speed={speed} />
        </div>

        {/* Wordmark layered over center */}
        <div
          className="wordmark-wrap"
          style={{
            transform: `translate(${parallax.x * -10}px, ${parallax.y * -10}px)`,
            transition: 'transform 0.6s cubic-bezier(.2,.6,.2,1)'
          }}>
          
          <h1 className="wordmark" style={{ fontSize: `calc(var(--font-display-size) * ${t.wordmarkScale})` }}>
            garatofive
          </h1>
        </div>

        {/* HUD corners */}
        <CornerLabel pos="tl" parallax={parallax}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="status-dot" />
            <span>garatofive&nbsp;/&nbsp;portal</span>
          </div>
          <div style={{ marginTop: 6, color: 'var(--fg-mute)' }}>established mmxxv</div>
        </CornerLabel>

        <CornerLabel pos="tr" parallax={parallax}>
          <div>{clock}</div>
          <div style={{ marginTop: 6, color: 'var(--fg-mute)' }}>n 40.71° · w 74.00°</div>
        </CornerLabel>

        <CornerLabel pos="bl" parallax={parallax}>
          <div style={{ color: 'var(--fg)', fontSize: 12 }}>DAN WARD</div>
          <div style={{ marginTop: 6 }}>ai risk · innovation · strategy</div>
        </CornerLabel>

        <CornerLabel pos="br" parallax={parallax}>
          <div>signal nominal</div>
          <div style={{ marginTop: 6, color: 'var(--fg-mute)' }}>v.05 — index page</div>
        </CornerLabel>

        {/* Tagline strip */}
        <div className="tagline">
          <span className="tagline-rule" />
          <span>a portal &nbsp;//&nbsp; not a destination</span>
          <span className="tagline-rule" />
        </div>

        {/* Scroll affordance */}
        <div className="scroll-cue">
          <span>scroll</span>
          <span className="scroll-line" />
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={[
      'ai risk advisory',
      'frontier policy',
      'innovation strategy',
      'red-teaming',
      'safety evaluations',
      'governance',
      'speaking · writing',
      'private counsel']
      } />

      {/* INDEX / SUBDOMAINS */}
      <section className="index" data-screen-label="02 Index">
        <div className="index-head">
          <div className="eyebrow">§ index</div>
          <h2 className="index-title">where to find me</h2>
          <p className="index-blurb">
            this domain is a lobby. the work lives in subdomains.
          </p>
        </div>

        <div className="index-list">
          <SubdomainRow
            subdomain="oai.garatofive.com"
            label="prototypes, concepts, frameworks"
            note="live" />

        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="footer-grid">
          <div className="footer-mark">
            <span className="footer-glyph">⬡</span>
            <span>GARATOFIVE COM.</span>
          </div>
          <div className="footer-meta">
            <span>© mmxxv–mmxxvi</span>
            <span className="footer-dot">·</span>
            <span>all rights reserved</span>
            <span className="footer-dot">·</span>
            <span>built for thinking in public</span>
          </div>
          <div className="footer-coord">{clock}</div>
        </div>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Theme">
          <TweakSelect
            label="Palette"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
            { value: 'midnight', label: 'Midnight (iridescent)' },
            { value: 'chrome', label: 'Chrome (warm holo)' },
            { value: 'phosphor', label: 'Phosphor (Y2K green)' },
            { value: 'paper', label: 'Paper (Swiss)' }]
            } />
          
        </TweakSection>

        <TweakSection label="Centerpiece">
          <TweakSelect
            label="Composition"
            value={t.centerpiece}
            onChange={(v) => setTweak('centerpiece', v)}
            options={[
            { value: 'orbital', label: 'Orbital HUD' },
            { value: 'prism', label: 'Iridescent Prism' },
            { value: 'lattice', label: 'Wireframe Lattice' },
            { value: 'ribbon', label: 'Ribbon Sweep' }]
            } />
          
        </TweakSection>

        <TweakSection label="Typography">
          <TweakSelect
            label="Wordmark"
            value={t.typeface}
            onChange={(v) => setTweak('typeface', v)}
            options={[
            { value: 'editorial', label: 'Editorial Italic' },
            { value: 'mono', label: 'Display Mono' },
            { value: 'sans', label: 'Geometric Sans' }]
            } />
          
          <TweakSlider
            label="Wordmark scale"
            value={t.wordmarkScale}
            onChange={(v) => setTweak('wordmarkScale', v)}
            min={0.6} max={1.6} step={0.05} />
          
        </TweakSection>

        <TweakSection label="Motion">
          <TweakSlider
            label="Intensity"
            value={t.motion}
            onChange={(v) => setTweak('motion', v)}
            min={0} max={2.5} step={0.1} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

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