/* Broad SMB content. Exposes window.DuskoContentSMB */

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

/* ---------- Hero ---------- */
function HeroSMB({ onContact, onBook }) {
  return (
    <section className="hero container" id="top">
      <div className="hero-meta">
        <span>Dusko / For business owners</span>
        <span>Established 2026</span>
      </div>
      <div className="reveal">
        <h1>
          You started this business<br />
          so it would <em style={{ color: "rgb(22, 21, 19)" }}>work for you.</em>
        </h1>
      </div>
      <p className="hero-sub reveal" style={{ fontSize: "49.984px", fontWeight: "600", color: "rgb(194, 65, 12)" }}>
        Most days, you work for it.
      </p>
      <p className="hero-sub hero-desc reveal">
        We build private AI operations teams that give business owners their time, their clarity, and their business back.
      </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">
            The business is doing fine.<br />
            <em style={{ color: "var(--accent)" }}>You're the one burning out.</em>
          </h2>
        </div>
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <div className="body-prose">
            <p>Revenue is up. Clients are happy. From the outside, it's working.</p>
            <p>
              But you know what it actually costs. You're the first one in and the last one out. You spend your evenings catching up on the admin that piled up while you were doing the real work during the day. <strong style={{ color: 'var(--fg)', fontWeight: 500 }}>You carry every open item in your head</strong> — who needs a callback, what invoices are outstanding, which deadlines are coming, what's falling through the cracks.
            </p>
            <p>
              Your family sees you on your phone at dinner. Your friends think you're crushing it. You haven't taken a real vacation in years.
            </p>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.02em', color: 'var(--fg)' }}>
              You didn't build this business to be chained to it.
            </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">
            What if you had a business partner who never slept?
          </p>
        </div>
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <div className="body-prose">
            <p>
              Not an employee you have to train and manage. Not software you have to learn. Not a consultant who bills you for advice and leaves you to implement it.
            </p>
            <p style={{ color: 'var(--fg)' }}>
              The same efficiency a business owner develops over twenty years of hard lessons — in your hands from month one.
            </p>
            <p>
              A private operations system that knows your business — your finances, your clients, your schedule, your team, your obligations — and works alongside you every day. You talk to it in plain language. It handles the operational noise that eats your nights and weekends.
            </p>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.02em', color: 'var(--fg)' }}>
              You don't learn the software. The software learns you.
            </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">
            Built by business owners,<br />
            <em style={{ color: "var(--accent)" }}>for business owners.</em>
          </h2>
        </div>
        <div style={{ gridColumn: 'span 6' }} className="reveal">
          <div className="body-prose">
            <p>We didn't build this in a tech lab. We built it in the field.</p>
            <p>
              We left Wall Street careers to run real businesses — pavement marking, real estate, service operations. We discovered that <strong style={{ color: 'var(--fg)', fontWeight: 500 }}>every small business owner is secretly working three jobs</strong>: the job they love, the job of running the business, and the job of being the human glue between software systems that don't talk to each other.
            </p>
            <p>
              So we built the thing that handles jobs two and three. We tested it on our own operations first. Now we build them for others.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 04 What you get ---------- */
const GETS = [
["A dedicated AI operator", "Tracks everything a great office manager would — cash flow, upcoming bills, outstanding invoices, team schedules, client communications — and surfaces what needs your attention before it becomes a problem."],
["Specialist advisors on call", "Financial thinking, client strategy, deal analysis, or just a second opinion from someone who knows your full context. Anytime."],
["A dashboard that's yours", "Not a generic app with features you'll never use. Built around how you think, what you track, and how you actually run your day."],
["Private infrastructure", "Your data stays on systems dedicated to you. Nothing shared, nothing leaking, nothing used to train anyone's AI model."]];


function WhatYouGet() {
  return (
    <section className="block container">
      <SectionLabel num="04" label="Your business, running the way you imagined" />
      <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 Outcomes ---------- */
const OUTCOMES = [
["Evenings, back.", "You stop spending your evenings doing data entry and start spending them with your family."],
["Thirty seconds.", "You answer \"how's the business doing?\" in thirty seconds from your phone instead of logging into four apps."],
["Nothing falls through.", "The system tracks it all and tells you what matters — not because you remembered, but because it never forgets."],
["Reactive becomes proactive.", "You go from reacting to problems to seeing them before they arrive."],
["The owner you set out to be.", "Your peers see someone who built something real. Your family sees you present. You see the business owner you set out to be."]];


function Outcomes() {
  return (
    <section className="block container">
      <SectionLabel num="05" label="What changes" />
      <div className="grid-12" style={{ marginBottom: '64px' }}>
        <div style={{ gridColumn: 'span 7' }} className="reveal">
          <h2 className="section-title">
            What changes<span style={{ color: 'var(--accent)' }}>.</span>
          </h2>
        </div>
      </div>
      <div className="item-list">
        {OUTCOMES.map(([t, b], i) =>
        <div className="item reveal" key={i}>
            <span className="item-num">{String(i + 1).padStart(2, '0')}</span>
            <span className="item-title">{t}</span>
            <span className="item-body">{b}</span>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- 06 Model ---------- */
function Model() {
  return (
    <section className="model container" id="model">
      <SectionLabel num="06" 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 />
            Simple.
          </p>
          <p className="model-foot">
            No percentage of your revenue. No per-seat pricing that punishes you for growing. No surprise invoices.
          </p>
          <p className="model-foot" style={{ marginTop: 20 }}>
            You're subscribing to an operations team that keeps up with you, evolves with your business, and stays yours. If you ever leave, you take all of your data with you. No strings.
          </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>);

}

/* ---------- 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">
            Every system we build is custom<span style={{ color: 'var(--accent)' }}>.</span>
          </h2>
          <p className="body-prose" style={{ marginTop: 28 }}>
            Built around your business, not a template. If any of this sounded familiar, let's have a conversation. No pitch, no pressure. Tell us what your days look like and we'll tell you honestly if 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 ContentSMB({ onContact, onBook }) {
  return (
    <>
      <HeroSMB onContact={onContact} onBook={onBook} />
      <Clients />
      <Reframe />
      <WhatThisIs />
      <Credibility />
      <WhatYouGet />
      <Outcomes />
      <Model />
      <Close onContact={onContact} onBook={onBook} />
      <Footer />
    </>);

}

window.DuskoContentSMB = ContentSMB;

const AppSMB = window.DuskoShell.makeApp(ContentSMB, {
  label: "Owners",
  otherHref: "/",
  otherLabel: "for searchers →"
});
ReactDOM.createRoot(document.getElementById('root')).render(<AppSMB />);