/* ===== home.jsx =====
   Delve homepage v2 — Everwatch-style layout in the Delve brand.
   Rendered by App() in site.jsx when the view is 'home'. Styles: assets/home.css */
function HomeV2({ onNav, onAdd, cartIds }) {
  const go = (v) => (e) => { if (e) e.preventDefault(); onNav(v); };
  const kits = (window.DELVE_PRODUCTS || []).filter((p) => ['os', 'swot', 'finance'].includes(p.id));
  const Cover = window.WorkbookCover;
  const shortDesc = { swot: 'Run our three-layer SWOT on your own business.', finance: 'See the numbers that run your business, 13 weeks ahead.' };
  const interest = (p) => window.dispatchEvent(new CustomEvent('delve:interest', { detail: p }));
  const caps = [
    ['Strategy', 'Positioning, priorities, and a plan you can act on this quarter — not a binder that gathers dust.'],
    ['Growth', 'Sustainable demand: offers, pricing, and channels tuned to the clients you actually want.'],
    ['Systems', 'Repeatable operations, tools, and trackers so the business runs without you holding every piece.'],
    ['Financial insights', 'Clear reporting and the few numbers that should drive every decision you make.'],
    ['People', 'Roles, hiring, and a culture where good people want to stay and do their best work.'],
    ['Culture', 'Values that show up in real decisions — the quiet engine behind every durable company.'],
    ['M&A', 'Readiness, positioning, and a steady hand through acquisition, sale, or succession.'],
  ];
  const cmp = [
    ['Deliverable', 'A slide deck and a handshake.', 'A plan, systems and a weekly rhythm your team runs.'],
    ['Approach', 'A templated playbook.', 'Better questions first. The diagnosis drives the work.'],
    ['Scope', 'One specialty, solved in isolation.', 'Strategy, finance, systems and people in one view.'],
    ['Who you work with', 'A partner sells it, a junior team delivers it.', 'The same small team from first question to last result.'],
    ['When it ends', 'When the invoice is paid.', 'When the change is real, and you no longer need us.'],
  ];
  const method = [
    ['D', 'Discover', 'Your goals, numbers and what is really in the way.'],
    ['E', 'Evaluate', 'SWOT³ diagnostic and a review of systems and finances.'],
    ['L', 'Lay out the plan', 'Three priorities, owners and a 90-day roadmap.'],
    ['V', 'Venture', 'Build the systems, hire the people, run the rhythm together.'],
    ['E', 'Evolve', 'Quarterly reviews so the gains keep compounding.'],
  ];
  const Ic = ({ d }) => <svg className="hv-ic" viewBox="0 0 24 24" fill="none" strokeWidth="1.5" aria-hidden="true" dangerouslySetInnerHTML={{ __html: d }} />;

  return (
    <div className="hv">
      {/* HERO */}
      <section className="hv-hero" id="top">
        <img className="hv-hero__img" src="assets/img/hero.jpg" alt="" />
        <div className="hv-hero__shade" aria-hidden="true" />
        <div className="hv-wrap hv-hero__in">
          <div className="hv-chip"><i aria-hidden="true" />Resources first · partners when you are ready</div>
          <h1>Where curiosity becomes <em>compounding</em> growth.</h1>
          <p>Start with proven toolkits built from real engagements. When you are ready, grow into a partnership with a Delve Expert matched to your business.</p>
          <div className="hv-ctas">
            <a className="hv-btn hv-btn--light" href="/shop" onClick={go('products')}>Explore the toolkits →</a>
            <a className="hv-btn hv-btn--ghost" href="/apply" onClick={go('apply')}>Find your partner</a>
          </div>
        </div>
      </section>

      {/* INTRO + STATS */}
      <section className="hv-dark hv-intro">
        <div className="hv-wrap">
          <p>Delve is a boutique consultancy for business owners 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="hv-g4 hv-stats">
            <div className="hv-stat"><b>311</b><span>Clients served</span></div>
            <div className="hv-stat"><b>27</b><span>M&amp;A in the last 3 years</span></div>
            <div className="hv-stat"><b>7</b><span>Capabilities, one team</span></div>
            <div className="hv-stat"><b>12</b><span>Engagements a year</span></div>
          </div>
        </div>
      </section>

      {/* GROW WITH DELVE */}
      <section className="hv-sec" style={{ paddingBottom: 0 }} id="grow">
        <div className="hv-wrap">
          <div className="hv-eb">— Grow with Delve</div>
          <h2 className="hv-h2">Start small. Grow into the partner you need.</h2>
          <p className="hv-lead">Every step builds on the last. What you pay for a toolkit is credited toward your next step, so nothing you invest is wasted.</p>
          <div className="hv-g4">
            <div className="hv-card hv-step"><div className="hv-step__lab">Step 1 · Start</div><h3>Toolkits</h3><div className="hv-step__price">From $149</div><p>Download a kit, do the work yourself, and get a free 20-minute results review.</p><button className="hv-link" onClick={go('products')}>Browse kits →</button></div>
            <div className="hv-card hv-step"><div className="hv-step__lab">Step 2 · Diagnose</div><h3>The Assessment</h3><div className="hv-step__price">$1,000–$5,000</div><p>A focused deep-dive to find where you are stuck and exactly where the leverage is.</p><button className="hv-link" onClick={() => delveScrollTo('tiers')}>See what is included →</button></div>
            <div className="hv-card hv-step"><div className="hv-step__lab">Step 3 · Partner</div><h3>Growth Partnership</h3><div className="hv-step__price">$5,000–$15,000</div><p>A Delve Expert matched to your business, embedded with you to turn the plan into momentum.</p><button className="hv-link" onClick={go('apply')}>Find your partner →</button></div>
            <div className="hv-card hv-step hv-step--dark"><div className="hv-step__lab">Step 4 · Scale</div><h3>Corporate Engagement</h3><div className="hv-step__price">$15,000–$25,000+</div><p>Strategic planning, leadership development and M&amp;A advisory for growing teams.</p><button className="hv-link" onClick={go('apply')}>Talk to us →</button></div>
          </div>
        </div>
      </section>

      {/* COMMITMENTS */}
      <section className="hv-sec" id="approach">
        <div className="hv-wrap">
          <div className="hv-eb">— Why Delve</div>
          <h2 className="hv-h2" style={{ marginBottom: 48 }}>Our four commitments.</h2>
          <div className="hv-g4">
            <div className="hv-card hv-card--accent"><Ic d='<circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>' /><h3>Curiosity</h3><p>Better questions, not a templated playbook. The diagnosis is where most of the value is created.</p></div>
            <div className="hv-card hv-card--accent"><Ic d='<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>' /><h3>Structure</h3><p>Strategy only counts if it survives a busy Tuesday. We build operations that run without you.</p></div>
            <div className="hv-card hv-card--accent"><Ic d='<path d="M16 11a4 4 0 1 0-8 0"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/>' /><h3>Partnership</h3><p>One small team, deeply embedded. We sit on your side of the table and stay until it sticks.</p></div>
            <div className="hv-card hv-card--accent"><Ic d='<path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 15l4-4 3 3 5-6"/>' /><h3>Transparency</h3><p>Clear reporting and the few numbers that should drive every decision, so progress is never a guess.</p></div>
          </div>
        </div>
      </section>

      {/* STARTING OUT */}
      <section style={{ padding: '0 0 72px' }}>
        <div className="hv-wrap">
          <div className="hv-g2 hv-start-head">
            <div><div className="hv-eb">— Starting out</div><h2 className="hv-h2" style={{ margin: 0 }}>From idea to open doors, one clear step at a time.</h2></div>
            <p>You do not need a business degree or a big budget to start well. You need the right questions, the right basics, and someone in your corner when it is time to grow.</p>
          </div>
          <div className="hv-g3">
            <div className="hv-card"><div className="hv-num">01</div><h3>Shape your idea</h3><p>Who it is for, what you will offer, and what to charge.</p></div>
            <div className="hv-card"><div className="hv-num">02</div><h3>Set up the basics</h3><p>Structure, licenses, banking and bookkeeping, right from day one.</p></div>
            <div className="hv-card"><div className="hv-num">03</div><h3>Know your next move</h3><p>A simple 90-day plan, so you always know what to do this week.</p></div>
          </div>
        </div>
      </section>
      <div className="hv-band">
        <img src="assets/img/studio-screen.jpg" alt="The Delve website open on a desktop computer in a modern workspace"
          onError={(e) => { if (!e.currentTarget.dataset.fb) { e.currentTarget.dataset.fb = '1'; e.currentTarget.src = 'assets/img/studio.jpg'; } }} />
      </div>

      {/* CAPABILITIES */}
      <section className="hv-sec hv-dark" id="capabilities">
        <div className="hv-wrap">
          <div className="hv-eb">— Capabilities</div>
          <h2 className="hv-h2">Seven capabilities. <em>One</em> embedded team.</h2>
          <p className="hv-lead" style={{ color: '#bdbdbd' }}>Most firms hand you a specialist. We bring every part of the business into one view, so nothing gets solved in isolation.</p>
          <div>{caps.map(([n, d]) => <div className="hv-cap" key={n}><h3>{n}</h3><p>{d}</p></div>)}</div>
          <p className="hv-tagline">The owner still leads. <em>We make sure the business can follow.</em></p>
        </div>
      </section>

      {/* COMPARISON */}
      <section className="hv-sec">
        <div className="hv-wrap">
          <div className="hv-eb">— The difference</div>
          <h2 className="hv-h2">Why an embedded partner?</h2>
          <p className="hv-lead" style={{ marginBottom: 40 }}>How consulting usually works, versus the Delve way.</p>
          <div className="hv-cmp">
            <div className="hv-cmp__row hv-cmp__head"><div /><div>Typical consultant</div><div>Delve</div></div>
            {cmp.map(([a, b, c]) => <div className="hv-cmp__row" key={a}><div>{a}</div><div>{b}</div><div>{c}</div></div>)}
          </div>
        </div>
      </section>

      {/* METHOD */}
      <section className="hv-sec" style={{ paddingTop: 0 }}>
        <div className="hv-wrap">
          <div className="hv-eb">— The Delve method</div>
          <h2 className="hv-h2" style={{ marginBottom: 48 }}>Curious questions. Lasting systems.</h2>
          <div className="hv-g5">{method.map(([l, t, d], i) => <div className="hv-m" key={i}><b>{l}</b><h3>{t}</h3><p>{d}</p></div>)}</div>
        </div>
      </section>

      {/* PRICING */}
      <section className="hv-sec hv-tiers" id="tiers">
        <div className="hv-wrap">
          <div className="hv-eb">— Pricing</div>
          <h2 className="hv-h2" style={{ marginBottom: 48 }}>When you are ready for a partner.</h2>
          <div className="hv-g3" style={{ alignItems: 'stretch' }}>
            <div className="hv-tier"><div className="hv-tier__for">Individuals &amp; business owners</div><h3>The Assessment</h3><div className="hv-tier__price">$1,000–$5,000</div><p>A focused deep-dive to find where you are stuck and exactly where the leverage is.</p><ul><li>Business assessment &amp; SWOT</li><li>Systems evaluation + recommendations</li><li>A clear, prioritized action plan you keep</li><li>Curated tools, tactics &amp; trackers</li></ul></div>
            <div className="hv-tier hv-tier--feat"><div className="hv-tier__for">Business owners &amp; leaders · Most chosen</div><h3>Growth Partnership</h3><div className="hv-tier__price">$5,000–$15,000</div><p>An embedded partner who turns the plan into momentum, and gives you your time back.</p><ul><li>Everything in The Assessment</li><li>Ongoing business development &amp; growth</li><li>Project design + management by a Delve PM</li><li>Financial tracking &amp; reporting</li><li>1:1 coaching &amp; accountability</li></ul></div>
            <div className="hv-tier"><div className="hv-tier__for">Teams &amp; organizations</div><h3>Corporate Engagement</h3><div className="hv-tier__price">$15,000–$25,000+</div><p>Strategic planning, leadership, and a custom path designed and facilitated end to end.</p><ul><li>Facilitated annual strategic planning</li><li>Leadership team development</li><li>People operations, recruiting &amp; retention</li><li>Mergers + acquisition advisory</li></ul></div>
          </div>
          <div className="hv-bar">
            <p><b style={{ fontWeight: 500 }}>By application only.</b> We take on twelve engagements a year so every one gets our full attention.</p>
            <a className="hv-btn hv-btn--char" href="/apply" onClick={go('apply')} style={{ padding: '14px 22px', fontSize: 12 }}>Start an application →</a>
          </div>
        </div>
      </section>

      {/* SHOP */}
      <section className="hv-sec" style={{ paddingTop: 0 }} id="products">
        <div className="hv-wrap">
          <div className="hv-shop-head">
            <div><div className="hv-eb">— The Delve shop</div><h2 className="hv-h2" style={{ margin: 0, maxWidth: '18ch' }}>Can’t hire us yet? Build with our tools.</h2></div>
            <a className="hv-btn hv-btn--outline" href="/shop" onClick={go('products')}>Browse all six kits →</a>
          </div>
          <div className="hv-g3">{kits.map((p) => (
            <article className="vk" key={p.id}>
              <div className="vk__media">{p.tag === 'Bestseller' && <span className="vk__badge">Bestseller</span>}{Cover && <Cover p={p} />}</div>
              <div className="vk__body">
                <span className="vk__type">{p.type}</span>
                <h3>{p.name}</h3>
                <p>{shortDesc[p.id] || p.desc}</p>
                <div className="vk__foot"><span className="vk__price">${p.price}</span><button className="vk__btn" onClick={() => interest(p)}>I'm interested</button></div>
              </div>
            </article>
          ))}</div>
          <p className="hv-note">Every kit includes a free 20-minute results review, and the price is credited toward an engagement within 90 days.</p>
        </div>
      </section>

      {/* PEOPLE */}
      <section className="hv-sec hv-dark" id="people">
        <div className="hv-wrap hv-g2">
          <img className="hv-photo" src="assets/img/founder-portrait.jpg" alt="Reyna Fonte, founder of Delve" onError={(e) => { if (!e.currentTarget.dataset.fb) { e.currentTarget.dataset.fb = '1'; e.currentTarget.src = 'assets/img/founder.png'; } }} />
          <div>
            <div className="hv-eb">— Human-led</div>
            <h2 className="hv-h2">Real people in the room. <em>Every time.</em></h2>
            <p style={{ fontSize: 17, color: '#bdbdbd', margin: '0 0 32px' }}>Reyna Fonte founded Delve to give small-business owners the partner she spent her career being inside larger companies: someone who can see the whole board.</p>
            <blockquote className="hv-quote">
              <p>“Reyna was the driving force in changing the trajectory of our franchise’s success. Any organization would be elevated to the next level by her presence.”</p>
              <footer>Founder + CEO · John L. Scott Columbia Gorge</footer>
            </blockquote>
            <a className="hv-more" href="team.html">Meet the people →</a>
          </div>
        </div>
      </section>

      {/* FIND YOUR PARTNER */}
      <section className="hv-sec hv-dark hv-apply" id="apply">
        <img className="hv-apply__bg" src="assets/img/feature.jpg" alt="" />
        <div className="hv-wrap">
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div className="hv-eb">Ready for a partner?</div>
            <h2 className="hv-h2" style={{ margin: '0 auto 16px', maxWidth: '18ch' }}>Apply to find the partner that is right for <em>you.</em></h2>
            <p style={{ fontSize: 18, color: '#d9d9d9', maxWidth: '54ch', margin: '0 auto' }}>Tell us about your business and where you want to go. We match you with the Delve Expert whose experience fits your goals.</p>
          </div>
          <div className="hv-g3" style={{ marginBottom: 44 }}>
            <div className="hv-apply__card"><div className="hv-num">01</div><h3>Tell us about your business</h3><p>A short application: your stage, goals and where you need help.</p></div>
            <div className="hv-apply__card"><div className="hv-num">02</div><h3>Get matched with an Expert</h3><p>We pair you with the Delve Expert best suited to your industry and needs.</p></div>
            <div className="hv-apply__card"><div className="hv-num">03</div><h3>Meet, then decide</h3><p>An intro conversation to make sure it is the right fit before anything starts.</p></div>
          </div>
          <div style={{ textAlign: 'center' }}><a className="hv-btn hv-btn--light" href="/apply" onClick={go('apply')}>Start your application →</a></div>
        </div>
      </section>
    </div>
  );
}
window.HomeV2 = HomeV2;