/* ============================================================
   DELVE — site components (concatenated for deploy)
   Each was authored as a separate module in the design system.
   ============================================================ */


/* ===== Header.jsx ===== */
// Delve — sticky header with nav, cart, mobile sheet
function Header({ view, onNav, onScrollTo, cartCount, onOpenCart }) {
  const { Button } = window.DelveDesignSystem_c17a62;
  const [scrolled, setScrolled] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const toSection = (id) => (e) => {
    if (e) e.preventDefault();
    setMenu(false);
    if (view !== 'home') { onNav('home'); setTimeout(() => onScrollTo(id), 80); }
    else onScrollTo(id);
  };
  const toView = (v) => () => { setMenu(false); onNav(v); };

  const links = [
    { label: 'Approach', on: toSection('approach') },
    { label: 'Capabilities', on: toSection('capabilities') },
    { label: 'Pricing', on: toSection('tiers') },
    { label: 'The People', on: () => { window.location.href = 'team.html'; } },
    { label: 'Products', on: toView('products'), active: view === 'products' },
    { label: 'Insights', on: toView('insights'), active: view === 'insights' },
  ];

  return (
    <header className={'hdr' + (scrolled ? ' hdr--scrolled' : '')}>
      <div className="wrap hdr__inner">
        <button className="brand" onClick={toView('home')} aria-label="Delve home">
          <img src={window.DELVE_LOGO} alt="" />
          <span className="brand__name">Delve</span>
        </button>

        <nav className="nav">
          {links.map((l) => (
            <button key={l.label} className={l.active ? 'is-active' : ''} onClick={l.on}>{l.label}</button>
          ))}
        </nav>

        <div className="hdr__actions">
          <button className="cartbtn" onClick={onOpenCart} aria-label="Open cart">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
            {cartCount > 0 && <span className="cartbtn__count">{cartCount}</span>}
          </button>
          <span className="hdr__cta" style={{ display: 'inline-flex' }}>
            <Button variant="primary" size="sm" onClick={toView('apply')}>Apply to work with us</Button>
          </span>
          <button className="menubtn" onClick={() => setMenu(true)} aria-label="Menu">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          </button>
        </div>
      </div>

      {menu && (
        <div className="msheet">
          <div className="msheet__top">
            <button className="brand" onClick={toView('home')} aria-label="Delve home">
              <img src={window.DELVE_LOGO} alt="" style={{ width: 34, height: 34 }} />
              <span className="brand__name">Delve</span>
            </button>
            <button className="cartbtn" onClick={() => setMenu(false)} aria-label="Close">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
          </div>
          <button onClick={toSection('approach')}>Approach</button>
          <button onClick={toSection('capabilities')}>Capabilities</button>
          <button onClick={toSection('tiers')}>Pricing</button>
          <button onClick={() => { window.location.href = 'team.html'; }}>The People</button>
          <button onClick={toView('products')}>Products</button>
          <button onClick={toView('insights')}>Insights</button>
          <button onClick={toView('apply')} style={{ color: 'var(--rose-600)' }}>Apply →</button>
        </div>
      )}
    </header>
  );
}
window.Header = Header;

/* ===== Hero.jsx ===== */
// Delve — premium hero (Apple scale, Kearney authority, by-application)
function Hero({ onNav, onScrollTo }) {
  const { Button, Eyebrow } = window.DelveDesignSystem_c17a62;
  return (
    <section className="wrap hero" id="top">
      <div className="hero__eyebrow"><Eyebrow>By application only</Eyebrow></div>
      <h1 className="hero__title">Where curiosity becomes <em>compounding</em> growth.</h1>
      <p className="hero__lead">
        Delve is a boutique consultancy for founders who refuse to coast. We partner with a
        select few each quarter to build the strategy, systems, and financial clarity that
        turn a good business into an enduring one.
      </p>
      <div className="hero__cta">
        <Button variant="primary" size="lg" onClick={() => onNav('apply')}>Apply to work with us</Button>
        <Button variant="rose" size="lg" onClick={() => onNav('products')}>Explore digital products</Button>
      </div>
      <p className="hero__note">We accept a limited number of engagements to protect the depth of our work.</p>

      <div className="hero__media reveal">
        <div className="ph"><img className="ph__photo" src="assets/img/hero.jpg" alt="" onError={(e) => e.currentTarget.remove()} /><span className="ph__label">Boardroom / founder session — 21:9</span></div>
        <div className="hero__scrim" />
        <div className="hero__media-cap">
          <span>The Delve Method</span>
          <b>Five questions before the first dashboard.</b>
        </div>
      </div>

      <div className="statstrip">
        <div className="stat"><div className="stat__num">311</div><div className="stat__lbl">Clients served</div></div>
        <div className="stat"><div className="stat__num">27</div><div className="stat__lbl">M&amp;A in the last 3 years</div></div>
        <div className="stat"><div className="stat__num">7</div><div className="stat__lbl">Capabilities, one team</div></div>
        <div className="stat"><div className="stat__num" style={{ fontSize: '1.5rem', letterSpacing: '-0.01em' }}>By application</div><div className="stat__lbl">How we partner</div></div>
      </div>
    </section>
  );
}
window.Hero = Hero;

