// Hero, Nav, Footer for the portfolio site
// Reads tweaks via props (accent, font, hero variant, dark)

const { useState, useEffect, useRef } = React;

function SiteNav({ dark, onToggleDark, accent }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Work', href: '#work' },
    { label: 'About', href: '#about' },
    { label: 'Play', href: '#play' },
    { label: 'Contact', href: '#contact' },
  ];

  return (
    <div style={{
      position: 'fixed', top: 20, left: '50%', transform: 'translateX(-50%)',
      zIndex: 100,
      display: 'flex', alignItems: 'center', gap: 4,
      padding: '6px 6px 6px 18px',
      background: dark ? 'rgba(20,18,30,0.55)' : 'rgba(255,255,255,0.55)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'}`,
      borderRadius: 999,
      backdropFilter: 'blur(24px) saturate(180%)',
      WebkitBackdropFilter: 'blur(24px) saturate(180%)',
      boxShadow: scrolled
        ? (dark ? '0 14px 40px rgba(0,0,0,0.4)' : '0 14px 40px rgba(0,0,0,0.08)')
        : '0 4px 16px rgba(0,0,0,0.06)',
      transition: 'box-shadow .3s, background .3s',
    }}>
      <a href="#top" style={{
        fontSize: 13, fontWeight: 700, marginRight: 14,
        textDecoration: 'none', color: 'inherit',
        letterSpacing: '-0.01em',
      }}>
        <span style={{ color: accent }}>S</span>V
      </a>
      {links.map(l => (
        <a key={l.label} href={l.href} style={{
          padding: '8px 14px', fontSize: 12.5, fontWeight: 500,
          color: dark ? 'rgba(240,238,249,0.78)' : 'rgba(20,18,30,0.78)',
          borderRadius: 999, textDecoration: 'none',
          transition: 'background .15s, color .15s',
        }}
        onMouseEnter={e => { e.currentTarget.style.background = dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
        >{l.label}</a>
      ))}
      <button onClick={onToggleDark} aria-label="Toggle theme" style={{
        width: 32, height: 32, borderRadius: 999, border: 'none',
        background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
        color: 'inherit', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginLeft: 4,
      }}>
        {dark
          ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
          : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>}
      </button>
      <a href={window.PORTFOLIO_LINKS.email ? `mailto:${window.PORTFOLIO_LINKS.email}` : '#contact'} style={{
        padding: '8px 16px', fontSize: 12.5, fontWeight: 600,
        background: dark ? '#f0eef9' : '#0c0a14',
        color: dark ? '#0c0a14' : '#f0eef9',
        border: 'none', borderRadius: 999, cursor: 'pointer',
        marginLeft: 4, textDecoration: 'none',
        whiteSpace: 'nowrap',
      }}>Get in touch</a>
    </div>
  );
}

function Hero({ dark, accent, font, variant = 'centered' }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.65)' : 'rgba(20,18,30,0.65)';

  // Variant: 'centered' | 'split' | 'left'
  if (variant === 'split') return <HeroSplit dark={dark} accent={accent} font={font} fg={fg} muted={muted} />;
  if (variant === 'left')  return <HeroLeft  dark={dark} accent={accent} font={font} fg={fg} muted={muted} />;

  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: '120px 24px 80px',
      textAlign: 'center', zIndex: 2,
    }}>
      <Pill dark={dark} accent={accent}>
        <span style={{
          width: 6, height: 6, borderRadius: 3, marginRight: 8,
          background: '#4ade80', boxShadow: '0 0 8px #4ade80',
        }} />
        Open to internships &amp; opportunities
      </Pill>

      <h1 style={{
        fontFamily: font.display,
        fontSize: 'clamp(64px, 11vw, 168px)',
        fontWeight: 700, letterSpacing: '-0.05em',
        lineHeight: 0.92, margin: '24px auto 0',
        maxWidth: 1200, color: fg,
      }}>
        Siluveru<br/>
        <span style={{
          background: `linear-gradient(135deg, ${accent} 0%, #b48aff 50%, #63b3ed 100%)`,
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          fontStyle: 'italic',
          fontFamily: font.italic || font.display,
          lineHeight: 1.05,
          display: 'inline-block',
          paddingBottom: '0.08em',
        }}>Vashishta.</span>
      </h1>

      <p style={{
        fontSize: 'clamp(15px, 1.3vw, 18px)', lineHeight: 1.5,
        margin: '32px auto 0', maxWidth: 520, color: muted,
        letterSpacing: '0.01em',
      }}>
        AI/ML engineer — neural networks, vision systems, fast inference.
      </p>

      <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
        <a href="#work" className="btn-primary" style={{
          padding: '13px 22px', fontSize: 13, fontWeight: 600,
          background: fg, color: dark ? '#0c0a14' : '#f0eef9',
          border: 'none', borderRadius: 999, cursor: 'pointer',
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          See my work
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
        </a>
        <a href={window.PORTFOLIO_LINKS.github} target="_blank" rel="noreferrer" style={{
          padding: '13px 22px', fontSize: 13, fontWeight: 600,
          background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
          color: fg,
          border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
          borderRadius: 999, cursor: 'pointer',
          backdropFilter: 'blur(20px)',
          textDecoration: 'none',
        }}>GitHub →</a>
      </div>

      <ScrollHint dark={dark} />
    </section>
  );
}

function HeroSplit({ dark, accent, font, fg, muted }) {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr',
      alignItems: 'center', gap: 60,
      padding: '140px 60px 80px', zIndex: 2,
    }}>
      <div>
        <Pill dark={dark} accent={accent}>
          <span style={{
            width: 6, height: 6, borderRadius: 3, marginRight: 8,
            background: '#4ade80', boxShadow: '0 0 8px #4ade80',
          }} />
          Available · AI/ML engineer
        </Pill>
        <h1 style={{
          fontFamily: font.display,
          fontSize: 'clamp(48px, 7vw, 96px)',
          fontWeight: 700, letterSpacing: '-0.04em',
          lineHeight: 0.95, margin: '24px 0 0',
          color: fg,
        }}>
          Sliuveru<br/>
          <span style={{
            background: `linear-gradient(135deg, ${accent} 0%, #b48aff 60%, #63b3ed 100%)`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>Vashishta.</span>
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.55, color: muted,
          margin: '24px 0 0', maxWidth: 500,
        }}>
          I build intelligent systems — neural networks that learn to drive themselves,
          face recognition pipelines that run in real time, and the products that
          carry them.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <a href="#work" style={{
            padding: '13px 22px', fontSize: 13, fontWeight: 600,
            background: fg, color: dark ? '#0c0a14' : '#f0eef9',
            border: 'none', borderRadius: 999, textDecoration: 'none',
          }}>See my work →</a>
          <a href={window.PORTFOLIO_LINKS.github} target="_blank" rel="noreferrer" style={{
            padding: '13px 22px', fontSize: 13, fontWeight: 600,
            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
            color: fg, border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
            borderRadius: 999, textDecoration: 'none',
          }}>GitHub</a>
        </div>
      </div>
      <div style={{ position: 'relative' }}>
        <window.SiteImagePlaceholder label="hero · self portrait" ratio="4/5" radius={24} dark={dark} accent={accent} />
        <FloatingStat dark={dark} accent={accent} style={{ top: 24, left: -32 }} k="100" v="wpm" />
        <FloatingStat dark={dark} accent={accent} style={{ bottom: 60, right: -28 }} k="1640" v="elo" />
      </div>
    </section>
  );
}

