/* global React */
const { useEffect, useRef } = React;

// ---------- Reveal hook (robust: reveals on view, with failsafe) ----------
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reveal = () => el.classList.add('in');
    // already in/above viewport on mount → reveal immediately
    if (el.getBoundingClientRect().top < window.innerHeight * 0.92) {
      reveal();
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { reveal(); io.disconnect(); } });
    }, { threshold: 0.01, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ---------- Arrow ----------
function Arrow({ size = 12 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 12 12" fill="none">
      <path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/>
    </svg>
  );
}

// ---------- Nav ----------
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#top">
          <span className="mark">P</span>
          <span>Prashant Vanka</span>
        </a>
        <div className="nav-links">
          <a href="#story">Story</a>
          <a href="#principles">Principles</a>
          <a href="#avivo">Avivo</a>
          <a href="#ventures">Ventures</a>
          <a href="#contact">Contact</a>
        </div>
        <a className="nav-cta" href="#contact">
          Work With Me <Arrow />
        </a>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ photoTreatment }) {
  return (
    <header className="hero" id="top">
      <div className="hero-media" data-treatment={photoTreatment}>
        <img className="hero-img" src="assets/prashant-hero.jpg" alt="Prashant Vanka" />
      </div>
      <div className="hero-overlay" />
      <div className="shell hero-content">
        <div className="hero-kicker">The next chapter —</div>
        <div className="hero-eyebrow eyebrow"><span className="dot" />Founder · Operator · Capital Allocator</div>
        <h1 className="display hero-name">
          Build<span className="accent">.</span> Compound<span className="accent">.</span> Repeat<span className="accent">.</span>
        </h1>
        <p className="hero-sub">
          I'm <b>Prashant Vanka</b> — 14 years building real estate companies, $100M+ developed across 200+ properties.
          Now I'm building <b>Avivo Capital</b>, an AI-powered fund targeting <b>20%+ net IRR</b> on America's best infill lots.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary" href="#avivo">Invest in Avivo <Arrow /></a>
          <a className="btn btn-ghost" href="#story">My Story <Arrow /></a>
        </div>
      </div>
      <div className="hero-meta">
        <span className="vert">AUSTIN, TX · 2026</span>
        <span>14 YRS · $100M+ DEV<br/>200+ PROPERTIES</span>
      </div>
      <div className="hero-scrolldown">
        <span className="line" />
        SCROLL
      </div>
    </header>
  );
}

// ---------- Marquee ----------
function Marquee() {
  const items = ['Operator', 'Investor', 'Builder', 'Allocator', 'Founder'];
  const set = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {set.map((w, i) => (
          <div className="marquee-item" key={i}>
            <span className={i % 2 === 1 ? 'outline' : ''}>{w}</span>
            <span className="sep" />
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Stats ----------
function Stats() {
  const stats = [
    { num: '100', unit: 'M+', label: 'Capital Developed' },
    { num: '200', unit: '+', label: 'Properties Acquired' },
    { num: '14', unit: 'YR', label: 'Track Record' },
    { num: '400', unit: 'M', label: 'Total Asset Value' },
  ];
  return (
    <section className="stats">
      <div className="shell">
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat-num display">
                {s.num}<span className="unit">{s.unit}</span>
              </div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Story ----------
function Story({ photoTreatment }) {
  const ref = useReveal();
  return (
    <section className="section story" id="story">
      <div className="shell story-grid">
        <div className="story-figure reveal" ref={ref}>
          <div className="story-portrait" data-treatment={photoTreatment}>
            <img className="story-img" src="assets/photos/about.jpg" alt="Prashant Vanka" />
            <div className="story-portrait-tag">Austin, TX</div>
          </div>
        </div>
        <div className="story-content">
          <div className="eyebrow"><span className="dot" />01 — The Story</div>
          <h2 className="story-headline display">
            I build companies that <em>do the unglamorous work</em> better than anyone else.
          </h2>
          <div className="story-body">
            <p>
              I'm a real estate developer with <b>14 years in the field, $100M+ of completed projects across 200+ properties,
              and roughly $400M in total asset value.</b> I studied Statistics, Finance &amp; Economics at Cal Poly SLO — and I've
              spent my career proving that <b>data science and a hard hat belong on the same job site.</b>
            </p>
            <p>
              I'm also an active angel investor in technology — backing early-stage founders across the US and India
              building companies that matter.
            </p>
            <p>
              Outside of work, I'm into meditation, strength training, and building systems that make complex things
              simple. I live in <b>Austin, TX.</b>
            </p>
          </div>
          <blockquote className="story-pullquote">
            "Most operators are afraid of capital. Most capital is afraid of operations. The opportunity sits in the gap."
          </blockquote>
          <div className="story-body">
            <p>
              Today that thesis has a name: <b>Avivo.</b> AI-powered acquisition through 8 Homes, production-built construction,
              and institutional returns at startup speed. We've acquired <b>200+ Austin properties below 80% of market value</b> —
              and we're only getting started.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Pillars ----------
function Pillars() {
  const items = [
    { num: '01', title: 'Operate, don\'t speculate', body: 'Returns come from real work — not market timing. I build production systems that compound through every cycle.' },
    { num: '02', title: 'Data on the back of a hard hat', body: 'AI and operational rigor are not opposites. The future of every real economy business is both.' },
    { num: '03', title: 'Aligned, every dollar', body: 'I commit my own capital first. I don\'t charge fees that punish the investor for staying in the deal.' },
    { num: '04', title: 'Speed is the only moat', body: 'In housing, two months of compounded cycle time is the entire margin. I optimize for velocity, relentlessly.' },
  ];
  const ref = useReveal();
  return (
    <section className="section pillars" id="principles">
      <div className="shell">
        <div className="pillars-header reveal" ref={ref}>
          <div>
            <div className="pillars-kicker"><span className="dot" />We engineer <span className="accent">alpha</span></div>
            <h2 className="pillars-title">
              Four <em>principles</em> I won't compromise.
            </h2>
          </div>
          <p className="pillars-intro">
            Every company I've built, every dollar I've raised, every property I've broken ground on
            comes back to these.
          </p>
        </div>
        <div className="pillars-grid">
          {items.map(p => (
            <div className="pillar" key={p.num}>
              <span className="pillar-num">{p.num}</span>
              <h3 className="pillar-title">{p.title}</h3>
              <p className="pillar-body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Stats, Story, Pillars, Arrow, useReveal });