/* ETA / Search Fund content. Exposes window.DuskoContentETA */

const { useState, useEffect } = React;
const { Clients, Footer, SectionLabel } = window.DuskoShell;

/* ---------- Hero ---------- */
function HeroETA({ onContact, onBook }) {
  return (
    <section className="hero container" id="top">
      <div className="hero-meta">
        <span>Dusko / For ETA &amp; Search Fund operators</span>
        <span>Established 2026</span>
      </div>
      <div className="reveal">
        <h1>
          Your deck has a slide called <span className="quote">"operational improvements."</span>
        </h1>
      </div>
      <div className="reveal">
        <h1 className="hero-line-2">
          Nobody has a slide called <span className="quote accent">"I'll figure it out alone at 11pm."</span>
        </h1>
      </div>
      <p className="hero-sub hero-desc reveal">We left Wall Street, started businesses, and built the operating partner we wished we'd had.

      </p>
      <a className="hero-cta reveal" onClick={(e) => {e.preventDefault();onBook();}} href="#">
        <span>Let's talk</span><span className="arrow">→</span>
      </a>
      <a className="hero-cta reveal" onClick={(e) => {e.preventDefault();onContact();}} href="#" style={{ marginLeft: 36, borderBottomColor: 'var(--rule)', color: 'var(--fg-soft)' }}>
        <span>Get in touch</span><span className="arrow" style={{ color: 'var(--fg-mute)' }}>→</span>
      </a>
    </section>);

}

