/* global React, ReactDOM, Nav, Hero, Marquee, Stats, Story, Pillars, Arrow, useReveal, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakSelect */
const { useEffect, useRef, useState } = React;

// ---------- Avivo ----------
function Avivo({ photoTreatment }) {
  const ref = useReveal();
  return (
    <section className="section avivo" id="avivo">
      <div className="shell avivo-inner">
        <div className="avivo-tag">
          <span className="pulse" />
          The Next Phase · Fund I Open
        </div>
        <h2 className="avivo-headline reveal" ref={ref}>
          Avivo<span className="accent">.</span> America's<br/>
          best infill lots,<br/>
          built at production speed.<br/>
          Deliver <span className="accent">institutionalized returns.</span>
        </h2>
        <div className="avivo-grid">
          <p className="avivo-copy">
            Avivo Capital is an institutional-grade real estate fund acquiring premium urban lots — sourced through
            <b> proprietary AI that scans over 1M properties daily</b> — and building modern infill homes in
            12–15 months instead of 24+. <b>Targeting 20%+ net IRR</b>, with a fee structure that's a fraction of typical funds.
          </p>
          <div className="avivo-visual" data-treatment={photoTreatment}>
            <img className="avivo-visual-img" src="assets/photos/avivo-framing.jpg" alt="Avivo production-built home under construction" />
            <span className="badge">● ON SITE · PRODUCTION-BUILT</span>
            <div className="avivo-card">
              <div className="label">Target Net IRR</div>
              <div className="value"><span className="accent">20</span>%+</div>
              <div className="delta">↑ vs 9% public REIT median</div>
            </div>
          </div>
        </div>
        <div className="avivo-bullets">
          <div className="avivo-bullet">
            <div className="num">40%</div>
            <div className="label">Lower Cost</div>
            <div className="desc">Production-built construction with repeatable plans cuts costs vs. traditional custom.</div>
          </div>
          <div className="avivo-bullet">
            <div className="num">2×</div>
            <div className="label">Faster Cycle</div>
            <div className="desc">12–15 month buy-to-sell vs. 24+ months — every month is compounded return.</div>
          </div>
          <div className="avivo-bullet">
            <div className="num">1M+</div>
            <div className="label">Lots Scanned Daily</div>
            <div className="desc">AI surfaces off-market, pre-foreclosure, and absentee owners before anyone else.</div>
          </div>
        </div>
        <div className="avivo-band" data-treatment={photoTreatment}>
          <img className="avivo-band-img" src="assets/photos/skyline.jpg" alt="Downtown Austin skyline over Lady Bird Lake at golden hour" />
          <div className="band-caption">Austin, TX · Downtown skyline over Lady Bird Lake</div>
        </div>
        <div className="hero-actions" style={{ marginTop: 56 }}>
          <a className="btn btn-primary" href="https://avivocapital.com" target="_blank" rel="noopener">
            Visit Avivo Capital <Arrow />
          </a>
          <a className="btn btn-ghost" href="https://www.avivocapital.com/fund" target="_blank" rel="noopener">Request the PPM <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Properties (current real estate projects) ----------
function Properties() {
  const props = [
    { name: '1710 S 5th St', kicker: 'Bouldin Residences', url: 'https://www.bouldinliving.com/', img: 'assets/photos/bouldin.jpg' },
    { name: '1004 Juanita Ave', kicker: 'Active Infill Build', url: 'https://www.1004juanita.com/', img: 'assets/photos/juanita.jpg' },
    { name: '2014 E 10th St', kicker: 'East Austin Infill', url: 'https://www.luxuryon10th.com/', img: 'assets/photos/luxury10th.jpg' },
    { name: '2007 Canterbury St', kicker: 'Luxury East Austin Build', url: 'https://www.avivocapital.com/projects/2007-canterbury-01', img: 'assets/photos/2007-canterbury.jpg' },
    { name: '2208 Canterbury St', kicker: 'New East Austin Lot', url: 'https://www.avivocapital.com/projects', img: 'assets/photos/2208-canterbury.jpg' },
    { name: '2301 Canterbury St', kicker: 'Completed Modern Infill', url: 'https://www.avivocapital.com/projects/2301-canterbury-01', img: 'assets/photos/2301-canterbury.jpg' },
    { name: '6305 Camino Real', kicker: 'Updated Approved Plan', url: 'https://www.avivocapital.com/projects', img: 'assets/photos/6305-camino.jpg' },
    { name: '1402 Valley Ridge', kicker: 'Final Design Rendering', url: 'https://www.avivocapital.com/projects/1402-valley-ridge-01', img: 'assets/photos/1402-valley.jpg' },
    { name: '1804 Ullrich Ave', kicker: 'New Brentwood Project', url: 'https://www.1804ullrich.com/', img: 'assets/photos/ullrich.jpg' },
    { name: '2106 Rabb Glen', kicker: 'New Infill Acquisition', url: 'https://www.avivocapital.com/projects', img: 'assets/photos/2106-rabb.jpg' },
  ];
  const ref = useReveal();
  return (
    <section className="section properties" id="properties">
      <div className="shell">
        <div className="properties-header reveal" ref={ref}>
          <h2 className="properties-title display">Current real estate projects.</h2>
          <div className="eyebrow"><span className="dot" />10 active builds · the acquisition engine behind Avivo</div>
        </div>
        <div className="properties-grid">
          {props.map(p => (
            <a className="property" key={p.name} href={p.url} target="_blank" rel="noopener">
              <div className="property-media">
                {p.img
                  ? <img className="property-img" src={p.img} alt={p.name} />
                  : <div className="placeholder"><span>{p.kicker}</span></div>}
                <div className="property-scrim" />
                <div className="property-overlay">
                  <span className="property-kicker">{p.kicker}</span>
                  <h3 className="property-name">{p.name}</h3>
                </div>
                <span className="property-view">View <span className="venture-arrow">↗</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Ventures (two operating engines) ----------
function Ventures() {
  const items = [
    {
      name: '8 Homes AI',
      cat: 'AI · Real Estate Acquisition',
      desc: 'Predictive AI that scans 1M+ properties daily and filters 125+ variables down to the 25,000 highest-potential lots — then sends 300 data-driven offers a month. The sourcing edge behind every Avivo deal.',
      year: '2021 — Present',
      tag: 'Engine 01',
      url: 'https://8homes.ai',
    },
    {
      name: 'Avivo Capital',
      cat: 'Institutional Real Estate Fund',
      desc: 'We acquire America\'s best infill lots and build high-yield modern homes — production-built at 2× the speed and 40% lower cost. Fund I targets 20%+ net IRR for accredited investors.',
      year: '2024 — Present',
      tag: 'Engine 02',
      url: 'https://avivocapital.com',
    },
  ];
  const ref = useReveal();
  return (
    <section className="section ventures" id="ventures">
      <div className="shell">
        <div className="ventures-header reveal" ref={ref}>
          <h2 className="ventures-title display">
            Focused on <em>two</em> operating engines.
          </h2>
          <div className="eyebrow"><span className="dot" />02 — Where I'm building today</div>
        </div>
        <div className="engines-grid">
          {items.map(v => (
            <a className="engine" key={v.name} href={v.url} target="_blank" rel="noopener">
              <div className="engine-top">
                <span className="engine-tag">{v.tag}</span>
                <span className="venture-arrow">↗</span>
              </div>
              <h3 className="engine-name">{v.name}</h3>
              <span className="venture-cat">{v.cat}</span>
              <p className="engine-desc">{v.desc}</p>
              <span className="venture-year">{v.year}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Angel Investments (logo cards) ----------
function AngelInvestments() {
  const ref = useReveal();
  const L = 'assets/logos/';
  const companies = [
    { name: 'TrueFoundry', img: L+'Truefoundry.png' },
    { name: 'Inito', img: L+'Inito.png' },
    { name: 'Explorex', img: L+'Explorex.png' },
    { name: 'Kidex', img: L+'Kidex.png' },
    { name: 'HEN Nozzles', img: L+'hennozzles-v2.png', dark: true },
    { name: 'Kollective', img: L+'kollective-ink.png' },
    { name: 'SpotOn', img: L+'logo-spoton.svg' },
    { name: 'Guesthouse', img: L+'logo-guesthouse.svg' },
    { name: 'Gaana AI', img: L+'GaanaAI.png' },
    { name: 'Gloroots', img: L+'Gloroots.png' },
    { name: 'Meomind', img: L+'Meomind.png' },
    { name: 'BasePair', img: L+'BasePair.png' },
    { name: 'Conifer', img: L+'Conifer.png' },
    { name: 'Money Club', img: L+'MoneyClub.png' },
    { name: 'Launcheazy', img: L+'Launcheazy.png' },
    { name: 'Foxo', img: L+'foxo-v2.png' },
    { name: 'The Energy Company', img: L+'EnergyCompany.png' },
    { name: 'Optiwise', img: L+'Optiwise.png' },
    { name: 'Gimbal Space', img: L+'gimbal-v2.png' },
    { name: 'vHub', img: L+'vHub.png' },
    { name: 'Rexera', img: L+'Rexera.png' },
    { name: 'ShopAdvisor', img: L+'Shopadvisor.png' },
    { name: 'Furnishka', img: L+'Furnishka.png' },
    { name: 'Earkart', img: L+'Earkart.png' },
    { name: 'Develo', img: L+'Develo.png' },
    { name: 'Perceptyne', img: L+'perceptyne-v2.png' },
    { name: 'LivSYT', img: L+'livsyt-v2.png' },
    { name: 'Zime', img: L+'Zime.png' },
    { name: 'FlashAid', img: L+'flashaid-v2.png' },
  ];
  const run = [...companies, ...companies];
  return (
    <section className="section--tight angels" id="ventures-angels">
      <div className="shell">
        <div className="angels-header reveal" ref={ref}>
          <h2 className="angels-title display">Angel investments &amp; ventures.</h2>
          <p className="angels-intro">
            I invest in outstanding founders working on big problems — from restaurant tech to AI infrastructure
            to India's emerging startup ecosystem. <b>29 companies and counting.</b>
          </p>
        </div>
      </div>
      <div className="logos-marquee" aria-label="Companies backed">
        <div className="logos-track">
          {run.map((c, i) => (
            <div className={'logo-card' + (c.dark ? ' dark' : '')} key={i} aria-hidden={i >= companies.length}>
              <div className="logo-card-img">
                <img src={c.img} alt={c.name} />
              </div>
              <span className="logo-card-name">{c.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Press ----------
function Press() {
  return (
    <section className="press">
      <div className="shell press-row">
        <div className="press-label">As Featured In</div>
        <div className="press-logos">
          <div className="press-logo">FORBES</div>
          <div className="press-logo serif">Bloomberg</div>
          <div className="press-logo">INC.</div>
          <div className="press-logo serif">The Real Deal</div>
          <div className="press-logo">TECHCRUNCH</div>
        </div>
      </div>
    </section>
  );
}

// ---------- CTA ----------
function CTA() {
  const ref = useReveal();
  return (
    <section className="section cta" id="contact">
      <div className="cta-media" aria-hidden="true">
        <div className="placeholder">
          <span>Sunrise over an Avivo property / wide open land<br/>aspirational · sense of an ideal future</span>
        </div>
      </div>
      <div className="cta-overlay" aria-hidden="true" />
      <div className="shell cta-inner reveal" ref={ref}>
        <div className="eyebrow" style={{ justifyContent: 'center', display: 'flex', marginBottom: 28 }}>
          <span className="dot" /> Let's build
        </div>
        <h2 className="cta-headline">
          What are you<br/>
          <em>building</em>?
        </h2>
        <p className="cta-sub">
          Whether you're an accredited investor exploring Avivo, an operator who wants to compare notes,
          or a journalist with a sharp question — I respond personally.
        </p>
        <div className="cta-actions">
          <a className="btn btn-primary" href="https://www.avivocapital.com/contact" target="_blank" rel="noopener">Book a 30-min call <Arrow /></a>
          <a className="btn btn-ghost" href="mailto:prashant@prashantvanka.com">prashant@prashantvanka.com <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="footer-brand display">PV<span className="accent">.</span></div>
            <p className="footer-tag">Operator, investor, and founder building America's next generation of real-economy companies. Based in Austin, TX.</p>
          </div>
          <div>
            <div className="footer-col-title">Site</div>
            <ul className="footer-list">
              <li><a href="#story">Story</a></li>
              <li><a href="#principles">Principles</a></li>
              <li><a href="#ventures">Ventures</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-title">Avivo</div>
            <ul className="footer-list">
              <li><a href="https://www.avivocapital.com/fund" target="_blank" rel="noopener">Overview</a></li>
              <li><a href="https://www.avivocapital.com/fund" target="_blank" rel="noopener">Fund I PPM</a></li>
              <li><a href="https://www.avivocapital.com/fund" target="_blank" rel="noopener">Investor Login</a></li>
              <li><a href="https://www.avivocapital.com/#track-record" target="_blank" rel="noopener">Track Record</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-title">Connect</div>
            <ul className="footer-list">
              <li><a href="https://www.linkedin.com/in/prashantvanka/" target="_blank" rel="noopener">LinkedIn</a></li>
              <li><a href="https://x.com/pvanka" target="_blank" rel="noopener">X / Twitter</a></li>
              <li><a href="https://www.avivocapital.com/contact" target="_blank" rel="noopener">Contact</a></li>
              <li><a href="mailto:prashant@prashantvanka.com">Email</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Prashant Vanka. All rights reserved.</span>
          <span>Made in Austin, TX · Built on principles, not vibes.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Tweaks defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF4D1F",
  "typepair": "bebas",
  "photoTreatment": "warm",
  "density": "default"
}/*EDITMODE-END*/;

// ---------- App ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to DOM
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.body.dataset.typepair = t.typepair;
    document.body.dataset.density = t.density;
  }, [t.accent, t.typepair, t.density]);

  return (
    <React.Fragment>
      <Nav />
      <Hero photoTreatment={t.photoTreatment} />
      <Marquee />
      <Stats />
      <Story photoTreatment={t.photoTreatment} />
      <Pillars />
      <Avivo photoTreatment={t.photoTreatment} />
      <Properties />
      <Ventures />
      <AngelInvestments />
      <Press />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent Color">
          <TweakColor
            label="Hot accent"
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#FF4D1F', '#E63946', '#D4A55A', '#00D68F', '#5B8DEF']}
          />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakSelect
            label="Pair"
            value={t.typepair}
            onChange={(v) => setTweak('typepair', v)}
            options={[
              { value: 'bebas', label: 'Bebas Neue · Inter (energetic)' },
              { value: 'anton', label: 'Anton · Inter (heavyweight)' },
              { value: 'archivo', label: 'Archivo Black · Inter (modern)' },
              { value: 'fraunces', label: 'Fraunces · Space Grotesk (editorial)' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Photo Treatment">
          <TweakRadio
            label="Portrait"
            value={t.photoTreatment}
            onChange={(v) => setTweak('photoTreatment', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'bw', label: 'B&W' },
              { value: 'duotone', label: 'Duotone' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Layout Density">
          <TweakRadio
            label="Vertical rhythm"
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'default', label: 'Default' },
              { value: 'airy', label: 'Airy' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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