/* eslint-disable */
/* global React, YNData */
const { useState, useEffect, useRef } = React;
const { VENTURES, QUICK_VENTURES, RECEIPTS, STEPS, TAPE } = window.YNData;

/* ---------- Tiny shared icons ---------- */
const Arrow = (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>;
const ExternalArrow = (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg>;

/* ---------- Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav-inner">
        <a className="brand" href="#">YOUNYC<span className="dot">.</span></a>
        <div className="nav-links">
          <a href="#work">Builds</a>
          <a href="#thinking">Thinking</a>
          <a href="#process">Playbook</a>
        </div>
        <a className="nav-cta" href="#contact">
          <span className="nav-cta-dot"></span>
          <span className="nav-cta-status">Available</span>
          <span className="nav-cta-sep">·</span>
          <span className="nav-cta-action">Book a call</span>
          <Arrow />
        </a>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ onDeep }) {
  const jump = (id) => (e) => { e.preventDefault(); onDeep(id); };
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-grid"></div>
      <div className="glow-amber"></div>
      <div className="glow-orange"></div>
      <div className="container hero-inner">
        <span className="hero-status">
          <span className="label">ACTIVE BUILDS</span>
          <span className="hero-status-items">
            <a className="hs-item" href="#thinking" onClick={jump('contractorhub')}>ContractorHubNYC</a>
            <a className="hs-item" href="#thinking" onClick={jump('proofclock')}>ProofClock</a>
            <a className="hs-item" href="#thinking" onClick={jump('datapulse')}>DataPulse</a>
          </span>
        </span>
        <h1>
          Real software<br/>
          for <span className="strike">SMBs</span> the<br/>
          <span className="accent">businesses around you.</span>
        </h1>
        <div className="hero-sub">
          <p className="hero-lede">
            I'm a one-person studio in NYC building <strong>real, shipping products</strong> for the
            small and medium businesses the big consultancies won't touch. A growing shelf of live products.
            AI in the loop, no PMs in the middle, V1 in weeks — not months.
          </p>
          <div className="hero-cta">
            <a className="btn-primary" href="#contact">
              Book a strategy session<Arrow />
            </a>
            <a className="btn-secondary" href="#work">See the builds</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Receipts ---------- */
function Receipts() {
  return (
    <section className="receipts">
      <div className="container">
        <div className="receipts-grid">
          {RECEIPTS.map(r => (
            <div className="receipt" key={r.label}>
              <div className="num">{r.num}{r.sup ? <sup>{r.sup}</sup> : null}</div>
              <div className="label">{r.label}</div>
              <div className="meta">{r.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Tape (marquee) ---------- */
function Tape() {
  const items = [...TAPE, ...TAPE];
  return (
    <div className="tape" aria-hidden>
      <div className="tape-track">
        {items.map((t, i) => (
          <span className="tape-item" key={i}>
            <span>{t}</span>
            <span className="sep">·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------- Wall of Ventures ---------- */
function WallCard({ v, onDeep }) {
  const isDeep = !!v.thinking;
  const inner = (
    <React.Fragment>
      <div className="wc-head">
        <span className="wc-num">{v.n}</span>
        <span className={'wc-status ' + v.status}>{v.statusText}</span>
      </div>
      <div className="wc-tag">{v.vertical}</div>
      <div className="wc-name">{v.name}</div>
      <div className="wc-pitch">{v.pitch}</div>
      <div className="wc-foot">
        <span className="wc-stack">{Array.isArray(v.stack) ? v.stack.slice(0, 3).join(' · ') : v.stack}</span>
        {isDeep ? <span className="wc-deep">See thinking <ExternalArrow /></span> : null}
      </div>
    </React.Fragment>
  );
  if (!isDeep) {
    return <div className="wall-card static">{inner}</div>;
  }
  return (
    <a className="wall-card deep"
       href="#thinking"
       onClick={(e) => { e.preventDefault(); onDeep(v.id); }}>
      {inner}
    </a>
  );
}

function VentureWall({ onDeep }) {
  const all = [...VENTURES, ...QUICK_VENTURES];
  return (
    <section className="section" id="work" data-screen-label="02 Builds" style={{paddingBottom: 60}}>
      <div className="container">
        <span className="eyebrow">The builds · live shelf</span>
        <h2>Real businesses. Real software. Real receipts.</h2>
        <p className="lead">
          Every card below is a shipped product or running pilot — not a concept, not a deck. Click the
          headliners to see the full thinking behind them: the signal, the bet, the constraint, what I
          chose <em>not</em> to build, and what shipped.
        </p>
        <div className="wall">
          <div className="wall-grid">
            {all.map(v => <WallCard key={v.id} v={v} onDeep={onDeep} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Thinking — the heart of the page ---------- */
function ThinkingTabs({ active, setActive }) {
  return (
    <div className="thinking-tabs">
      {VENTURES.map(v => (
        <button key={v.id}
                className={'thinking-tab' + (active === v.id ? ' active' : '')}
                onClick={() => setActive(v.id)}>
          <span className="tt-num">{v.n}</span>
          <span>
            <div className="tt-name">{v.name}</div>
            <div className="tt-vert">{v.vertical}</div>
          </span>
        </button>
      ))}
    </div>
  );
}

function ThinkingPanel({ v }) {
  return (
    <div className="thinking-panel" key={v.id}>
      <div className="thinking-panel-inner">
        <div className="tp-head">
          <span className="tp-vert">{v.vertical}</span>
          <span className="tp-status-line">
            STATUS · <b>{v.statusText.toUpperCase()}</b> &nbsp;·&nbsp; BUILT IN · {v.weeks} WK
          </span>
        </div>
        <h3>{v.name}</h3>
        <p className="tp-pitch">{v.pitch}</p>

        <div className="tp-blocks">
          <div className="tp-block" data-label="SIGNAL">
            <h4>What I noticed</h4>
            <p>{v.thinking.signal}</p>
          </div>
          <div className="tp-block" data-label="BET">
            <h4>The bet I made</h4>
            <p>{v.thinking.bet}</p>
          </div>
          <div className="tp-block" data-label="CONSTRAINT">
            <h4>What made it hard</h4>
            <p>{v.thinking.constraint}</p>
          </div>
          <div className="tp-block" data-label="THE CUT">
            <h4>What I chose not to build</h4>
            <p>{v.thinking.cut}</p>
          </div>
        </div>

        <div className="tp-block proof" data-label="PROOF" style={{marginTop: 24}}>
          <h4>What shipped</h4>
          <p>{v.thinking.proof}</p>
        </div>

        <div className="tp-receipts">
          {v.receipts.map(r => (
            <div className="tp-receipt" key={r.l}>
              <div className="n">{r.n}</div>
              <div className="l">{r.l}</div>
            </div>
          ))}
        </div>

        <div className="tp-stack">
          {v.stack.map(s => <span className="chip" key={s}>{s}</span>)}
        </div>

        <div className="tp-cta-row">
          {v.url ? (
            <a className="btn-primary" href={v.url} target="_blank" rel="noopener" style={{padding:'13px 22px', fontSize:14}}>
              See it live<Arrow />
            </a>
          ) : null}
          <a className="btn-secondary" href="#contact" style={{padding:'12px 20px', fontSize:13}}>
            Want one like it →
          </a>
        </div>
      </div>
    </div>
  );
}

function ThinkingSection({ active, setActive }) {
  const v = VENTURES.find(x => x.id === active) || VENTURES[0];
  return (
    <section className="section" id="thinking" data-screen-label="03 Thinking" style={{paddingTop: 60}}>
      <div className="container">
        <span className="eyebrow">How I actually think about each one</span>
        <h2>The thinking behind the shipping.</h2>
        <p className="lead">
          Anyone can show you what they built. Most won't show you <em>why</em>. Here are the
          headliners with the full thought process — signal, bet, constraint, the cut, and the proof —
          so you can decide if my way of solving problems matches yours.
        </p>
        <div className="thinking">
          <ThinkingTabs active={active} setActive={setActive} />
          <ThinkingPanel v={v} />
        </div>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
function Process() {
  return (
    <section className="section" id="process" data-screen-label="04 Playbook" style={{paddingTop: 60}}>
      <div className="container">
        <span className="eyebrow">The playbook · same shape, every project</span>
        <h2>From "we have a problem" to live product in six weeks.</h2>
        <p className="lead">
          Transparent, collaborative, designed to eliminate technical headaches — especially for
          non-technical founders.
        </p>
        <div className="process">
          <div>
            {STEPS.map(s => (
              <div className="process-step" key={s.n}>
                <div className="step-num">{s.n}</div>
                <div>
                  <div className="step-title">{s.t}</div>
                  <div className="step-sub">{s.s}</div>
                </div>
                <div className="step-time">{s.time}</div>
              </div>
            ))}
          </div>
          <div className="process-aside">
            <div className="glow-amber"></div>
            <div className="relative">
              <div className="q-mark">"</div>
              <p>
                Our core expertise is building robust web applications. To deliver with exceptional
                speed, I've developed a workflow that integrates advanced AI tools — automating the
                routine so I can focus on architecture, UX, and the actual business problem.
              </p>
              <div className="sig">
                <div className="avatar">Y</div>
                <div>
                  <div className="name-line">Founder · YOUNYC TECH</div>
                  <div className="role-line">NYC · Booking now</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact CTA ---------- */
function ContactCTA() {
  return (
    <section className="section" id="contact" data-screen-label="05 Contact" style={{paddingTop: 60}}>
      <div className="container container-tight">
        <div className="cta-panel">
          <div className="glow-amber"></div>
          <div className="glow-orange"></div>
          <div className="inner">
            <span className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>One door. No funnel.</span>
            <h2>Tell me the problem.<br/>I'll show you the build.</h2>
            <p className="lead" style={{textAlign:'center'}}>
              Free 30-minute strategy session. You walk away with a clear, actionable roadmap —
              whether you choose to work with me or not.
            </p>
            <a className="btn-primary" href="https://calendly.com/younyc/30min" target="_blank" rel="noopener" style={{padding:'18px 36px', fontSize: 16}}>
              Book your strategy session<Arrow />
            </a>
            <div style={{marginTop: 24, fontSize: 13, color:'#6B7280', fontFamily:'JetBrains Mono, monospace'}}>
              calendly.com/younyc/30min
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div className="footer-copy">© 2026 YOUNYC TECH</div>
        <div className="footer-links">
          <a href="#work">Builds</a>
          <a href="#thinking">Thinking</a>
          <a href="#process">Playbook</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="footer-copy" style={{fontFamily:'JetBrains Mono, monospace'}}>~/younyc</div>
      </div>
    </footer>
  );
}

/* ---------- App orchestrator ---------- */
function App() {
  const [activeThinking, setActiveThinking] = useState(VENTURES[0].id);

  // When someone clicks a deep wall card, scroll to thinking and select that project
  const onDeep = (id) => {
    setActiveThinking(id);
    requestAnimationFrame(() => {
      const el = document.getElementById('thinking');
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  };

  return (
    <>
      <Nav />
      <Hero onDeep={onDeep} />
      <Receipts />
      <Tape />
      <VentureWall onDeep={onDeep} />
      <ThinkingSection active={activeThinking} setActive={setActiveThinking} />
      <Process />
      <ContactCTA />
      <Footer />
    </>
  );
}

window.App = App;