/* ---------- 01 Reframe ---------- */
function Reframe() {
  return (
    <section className="block container" id="reframe">
      <SectionLabel num="01" label="The reframe" />
      <div className="grid-12">
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <h2 className="section-title">
            You didn't buy a company.<br />
            <em style={{ color: "var(--accent)" }}>You bought four jobs and a P&amp;L.</em>
          </h2>
        </div>
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <div className="body-prose">
            <p>
              You raised the fund. You found the deal. You closed it. You told your investors you'd drive operational improvements, professionalise the back office, and unlock growth.
            </p>
            <p>
              Now you're six months in and you spend most of your time being a switchboard. Chasing receivables, re-keying data between systems that don't talk to each other, managing payroll questions over text, reconciling invoices at 11pm. <strong style={{ color: 'var(--fg)', fontWeight: 500 }}>The strategic work — the stuff that actually moves enterprise value — gets whatever's left of your attention.</strong>
            </p>
            <p>You didn't leave banking to do data entry. But that's what most of your days look like.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 02 What this is ---------- */
function WhatThisIs() {
  return (
    <section className="block container" id="what">
      <SectionLabel num="02" label="What this actually is" />
      <div className="grid-12">
        <div style={{ gridColumn: 'span 5' }} className="reveal">
          <p className="lede">
            The operating partner that doesn't take equity.
          </p>
        </div>
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <div className="body-prose">
            <p>
              We build private AI operations teams for business owners — not chatbots, not software, not another SaaS subscription.
            </p>
            <p style={{ color: 'var(--fg)' }}>
              Become a high-level operator overnight. The same operational efficiency a business owner develops over twenty years — in your hands from month one.
            </p>
            <p>
              A system that holds the full context of your business — banking, obligations, contracts, team, calendar, documents — and works alongside you every day. You talk to it the way you'd talk to a sharp COO. It handles the operational noise so you can go back to being the strategic operator your investors backed.
            </p>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.02em', color: 'var(--fg)' }}>
              Your investors don't hear about us. They hear about your results.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 03 Credibility ---------- */
function Credibility() {
  return (
    <section className="block container">
      <SectionLabel num="03" label="Credibility" />
      <div className="grid-12">
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <h2 className="section-title">
            We've been<br />
            <em style={{ color: "var(--accent)" }}>where you are.</em>
          </h2>
        </div>
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <div className="body-prose">
            <p>
              We left Goldman Sachs and went from Wall Street to Main Street. We bought real businesses, ran real operations, and discovered the same gap you're living in right now — between the thesis and the reality.
            </p>
            <p>
              So we built what we wished existed. Not a dashboard nobody checks. Not a consultant who bills by the hour and leaves. <strong style={{ color: 'var(--fg)', fontWeight: 500 }}>A permanent, private operations layer that learns your business and gets better every month.</strong>
            </p>
            <p>We tested it on our own businesses first. Now we build them for others — one client at a time.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 04 What you get ---------- */
const GETS = [
["A dedicated AI operator", "Knows your business the way a great GM would — your cash position, your open obligations, your team, your calendar, your deals. Available 24/7, not just when you remember to check an app."],
["A council of specialist advisors", "An investor lens, a deal analyst, an operator, a skeptic. Each with the full context of your business. Each available for a different kind of thinking."],
["A private dashboard", "Built around how you actually work — not a generic interface someone else designed. Your cockpit, your views, your priorities."],
["Infrastructure dedicated to you", "Your data doesn't touch anyone else's. Nothing leaks into anyone's training set. You own everything."]];


function WhatYouGet() {
  return (
    <section className="block container">
      <SectionLabel num="04" label="What this looks like in practice" />
      <div className="grid-12" style={{ marginBottom: '64px' }}>
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <h2 className="section-title">
            Four things.<br />
            <em style={{ color: "var(--accent)" }}>At the core.</em>
          </h2>
        </div>
      </div>
      <div className="item-list">
        {GETS.map(([t, b], i) =>
        <div className="item reveal" key={i}>
            <span className="item-num" style={{ color: "var(--accent)" }}>{String(i + 1).padStart(2, '0')}</span>
            <span className="item-title">{t}</span>
            <span className="item-body">{b}</span>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- 05 Model ---------- */
function Model() {
  return (
    <section className="model container" id="model">
      <SectionLabel num="05" label="The model" />
      <div className="grid-12">
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <p className="model-quote">
            Flat monthly fee<span className="accent">.</span><br />
            Not a percentage of your gross.
          </p>
          <p className="model-foot">
            You're not buying software and you're not hiring a person. You're subscribing to an operations team that keeps up with you, scales with your business, and stays yours. If you ever walk away, you leave with all of your data — every document, transaction, and record. Clean export, no hostage situation.
          </p>
          <p className="model-foot" style={{ marginTop: 20 }}>
            The alternative is either another hire who takes months to train and might leave, or becoming your own technology team. We're the third option.
          </p>
        </div>
        <div style={{ gridColumn: 'span 5' }} className="reveal">
          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 24, marginTop: 12 }}>
            {[["Engagement", "Monthly retainer"], ["Tenancy", "Single client, isolated"], ["Onboarding", "Two to four weeks"], ["Exit", "Full data export"]].map(([k, v]) =>
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid var(--rule-soft)', fontFamily: 'var(--mono)', fontSize: 12 }}>
                <span style={{ color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 10 }}>{k}</span>
                <span style={{ color: 'var(--fg)' }}>{v}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 06 Status signal ---------- */
function StatusSignal() {
  return (
    <section className="block container">
      <SectionLabel num="06" label="Twelve months from now" />
      <div className="grid-12">
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <h2 className="section-title">
            What this means<br />
            <em style={{ color: "var(--accent)" }}>for your thesis.</em>
          </h2>
        </div>
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <div className="body-prose">
            <p>
              In twelve months, you're not the searcher who's drowning in operations. You're the one who deployed intelligent leverage early, drove the operational improvements you promised, and has the numbers to show for it.
            </p>
            <p style={{ color: 'var(--fg)' }}>
              Your investors see the results. Your peers see someone who made it look easy. You see your time back.
            </p>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.02em', color: 'var(--fg)' }}>
              That's the real return on this investment.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Closing CTA ---------- */
function Close({ onContact, onBook }) {
  return (
    <section className="block container">
      <div className="grid-12">
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <h2 className="section-title">
            We take on a small number of clients<span style={{ color: 'var(--accent)' }}>.</span>
          </h2>
          <p className="body-prose" style={{ marginTop: 28 }}>
            Every system is built bespoke. If this resonated, let's have a conversation — not a demo, not a pitch. Tell us what your days actually look like and we'll tell you honestly whether we can help.
          </p>
          <div style={{ marginTop: 40 }}>
            <a className="hero-cta" onClick={(e) => {e.preventDefault();onBook();}} href="#">
              <span>Book a call</span><span className="arrow">→</span>
            </a>
            <a className="hero-cta" onClick={(e) => {e.preventDefault();onContact();}} href="#" style={{ marginLeft: 36, borderBottomColor: 'var(--rule)', color: 'var(--fg-soft)' }}>
              <span>hello@dusko.ai</span><span className="arrow" style={{ color: 'var(--fg-mute)' }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function ContentETA({ onContact, onBook }) {
  return (
    <>
      <HeroETA onContact={onContact} onBook={onBook} />
      <Clients />
      <Reframe />
      <WhatThisIs />
      <Credibility />
      <WhatYouGet />
      <Model />
      <StatusSignal />
      <Close onContact={onContact} onBook={onBook} />
      <Footer />
    </>);

}

window.DuskoContentETA = ContentETA;

/* ---------- Mount ---------- */
const AppETA = window.DuskoShell.makeApp(ContentETA, {
  label: "ETA",
  otherHref: "/smb",
  otherLabel: "for owners →"
});
ReactDOM.createRoot(document.getElementById('root')).render(<AppETA />);