// VenBuilder website — page sections + assembled page
const { useEffect: useEffectS } = React;

function Hero() {
  return (
    <header className="hero">
      <div className="hero-glow"></div>
      <img className="hero-motif" src="assets/motif-system.svg" alt="" />
      <div className="wrap">
        <span className="eyebrow" style={{ color: "var(--vb-spring)" }}>Venture studio · AI-native</span>
        <h1>From idea to <span className="acc">working system.</span> Fast.</h1>
        <p>VenBuilder designs, builds, and validates AI-native products — so a fragmented idea becomes something real in weeks, not quarters.</p>
        <div className="hero-cta">
          <Button variant="acc" icon="arrow-right">Start a build</Button>
          <Button variant="sec" style={{ background: "transparent", color: "#eaf2ec", borderColor: "rgba(234,242,236,0.2)" }}>See how we work</Button>
        </div>
        <div className="hero-meta">
          <div className="stat">
            <div className="num">14</div>
            <div className="lab">ventures built</div>
          </div>
          <div className="stat">
            <div className="num">6 wks</div>
            <div className="lab">idea → live MVP</div>
          </div>
          <div className="stat">
            <div className="num">100%</div>
            <div className="lab">AI-native by default</div>
          </div>
        </div>
      </div>
    </header>
  );
}

const VENTURES = [
  { name: "Atlas", sub: "Labs", stage: "MVP-04", desc: "Autonomous operations agent that runs the back office for early-stage teams." },
  { name: "Quartz", sub: "Studio", stage: "Scaling", desc: "AI-native analytics surface that turns raw product events into decisions." },
  { name: "Mesh", sub: "AI", stage: "Validating", desc: "Workflow orchestration for fragmented internal tools and data." },
  { name: "Lumen", sub: "Labs", stage: "Live", desc: "Document intelligence for regulated, high-stakes industries." },
  { name: "Forge", sub: "Studio", stage: "MVP-02", desc: "Rapid prototyping environment for validating product bets in days." },
  { name: "Cadence", sub: "Ventures", stage: "Idea", desc: "Capital + operating system for the studio's own spinouts." },
];

function Ventures() {
  return (
    <section className="section" id="ventures">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">The portfolio</span>
          <h2>One studio. Many ventures.</h2>
          <p>VenBuilder is the umbrella behind a growing set of AI-native products — each built from the same modular system, each free to become its own brand.</p>
        </div>
        <div className="pf-grid">
          {VENTURES.map((v) => (
            <div className="pf-card" key={v.name}>
              <div className="pf-top">
                <span className="pf-name">
                  <Mark size={22} />
                  {v.name}
                  <span className="b" style={{ fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>{v.sub}</span>
                </span>
                <span className="pf-stage">{v.stage}</span>
              </div>
              <div className="pf-desc">{v.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: "01 — Frame", t: "Frame", d: "We compress a fragmented idea into a sharp thesis and the smallest system worth building." },
  { n: "02 — Validate", t: "Validate", d: "Pressure-test against real users and real numbers before a line of production code." },
  { n: "03 — Build", t: "Build", d: "AI-native MVP shipped in weeks from composable, reusable building blocks." },
  { n: "04 — Scale", t: "Scale", d: "Automate the operation, hand over the keys, or spin it out as its own venture." },
];

function Process() {
  return (
    <section className="section" id="process" style={{ background: "var(--bg-sunken)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">How we work</span>
          <h2>A system, not a scramble.</h2>
          <p>The same disciplined path every time — calm, organized, and fast because it's repeatable.</p>
        </div>
        <div className="proc">
          {STEPS.map((s, i) => (
            <div className="proc-step" key={s.n}>
              {i === 0 && <div className="bar"></div>}
              <div className="proc-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  { ic: "boxes", t: "Modular by default", d: "Every venture is composed from reusable building blocks, so the next one starts faster." },
  { ic: "sparkles", t: "AI-native, not AI-bolted", d: "Intelligence sits at the core of the product, not sprinkled on as a feature." },
  { ic: "gauge", t: "Speed with discipline", d: "Weeks to a live MVP — because the process is a system, not heroics." },
  { ic: "git-branch", t: "Built to spin out", d: "Each venture can graduate into its own brand without re-platforming." },
  { ic: "shield-check", t: "Validation first", d: "Real users and real numbers gate every step. We say no a lot." },
  { ic: "workflow", t: "Operations automated", d: "We wire the back office so founders can stay on the frontier." },
];

function Features() {
  return (
    <section className="section" id="work">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">What makes it work</span>
          <h2>Serious things, built fast.</h2>
        </div>
        <div className="feat-grid">
          {FEATURES.map((f) => (
            <div className="feat" key={f.t}>
              <div className="ic"><Icon name={f.ic} /></div>
              <h4>{f.t}</h4>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="quote">
          <img src="assets/motif-system.svg" alt="" style={{ position: "absolute", right: -30, top: -20, width: 340, opacity: 0.5 }} />
          <span className="eyebrow" style={{ color: "var(--vb-spring)" }}>The thesis</span>
          <blockquote style={{ marginTop: 18 }}>
            The next wave of companies won't be staffed — they'll be <span className="acc">systems, built deliberately.</span>
          </blockquote>
          <div className="by">
            <div className="avatar">VB</div>
            <div>VenBuilder · Operating principle</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div className="wrap">
        <span className="eyebrow">Start a build</span>
        <h2>Have a fragmented idea?</h2>
        <p>Bring us the mess. We'll hand you back a working system.</p>
        <div className="cta-row">
          <Button variant="pri" icon="arrow-right">Start a build</Button>
          <Button variant="sec">Read the thesis</Button>
        </div>
      </div>
    </section>
  );
}

function SitePage() {
  useEffectS(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div>
      <Nav />
      <Hero />
      <Ventures />
      <Process />
      <Features />
      <Quote />
      <CTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { Hero, Ventures, Process, Features, Quote, CTA, SitePage });