function HeroLeft({ dark, accent, font, fg, muted }) {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '140px 80px 80px', zIndex: 2,
    }}>
      <Pill dark={dark} accent={accent}>
        <span style={{
          width: 6, height: 6, borderRadius: 3, marginRight: 8,
          background: '#4ade80', boxShadow: '0 0 8px #4ade80',
        }} />
        AI/ML engineer · open to work
      </Pill>
      <h1 style={{
        fontFamily: font.display,
        fontSize: 'clamp(56px, 10vw, 140px)',
        fontWeight: 700, letterSpacing: '-0.05em',
        lineHeight: 0.88, margin: '24px 0 0', maxWidth: 1200,
        color: fg,
      }}>
        Building<br/>
        <span style={{
          background: `linear-gradient(135deg, ${accent} 0%, #b48aff 50%, #63b3ed 100%)`,
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          fontStyle: 'italic', fontFamily: font.italic || font.display,
        }}>intelligent</span><br/>
        <span style={{ display: 'inline-block', paddingBottom: '0.08em' }}>machines.</span>
      </h1>
      <p style={{
        fontSize: 19, lineHeight: 1.55, color: muted,
        margin: '32px 0 0', maxWidth: 540,
      }}>
        Sliuveru Vashishta — engineer working at the seam where deep learning
        meets shipping real products.
      </p>
      <ScrollHint dark={dark} />
    </section>
  );
}

function Pill({ children, dark, accent }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '6px 14px',
      background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
      borderRadius: 999, fontSize: 12, fontWeight: 500,
      color: dark ? 'rgba(240,238,249,0.85)' : 'rgba(20,18,30,0.85)',
      backdropFilter: 'blur(20px)',
    }}>{children}</div>
  );
}

function FloatingStat({ k, v, style, dark, accent }) {
  return (
    <div style={{
      position: 'absolute', ...style,
      padding: '14px 18px',
      background: dark ? 'rgba(20,18,30,0.6)' : 'rgba(255,255,255,0.7)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
      borderRadius: 16,
      backdropFilter: 'blur(24px) saturate(180%)',
      WebkitBackdropFilter: 'blur(24px) saturate(180%)',
      boxShadow: '0 14px 40px rgba(0,0,0,0.18)',
    }}>
      <div style={{
        fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em',
        background: `linear-gradient(135deg, ${accent}, #b48aff)`,
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
      }}>{k}</div>
      <div style={{
        fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: dark ? 'rgba(240,238,249,0.55)' : 'rgba(20,18,30,0.55)',
        marginTop: 2, fontWeight: 500,
      }}>{v}</div>
    </div>
  );
}

function ScrollHint({ dark }) {
  return (
    <div style={{
      position: 'absolute', bottom: 30, left: '50%', transform: 'translateX(-50%)',
      fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: dark ? 'rgba(240,238,249,0.45)' : 'rgba(20,18,30,0.45)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
    }}>
      <span>Scroll</span>
      <div style={{
        width: 1, height: 32,
        background: `linear-gradient(180deg, ${dark ? 'rgba(240,238,249,0.4)' : 'rgba(20,18,30,0.4)'}, transparent)`,
      }} />
    </div>
  );
}

window.SiteNav = SiteNav;
window.Hero = Hero;