/* ===== Trust.jsx ===== */
// Delve — trust strip (subtle, type-based "client" marks)
function Trust() {
  const names = ['Juniper & Thirteenth', 'Ferocious Love', 'Capture Collective', '541 Vintage', 'Northsmith Co.'];
  return (
    <section className="trust">
      <div className="wrap">
        <div className="trust__label">Trusted by founders building the long game</div>
        <div className="trust__row">
          {names.map((n) => <span key={n}>{n}</span>)}
        </div>
      </div>
    </section>
  );
}
window.Trust = Trust;

/* ===== Approach.jsx ===== */
// Delve — Approach (editorial ink band, Kearney authority)
function Approach() {
  const { Eyebrow } = window.DelveDesignSystem_c17a62;
  const cols = [
    { n: '01', h: 'Curiosity first', p: 'We start with better questions, not a templated playbook. The diagnosis is where most of the value is created.' },
    { n: '02', h: 'Systems that hold', p: 'Strategy only counts if it survives a busy Tuesday. We build the operating systems that run without you.' },
    { n: '03', h: 'A true partner', p: 'One small team, deeply embedded. We sit on your side of the table and stay until the change is real.' },
  ];
  return (
    <section className="ink section" id="approach">
      <div className="wrap">
        <div className="sechead" style={{ marginBottom: 'var(--space-7)' }}>
          <div className="sechead__eyebrow"><Eyebrow tone="on-ink">Our approach</Eyebrow></div>
        </div>
        <p className="approach__big">
          Most firms hand you a deck. We help you <em>delve deeper than the dashboard</em> — and build what the numbers are asking for.
        </p>
        <div className="approach__cols">
          {cols.map((c) => (
            <div className="approach__col" key={c.n}>
              <span className="n">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Approach = Approach;

/* ===== Capabilities.jsx ===== */
// Delve — Capabilities (numbered editorial list, 7 offerings)
function Capabilities({ onNav }) {
  const { Eyebrow, Button } = window.DelveDesignSystem_c17a62;
  const caps = [
    { icon: 'compass', name: 'Strategy', desc: 'Positioning, priorities, and a plan you can act on this quarter — not a binder that gathers dust.' },
    { icon: 'trending-up', name: 'Growth', desc: 'Sustainable demand: offers, pricing, and channels tuned to the clients you actually want.' },
    { icon: 'workflow', name: 'Systems', desc: 'Repeatable operations, tools, and trackers so the business runs without you holding every piece.' },
    { icon: 'line-chart', name: 'Financial Insights', desc: 'Clear reporting and the few numbers that should drive every decision you make.' },
    { icon: 'users', name: 'People', desc: 'Roles, hiring, and a culture where good people want to stay and do their best work.' },
    { icon: 'heart-handshake', name: 'Culture', desc: 'Values that show up in real decisions — the quiet engine behind every durable company.' },
    { icon: 'handshake', name: 'M&A', desc: 'Readiness, positioning, and a steady hand through acquisition, sale, or succession.' },
  ];
  return (
    <section className="wrap section" id="capabilities">
      <div className="sechead sechead--split">
        <div>
          <div className="sechead__eyebrow"><Eyebrow>Capabilities</Eyebrow></div>
          <h2>Seven disciplines. One embedded team.</h2>
        </div>
        <p style={{ maxWidth: '34ch', color: 'var(--text-secondary)', fontSize: '15px', lineHeight: 1.6, margin: 0 }}>
          Engagements draw on whatever the business needs — most blend three or four of these.
        </p>
      </div>

      <div className="caps">
        {caps.map((c, i) => (
          <div className="cap" key={c.name}>
            <span className="cap__n">{String(i + 1).padStart(2, '0')}</span>
            <span className="cap__name">{c.name}</span>
            <span className="cap__desc">{c.desc}</span>
            <span className="cap__icon"><i data-lucide={c.icon} /></span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 'var(--space-7)' }}>
        <Button variant="outline" onClick={() => onNav('apply')}>Start an application →</Button>
      </div>
    </section>
  );
}
window.Capabilities = Capabilities;

/* ===== Tiers.jsx ===== */
// Delve — Engagement tiers (by application). Grounded in real audiences + price bands.
function Tiers({ onNav }) {
  const { Eyebrow, Button, Badge } = window.DelveDesignSystem_c17a62;
  const tiers = [
    {
      name: 'The Assessment',
      who: 'Individuals & solo founders',
      price: '$1,000–$5,000',
      term: '2–6 week engagement',
      blurb: 'A focused deep-dive to find where you\u2019re stuck and exactly where the leverage is.',
      feats: [
        'Business assessment & SWOT',
        'Systems evaluation + recommendations',
        'A clear, prioritized action plan you keep',
        'Curated tools, tactics & trackers',
      ],
      cta: 'Apply for an assessment',
      featured: false,
    },
    {
      name: 'Growth Partnership',
      who: 'Business owners & leaders',
      price: '$5,000–$15,000',
      term: '3–6 month partnership',
      blurb: 'An embedded partner who turns the plan into momentum — and gives you your time back.',
      feats: [
        'Everything in The Assessment',
        'Ongoing business development & growth',
        'Project design + management by a Delve PM',
        'Culture + branding',
        'Financial tracking & reporting',
        '1:1 coaching & accountability',
      ],
      cta: 'Apply to partner',
      featured: true,
    },
    {
      name: 'Corporate Engagement',
      who: 'Corporations & teams',
      price: '$15,000–$25,000+',
      term: 'Custom timeframe',
      blurb: 'Strategic planning, leadership, and a custom path designed and facilitated end-to-end.',
      feats: [
        'Facilitated annual strategic planning',
        'Leadership team development',
        'Culture initiatives, reimagined',
        'People operations, recruiting & retention',
        'Mergers + acquisition advisory',
        'A custom path to growth',
      ],
      cta: 'Request an engagement',
      featured: false,
    },
  ];

  return (
    <section className="wrap section" id="tiers">
      <div className="sechead sechead--center">
        <div className="sechead__eyebrow" style={{ justifyContent: 'center' }}><Eyebrow tick={false}>Ways to work together</Eyebrow></div>
        <h2>Three ways to delve in.</h2>
        <p>Every engagement is by application, scoped to your business, and priced to the work — these are the shapes most begin with.</p>
      </div>

      <div className="tiers">
        {tiers.map((t) => (
          <article className={'tier' + (t.featured ? ' tier--featured' : '')} key={t.name}>
            {t.featured && <div className="tier__flag"><Badge variant="rose">Most chosen</Badge></div>}
            <div className="tier__head">
              <h3 className="tier__name">{t.name}</h3>
              <div className="tier__who">{t.who}</div>
            </div>
            <div className="tier__price">{t.price}</div>
            <div className="tier__term">{t.term}</div>
            <p className="tier__blurb">{t.blurb}</p>
            <ul className="tier__feats">
              {t.feats.map((f) => (
                <li key={f}><i data-lucide="check" />{f}</li>
              ))}
            </ul>
            <div className="tier__cta">
              <Button variant={t.featured ? 'rose-solid' : 'outline'} block onClick={() => onNav('apply')}>{t.cta}</Button>
            </div>
          </article>
        ))}
      </div>

      <p className="tiers__note">
        Not sure which fits? <button className="linklike" onClick={() => onNav('apply')}>Start an application</button> and we’ll scope it together — no pressure, no jargon.
      </p>
    </section>
  );
}
window.Tiers = Tiers;

/* ===== Feature.jsx ===== */
// Delve — full-bleed feature moment (Apple-style)
function Feature({ onNav }) {
  const { Button, Eyebrow } = window.DelveDesignSystem_c17a62;
  return (
    <section className="feature">
      <div className="ph"><img className="ph__photo" src="assets/img/feature.jpg" alt="" onError={(e) => e.currentTarget.remove()} /><span className="ph__label">Full-bleed founder / workspace image</span></div>
      <div className="feature__scrim" />
      <div className="wrap feature__inner">
        <div className="feature__eyebrow"><Eyebrow tone="on-ink">The Delve difference</Eyebrow></div>
        <h2>We don't sell hours. We build <em>momentum</em> that outlasts us.</h2>
        <p>
          Every engagement is designed to make us unnecessary — leaving you with the strategy,
          systems, and confidence to keep compounding long after the work is done.
        </p>
        <Button variant="primary" size="lg" onInk onClick={() => onNav('apply')}>See if we're a fit</Button>
      </div>
    </section>
  );
}
window.Feature = Feature;

/* ===== Products.jsx ===== */
// Delve — digital products: data + card + home preview + full storefront
//
// ── STRIPE CHECKOUT ──────────────────────────────────────────────
// Each product has a `stripe` field. Paste the product's Stripe
// PAYMENT LINK there (Stripe Dashboard → Payment Links → create one
// per product → copy the https://buy.stripe.com/... URL). No backend
// or API keys needed — Payment Links are just URLs and work on a
// static site. When `stripe` is set, "Add to cart" → "Checkout" sends
// the buyer to Stripe. If left empty, checkout shows a demo success
// state so the site still works before you wire payments.
//
// ── PRODUCT IMAGES ───────────────────────────────────────────────
// Drop a photo/cover into assets/img/ and set `image` to its path
// (e.g. 'assets/img/operating-system.jpg'). Empty = striped placeholder.
window.DELVE_PRODUCTS = [
  { id: 'os', type: 'Notion System', name: 'The Founder\u2019s Operating System', price: 149, was: 199, cat: 'Systems',
    desc: 'The full Notion workspace we install with clients \u2014 goals, dashboards, SOPs, and weekly cadence in one place.', tag: 'Bestseller',
    stripe: '', image: '' },
  { id: 'swot', type: 'Workbook', name: 'Deep SWOT Workbook', price: 39, cat: 'Strategy',
    desc: 'A guided 24-page workbook to run the same diagnostic we open every engagement with.', tag: null,
    stripe: '', image: '' },
  { id: 'pricing', type: 'Playbook', name: 'Pricing With Confidence', price: 59, cat: 'Growth',
    desc: 'Frameworks, scripts, and a calculator to reprice your offers without losing the clients you want.', tag: null,
    stripe: '', image: '' },
  { id: 'finance', type: 'Spreadsheet Kit', name: 'Financial Clarity Kit', price: 79, cat: 'Finance',
    desc: 'Plug-and-play revenue, cash-flow, and reporting trackers \u2014 see the few numbers that matter.', tag: 'New',
    stripe: '', image: '' },
  { id: 'course', type: 'Mini-Course', name: 'Systems That Run Without You', price: 129, cat: 'Systems',
    desc: 'Six on-demand lessons to document, delegate, and automate the work only you do today.', tag: null,
    stripe: '', image: '' },
  { id: 'culture', type: 'Toolkit', name: 'Culture Operating Toolkit', price: 49, cat: 'People',
    desc: 'Values worksheets, hiring scorecards, and rituals to build a team that wants to stay.', tag: null,
    stripe: '', image: '' },
];

// Send the buyer to Stripe. Returns false if no products have links yet
// (so the caller can fall back to the demo success state).
window.delveStripeCheckout = function (items) {
  const linked = items.filter((p) => p.stripe);
  if (linked.length === 0) return false;
  // Open extra items in new tabs, then send this tab to the first link.
  linked.slice(1).forEach((p) => window.open(p.stripe, '_blank', 'noopener'));
  window.location.href = linked[0].stripe;
  return true;
};

function ProductCard({ p, onAdd, added }) {
  const { Button, Badge } = window.DelveDesignSystem_c17a62;
  return (
    <article className="prod">
      <div className="prod__media">
        {p.tag && <span className="prod__badge"><Badge variant={p.tag === 'Bestseller' ? 'rose' : 'soft'}>{p.tag}</Badge></span>}
        {p.image
          ? <img className="prod__img" src={p.image} alt={p.name} />
          : <div className="ph"><span className="ph__label">{p.type}</span></div>}
      </div>
      <div className="prod__body">
        <span className="prod__type">{p.type}</span>
        <h3 className="prod__name">{p.name}</h3>
        <p className="prod__desc">{p.desc}</p>
        <div className="prod__foot">
          <span className="prod__price">{p.was && <s>${p.was}</s>}${p.price}</span>
          <Button variant={added ? 'outline' : 'rose-solid'} size="sm" onClick={() => onAdd(p)}>
            {added ? 'Added \u2713' : 'Add to cart'}
          </Button>
        </div>
      </div>
    </article>
  );
}
window.ProductCard = ProductCard;

function ProductsPreview({ onNav, onAdd, cartIds }) {
  const { Eyebrow, Button } = window.DelveDesignSystem_c17a62;
  const items = window.DELVE_PRODUCTS.slice(0, 3);
  return (
    <section className="wrap section" id="products">
      <div className="sechead sechead--split">
        <div>
          <div className="sechead__eyebrow"><Eyebrow>Digital products</Eyebrow></div>
          <h2>Can’t hire us yet? Build with our tools.</h2>
        </div>
        <Button variant="outline" onClick={() => onNav('products')}>Browse all products</Button>
      </div>
      <div className="prod-grid">
        {items.map((p) => <ProductCard key={p.id} p={p} onAdd={onAdd} added={cartIds.includes(p.id)} />)}
      </div>
    </section>
  );
}
window.ProductsPreview = ProductsPreview;

function ProductsPage({ onAdd, cartIds }) {
  const { Eyebrow } = window.DelveDesignSystem_c17a62;
  const { Badge } = window.DelveDesignSystem_c17a62;
  const cats = ['All', 'Strategy', 'Growth', 'Systems', 'Finance', 'People'];
  const [cat, setCat] = React.useState('All');
  const items = cat === 'All' ? window.DELVE_PRODUCTS : window.DELVE_PRODUCTS.filter((p) => p.cat === cat);
  return (
    <section className="wrap">
      <div className="storehead">
        <div>
          <div className="sechead__eyebrow"><Eyebrow>The Delve Shop</Eyebrow></div>
          <h1>Tools we use with clients, ready to download.</h1>
        </div>
        <p>Self-paced systems, workbooks, and templates drawn straight from our engagements — instant access, yours to keep.</p>
      </div>
      <div className="storefilter">
        {cats.map((c) => (
          <button key={c} className="chipbtn" onClick={() => setCat(c)}>
            <Badge variant={c === cat ? 'rose' : 'outline'}>{c}</Badge>
          </button>
        ))}
      </div>
      <div className="prod-grid">
        {items.map((p) => <ProductCard key={p.id} p={p} onAdd={onAdd} added={cartIds.includes(p.id)} />)}
      </div>
    </section>
  );
}
window.ProductsPage = ProductsPage;

/* ===== Cart.jsx ===== */
// Delve — slide-over cart drawer
function Cart({ open, items, onClose, onRemove }) {
  const { Button } = window.DelveDesignSystem_c17a62;
  const [done, setDone] = React.useState(false);
  const total = items.reduce((s, p) => s + p.price, 0);

  React.useEffect(() => { if (open) setDone(false); }, [open]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const checkout = () => {
    // If Stripe Payment Links are configured, go to Stripe; else demo success.
    const wentToStripe = window.delveStripeCheckout && window.delveStripeCheckout(items);
    if (!wentToStripe) setDone(true);
  };

  return (
    <React.Fragment>
      <div className={'cart-overlay' + (open ? ' is-open' : '')} onClick={onClose} />
      <aside className={'cart' + (open ? ' is-open' : '')} aria-hidden={!open}>
        <div className="cart__head">
          <h3>{done ? 'Order complete' : 'Your cart'}</h3>
          <button className="cart__close" onClick={onClose} aria-label="Close cart">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
        </div>

        {done ? (
          <div className="cart__items">
            <div className="apply__done" style={{ padding: 'var(--space-7) var(--space-2)' }}>
              <div className="mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
              <h3 style={{ fontSize: '1.5rem' }}>Check your inbox</h3>
              <p>Your download links are on their way. Thank you for building with Delve.</p>
            </div>
          </div>
        ) : items.length === 0 ? (
          <div className="cart__items"><p className="cart__empty">Your cart is empty.<br />Explore the shop to get started.</p></div>
        ) : (
          <div className="cart__items">
            {items.map((p) => (
              <div className="citem" key={p.id}>
                <div className="ph"><span className="ph__label" style={{ fontSize: 8 }}>{p.cat}</span></div>
                <div>
                  <div className="citem__type">{p.type}</div>
                  <p className="citem__name">{p.name}</p>
                  <button className="citem__remove" onClick={() => onRemove(p.id)}>Remove</button>
                </div>
                <div className="citem__price">${p.price}</div>
              </div>
            ))}
          </div>
        )}

        {!done && items.length > 0 && (
          <div className="cart__foot">
            <div className="cart__total"><span>Total</span><b>${total}</b></div>
            <Button variant="primary" block onClick={checkout}>Checkout</Button>
            <p className="cart__note">Instant digital delivery · Secure checkout · 14-day guarantee</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}
window.Cart = Cart;

/* ===== Apply.jsx ===== */
// Delve — Apply: home CTA band + multi-step application
function ApplyBand({ onNav }) {
  const { Button, Eyebrow } = window.DelveDesignSystem_c17a62;
  return (
    <section className="ink section">
      <div className="wrap applyband">
        <div className="sechead__eyebrow" style={{ display: 'flex', justifyContent: 'center' }}>
          <Eyebrow tone="on-ink" tick={false}>Working together</Eyebrow>
        </div>
        <h2>Partnership with Delve is <em>by application</em>.</h2>
        <p>
          We take on twelve engagements a year so every one gets our full attention. Tell us about
          your business and where you want to go — we read every application personally.
        </p>
        <Button variant="primary" size="lg" onInk onClick={() => onNav('apply')}>Begin your application</Button>
      </div>
    </section>
  );
}
window.ApplyBand = ApplyBand;

function ApplyPage({ onNav }) {
  const { Button, Input, Eyebrow } = window.DelveDesignSystem_c17a62;
  const steps = [
    { name: 'About you', sub: 'Who we\u2019ll be working with' },
    { name: 'Your business', sub: 'Stage and shape' },
    { name: 'Where you need help', sub: 'The work ahead' },
    { name: 'Timeline & fit', sub: 'When and how' },
  ];
  const [step, setStep] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const [data, setData] = React.useState({ stage: '', caps: [], timeline: '' });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleCap = (c) => setData((d) => ({ ...d, caps: d.caps.includes(c) ? d.caps.filter((x) => x !== c) : [...d.caps, c] }));

  const stages = [
    { t: 'Just starting', s: 'Pre-revenue to ~$100k' },
    { t: 'Finding traction', s: '$100k – $500k' },
    { t: 'Scaling up', s: '$500k – $2M' },
    { t: 'Established', s: '$2M+' },
  ];
  const timelines = [
    { t: 'As soon as possible', s: 'We\u2019re ready to start now' },
    { t: 'Next quarter', s: 'Planning ahead' },
    { t: 'Just exploring', s: 'Curious about a fit' },
  ];
  const capList = ['Strategy', 'Growth', 'Systems', 'Financial Insights', 'People', 'Culture', 'M&A'];

  const pct = ((step + 1) / steps.length) * 100;
  const next = () => setStep((s) => Math.min(s + 1, steps.length - 1));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  return (
    <section className="wrap apply">
      <aside className="apply__aside">
        <div className="sechead__eyebrow"><Eyebrow>Apply to work with Delve</Eyebrow></div>
        <h1>Let’s see if we’re a fit.</h1>
        <p>A few questions — about five minutes. There are no wrong answers; we’re looking for curiosity and commitment, not perfection.</p>
        <ul className="apply__steps">
          {steps.map((s, i) => (
            <li key={s.name} className={i === step && !done ? 'is-active' : (i < step || done) ? 'is-done' : ''}>
              <span className="dot">{(i < step || done) ? '\u2713' : i + 1}</span>
              <span><b>{s.name}</b><small>{s.sub}</small></span>
            </li>
          ))}
        </ul>
      </aside>

      <div className="apply__panel">
        {done ? (
          <div className="apply__done">
            <div className="mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
            <h3>Application received.</h3>
            <p>Thank you for delving in. We read every application personally and will be in touch within three business days.</p>
            <Button variant="outline" onClick={() => onNav('home')}>Back to home</Button>
          </div>
        ) : (
          <React.Fragment>
            <div className="apply__progress"><i style={{ width: pct + '%' }} /></div>
            <div className="apply__stepname">Step {step + 1} of {steps.length} · {steps[step].name}</div>

            {step === 0 && (
              <React.Fragment>
                <h2 className="apply__q">First, the essentials.</h2>
                <div className="field-grid">
                  <Input label="Your name" placeholder="Reyna Field" />
                  <Input label="Email" type="email" placeholder="you@company.com" />
                  <Input label="Company" placeholder="Company name" />
                  <Input label="Website" placeholder="company.com" />
                  <div className="full"><Input label="Your role" placeholder="Founder & CEO" /></div>
                </div>
              </React.Fragment>
            )}

            {step === 1 && (
              <React.Fragment>
                <h2 className="apply__q">Where is the business today?</h2>
                <div className="optcards">
                  {stages.map((o) => (
                    <button key={o.t} className={'optcard' + (data.stage === o.t ? ' is-sel' : '')} onClick={() => set('stage', o.t)}>
                      <span className="mark" />
                      <span><span className="t">{o.t}</span><br /><span className="s">{o.s}</span></span>
                    </button>
                  ))}
                </div>
              </React.Fragment>
            )}

            {step === 2 && (
              <React.Fragment>
                <h2 className="apply__q">Where do you want our help?</h2>
                <p style={{ marginTop: '-12px', marginBottom: 'var(--space-5)', color: 'var(--text-secondary)', fontSize: 14 }}>Select all that apply.</p>
                <div className="storefilter" style={{ marginBottom: 'var(--space-6)' }}>
                  {capList.map((c) => {
                    const { Badge } = window.DelveDesignSystem_c17a62;
                    return (
                      <button key={c} className="chipbtn" onClick={() => toggleCap(c)}>
                        <Badge variant={data.caps.includes(c) ? 'rose' : 'outline'}>{c}</Badge>
                      </button>
                    );
                  })}
                </div>
                <label className="delve-field__label" style={{ display: 'block', marginBottom: 8 }}>What’s the biggest challenge in front of you?</label>
                <textarea className="delve-input delve-input--box" rows="4" placeholder="Tell us what’s keeping you up at night..." style={{ resize: 'vertical', fontFamily: 'var(--font-sans)' }} />
              </React.Fragment>
            )}

            {step === 3 && (
              <React.Fragment>
                <h2 className="apply__q">When would you like to begin?</h2>
                <div className="optcards">
                  {timelines.map((o) => (
                    <button key={o.t} className={'optcard' + (data.timeline === o.t ? ' is-sel' : '')} onClick={() => set('timeline', o.t)}>
                      <span className="mark" />
                      <span><span className="t">{o.t}</span><br /><span className="s">{o.s}</span></span>
                    </button>
                  ))}
                </div>
                <div style={{ marginTop: 'var(--space-5)' }}>
                  <Input label="Anything else we should know? (optional)" placeholder="A link, a number, a dream..." />
                </div>
              </React.Fragment>
            )}

            <div className="apply__actions">
              {step > 0 ? <Button variant="ghost" onClick={back}>← Back</Button> : <span />}
              {step < steps.length - 1
                ? <Button variant="primary" onClick={next}>Continue</Button>
                : <Button variant="rose-solid" onClick={() => setDone(true)}>Submit application</Button>}
            </div>
          </React.Fragment>
        )}
      </div>
    </section>
  );
}
window.ApplyPage = ApplyPage;

/* ===== Proof.jsx ===== */
// Delve website — testimonials (ink band, carousel). Real client quotes from delve-inc.com.
function Proof() {
  const { Eyebrow, Testimonial } = window.DelveDesignSystem_c17a62;
  const quotes = [
    { quote: 'I now work smarter, not harder, and truly enjoy the work I do and the people I do it with. Reyna is a SWOT guru, an expert problem solver, an invaluable confidante, and a business owner\u2019s dream.', name: 'Jordan Lyn', role: 'Founder \u00b7 Juniper + Thirteenth' },
    { quote: 'She has a gift of creating tailored solutions when small business owners feel overwhelmed and stuck. She always brings insight, positivity, and creative processes \u2014 and the tools to take actionable steps.', name: 'Michele Thomson', role: 'Founder + Designer \u00b7 Ferocious Love' },
    { quote: 'She has helped me transform my dreams into reality. She not only walks me through each step, she empowers me to learn and grow. It has been an absolutely transformative experience working with Reyna.', name: 'Amber Bello', role: 'Founder \u00b7 AmberBello.com' },
    { quote: 'Before having Delve in my life, I never thought I would be capable of running a successful business. Now I\u2019m running one that is 100% my passion. You need her \u2014 I know I couldn\u2019t live without her!', name: 'Marlee Holley', role: 'Founder \u00b7 Capture Collective' },
    { quote: 'Delve made the impossible look possible and gave me the right tools and support. She created a system to track my revenue, and my numbers have increased drastically over the past few months.', name: 'Carson Flores', role: 'Founder \u00b7 541VNTG' },
    { quote: 'Reyna\u2019s curiosity, empathy, and ability to listen give her an outstanding advantage. Her attention to every aspect of business \u2014 operations, finance, HR, marketing \u2014 sets her apart from most in her field.', name: 'Emmanuel Fonte', role: 'President \u00b7 Access Home Closing' },
    { quote: 'The Delve team and Reyna will be our go-to for investments, projects, and business venture needs. Top-notch all the way!', name: 'Mike Sayler', role: 'Founder \u00b7 Serene Milieu, LLC' },
    { quote: 'This is my third completed project with the Delve team. They always outperform my expectations and meet deadlines. Their ability has been invaluable as I\u2019ve built my real estate wealth.', name: 'Todd Swanson', role: 'Real Estate Investor' },
    { quote: 'Reyna was the driving force in changing the trajectory of our franchise\u2019s success. Any organization would be elevated to the next level by her presence. Delve, Inc. is truly a gift to small business owners.', name: 'Sandy Dean', role: 'Founder + CEO \u00b7 John L. Scott Columbia Gorge' },
  ];
  const [i, setI] = React.useState(0);
  return (
    <section className="ink section">
      <div className="wrap proof">
        <div className="sechead" style={{ marginBottom: 'var(--space-5)' }}>
          <Eyebrow tone="on-ink" tick={false}>Our clients say</Eyebrow>
        </div>
        <div className="proof__stage">
          <Testimonial {...quotes[i]} onInk />
        </div>
        <div className="proof__nav">
          {quotes.map((_, n) => (
            <button
              key={n}
              className={'proof__dot' + (n === i ? ' is-active' : '')}
              onClick={() => setI(n)}
              aria-label={'Testimonial ' + (n + 1)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.Proof = Proof;

/* ===== Blog.jsx ===== */
// Delve website — blog (homepage preview + full index page)
window.DELVE_POSTS = [
  { cat: 'Entrepreneurs', date: 'Jul 2024', title: 'Stuck isn\u2019t a dead end \u2014 it\u2019s a starting point', excerpt: 'How a single curious question can turn overwhelm into your next clear, doable move.', author: 'Reyna \u00b7 Founder' },
  { cat: 'Coworking', date: 'Jul 2024', title: 'Build systems before you need them', excerpt: 'The trackers and processes that let your business run without you holding every piece together.', author: 'The Delve Team' },
  { cat: 'Entrepreneurs', date: 'Jun 2024', title: 'Work smarter, not harder: a founder\u2019s SWOT', excerpt: 'A simple way to find where the real leverage in your business is hiding.', author: 'Reyna \u00b7 Founder' },
  { cat: 'Coworking', date: 'May 2024', title: 'Culture is built in the small moments', excerpt: 'Shared values aren\u2019t a poster on the wall \u2014 they\u2019re the decisions you make on a Tuesday.', author: 'The Delve Team' },
  { cat: 'Entrepreneurs', date: 'Apr 2024', title: 'Pricing with confidence', excerpt: 'Why charging your worth is a strategy decision, not a personality trait.', author: 'Reyna \u00b7 Founder' },
  { cat: 'Coworking', date: 'Mar 2024', title: 'The case for delving deep', excerpt: 'Curiosity develops brand, culture, and community. Here\u2019s what that looks like in practice.', author: 'The Delve Team' },
];

function PostCard({ p }) {
  const { Badge } = window.DelveDesignSystem_c17a62;
  return (
    <article className="post">
      <div className="ph ph--wide"><span className="ph__label">Article image</span></div>
      <div className="post__meta">
        <Badge variant="soft">{p.cat}</Badge>
        <span className="post__date">{p.date}</span>
      </div>
      <h3>{p.title}</h3>
      <p>{p.excerpt}</p>
      <div className="post__author">{p.author}</div>
    </article>
  );
}

function BlogPreview({ onNav }) {
  const { Eyebrow, Button } = window.DelveDesignSystem_c17a62;
  const posts = window.DELVE_POSTS.slice(0, 3);
  return (
    <section className="wrap section">
      <div className="sechead" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: 'none', gap: 'var(--space-5)' }}>
        <div>
          <div style={{ marginBottom: 10 }}><Eyebrow>From the blog</Eyebrow></div>
          <h2 style={{ marginBottom: 0 }}>Insights to delve into.</h2>
        </div>
        <Button variant="outline" onClick={() => onNav('blog')}>View all posts</Button>
      </div>
      <div className="blog-grid">
        {posts.map((p) => <PostCard key={p.title} p={p} />)}
      </div>
    </section>
  );
}

function BlogPage({ onNav }) {
  const { Eyebrow, Button, Badge } = window.DelveDesignSystem_c17a62;
  const [cat, setCat] = React.useState('All');
  const cats = ['All', 'Entrepreneurs', 'Coworking'];
  const posts = cat === 'All' ? window.DELVE_POSTS : window.DELVE_POSTS.filter((p) => p.cat === cat);
  return (
    <section className="wrap blogpage">
      <div className="blogpage__head">
        <div>
          <div style={{ marginBottom: 10 }}><Eyebrow>The Delve blog</Eyebrow></div>
          <h2 style={{ marginBottom: 0 }}>Curiosity, in writing.</h2>
        </div>
        <div className="cats">
          {cats.map((c) => (
            <button key={c} onClick={() => setCat(c)} style={{ background: 'none', border: 0, cursor: 'pointer', padding: 0 }}>
              <Badge variant={c === cat ? 'rose' : 'outline'}>{c}</Badge>
            </button>
          ))}
        </div>
      </div>
      <div className="blog-grid">
        {posts.map((p) => <PostCard key={p.title} p={p} />)}
      </div>
      <div style={{ marginTop: 'var(--space-7)' }}>
        <Button variant="ghost" onClick={() => onNav('home')}>← Back to home</Button>
      </div>
    </section>
  );
}
window.BlogPreview = BlogPreview;
window.BlogPage = BlogPage;

/* ===== Community.jsx ===== */
// Delve — community / newsletter capture (light strip before footer)
function Community() {
  const { Eyebrow, Button, Input } = window.DelveDesignSystem_c17a62;
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="wrap community">
        <div>
          <div className="sechead__eyebrow"><Eyebrow>The Delve Community</Eyebrow></div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-h2)', lineHeight: 1.1, margin: '0 0 var(--space-4)', letterSpacing: '-0.01em' }}>
            It all starts with you.
          </h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: 'var(--text-lead)', lineHeight: 1.65, margin: 0, maxWidth: '46ch' }}>
            Not ready to apply? Get on the list for insights, free tools, and the occasional
            nudge to delve a little deeper — no noise, ever.
          </p>
        </div>
        <div>
          {!sent ? (
            <form className="community__form" onSubmit={submit}>
              <Input variant="underline" type="email" required placeholder="Email address" aria-label="Email address" />
              <Button variant="primary" type="submit">Get on the list</Button>
            </form>
          ) : (
            <p className="community__ok" style={{ color: 'var(--rose-600)' }}>Thank you — you're on the list. Let's delve deep together.</p>
          )}
          <p style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 'var(--space-5)', lineHeight: 1.7 }}>
            Prefer to talk? Email <a href="mailto:admin@delve-inc.com">admin@delve-inc.com</a><br />
            or call <a href="tel:5414909987">(541) 490-9987</a>.
          </p>
        </div>
      </div>
    </section>
  );
}
window.Community = Community;

/* ===== Footer.jsx ===== */
// Delve — footer
function Footer({ onNav, onScrollTo }) {
  const toSection = (id) => (e) => { e.preventDefault(); onNav('home'); setTimeout(() => onScrollTo(id), 80); };
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__top">
          <div className="foot__brand">
            <img src={window.DELVE_LOGO} alt="Delve" />
            <p>The world needs more companies willing to delve deep. We help founders build the strategy, systems, and clarity to grow something that lasts.</p>
          </div>
          <div className="foot__col">
            <h4>Company</h4>
            <ul>
              <li><button onClick={toSection('approach')}>Approach</button></li>
              <li><button onClick={toSection('capabilities')}>Capabilities</button></li>
              <li><button onClick={() => onNav('insights')}>Insights</button></li>
              <li><button onClick={() => onNav('apply')}>Apply</button></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4>Shop</h4>
            <ul>
              <li><button onClick={() => onNav('products')}>All products</button></li>
              <li><button onClick={() => onNav('products')}>Notion systems</button></li>
              <li><button onClick={() => onNav('products')}>Workbooks</button></li>
              <li><button onClick={() => onNav('products')}>Courses</button></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4>Contact</h4>
            <ul>
              <li>12424 109 CT NE, D204<br />Kirkland, WA 98034</li>
              <li><a href="mailto:admin@delve-inc.com">admin@delve-inc.com</a></li>
              <li><a href="tel:5414909987">(541) 490-9987</a></li>
            </ul>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© {new Date().getFullYear()} Delve, Inc. · Where curiosity develops.</span>
          <div className="social">
            <a href="https://www.instagram.com/delve_inc_co/" target="_blank" rel="noreferrer" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
            </a>
            <a href="https://www.linkedin.com/company/delve-inc" target="_blank" rel="noreferrer" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 10v7M7 7v.01M11.5 17v-4a2 2 0 0 1 4 0v4M11.5 17v-7"/></svg>
            </a>
            <a href="https://www.facebook.com/delveinc/" target="_blank" rel="noreferrer" aria-label="Facebook">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M14.5 8.5h-1.2a1.6 1.6 0 0 0-1.6 1.6V12m-1.4 0h4m-2.6 0v5.5"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

/* ===== App.jsx ===== */
// Delve — app shell: routing (home/products/apply/insights) + cart + scroll reveal
function delveScrollTo(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 70;
  window.scrollTo({ top: y, behavior: 'smooth' });
}

function useReveal(deps) {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.is-in)');
    if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('is-in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, deps);
}

function App() {
  const [view, setView] = React.useState('home');
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);

  const nav = (v) => { setView(v); window.scrollTo({ top: 0, behavior: 'auto' }); };
  const addToCart = (p) => { setCart((c) => (c.find((x) => x.id === p.id) ? c : [...c, p])); setCartOpen(true); };
  const removeItem = (id) => setCart((c) => c.filter((x) => x.id !== id));
  const cartIds = cart.map((p) => p.id);

  React.useLayoutEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  useReveal([view]);

  return (
    <div className="site">
      <Header view={view} onNav={nav} onScrollTo={delveScrollTo} cartCount={cart.length} onOpenCart={() => setCartOpen(true)} />

      {view === 'home' && (
        <main>
          <Hero onNav={nav} onScrollTo={delveScrollTo} />
          <Trust />
          <Approach />
          <Capabilities onNav={nav} />
          <Tiers onNav={nav} />
          <Feature onNav={nav} />
          <ProductsPreview onNav={nav} onAdd={addToCart} cartIds={cartIds} />
          <ApplyBand onNav={nav} />
          <Proof />
          <BlogPreview onNav={nav} />
          <Community />
        </main>
      )}
      {view === 'products' && <main className="section--tight"><ProductsPage onAdd={addToCart} cartIds={cartIds} /></main>}
      {view === 'apply' && <main><ApplyPage onNav={nav} /></main>}
      {view === 'insights' && <main><BlogPage onNav={nav} /></main>}

      <Footer onNav={nav} onScrollTo={delveScrollTo} />
      <Cart open={cartOpen} items={cart} onClose={() => setCartOpen(false)} onRemove={removeItem} />
    </div>
  );
}
window.App = App;