// ============================================================
// DEMIURGE — CLARIFICATION + HOW IT WORKS
//
// Answers the questions a first-time visitor still has after the headline:
// what is this, who is it for, how is it different from hiring someone or
// buying a chatbot, and what happens if I get in touch. Rendered on both the
// home page (/) and the full system page (/full), so it stays consistent.
//
// Plain browser JSX — no imports. Loaded by index.html and full.html and
// compiled in the browser by Babel standalone, like every other file here.
// ============================================================

// /contact?intent=strategy-call, via the pricing single-source-of-truth when
// that file is on the page; a plain /contact link when it is not.
const clarityBookHref = (source) =>
  (typeof DGX_PRICING !== 'undefined' && DGX_PRICING.bookHref)
    ? DGX_PRICING.bookHref(source)
    : '/contact';

const CLARITY_CARDS = [
  {
    tag: 'What you get',
    h: 'Operators that do the work, not software you have to learn.',
    body: 'An AI phone agent that answers and books. Outbound that finds prospects and fills the diary. Content and ads that ship on schedule. Support that replies across email, chat and DM. Plus the websites, funnels and integrations they run on — built by us, not left to you.'
  },
  {
    tag: 'Who it is for',
    h: 'Owner-led businesses losing work to slow follow-up.',
    body: 'Clinics and dental practices, law firms, trades and home services, property and estate agencies, recruiters, e-commerce and marketing agencies — already getting enquiries, already stretched. If calls go unanswered after six and leads sit in an inbox until Monday, that is the gap this closes.'
  },
  {
    tag: 'How it is different',
    h: 'Hiring adds salary. A chatbot answers questions. We build the operation.',
    body: 'DIY AI tools hand you a blank prompt box and the integration work. We design the operators around your workflows, wire them into the CRM, calendar, phone number and inbox you already use, and hand you a working system — with approvals, the audit log and the kill switch in your hands.'
  }
];

const ClaritySection = () => (
  <section className="lp-section" id="what" data-screen-label="What this is">
    <div className="lp">
      <div className="lp-what-head">
        <div>
          <div className="lp-eyebrow">/ 01 · What this is</div>
          <h2 className="lp-h2" style={{marginTop: 18}}>
            An AI workforce,<br/>
            <em className="lp-brass">built and run for you</em>.
          </h2>
        </div>
        <p className="lp-lede lp-what-lede">
          &ldquo;Deploy your digital workforce&rdquo; means something specific: we build the AI
          operators your business needs, connect them to the systems you already use, and keep
          them running — so the work gets done without another hire.
        </p>
      </div>

      <div className="lp-what-grid">
        {CLARITY_CARDS.map((c) => (
          <div className="lp-what-card" key={c.tag}>
            <div className="corner tl"></div>
            <div className="corner br"></div>
            <div className="lp-what-tag">{c.tag}</div>
            <div className="lp-what-h">{c.h}</div>
            <p className="lp-what-body">{c.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// HOW IT WORKS — the concrete sequence, so the primary CTA is not a leap
// ============================================================

const HOW_STEPS = [
  {
    n: '01',
    h: 'Strategy call',
    t: '20–30 minutes',
    body: 'We map where work is leaking — missed calls, slow follow-up, leads that go cold — and tell you which operators would pay for themselves first. If none would, we say so.'
  },
  {
    n: '02',
    h: 'We build it',
    t: 'Scoped setup',
    body: 'Operators configured for your business and your scripts, connected to your CRM, calendar, phone number and inbox. Any website, funnel or integration they need, we build too.'
  },
  {
    n: '03',
    h: 'Go live',
    t: 'Typically ~7 days',
    body: 'You approve what the operators are allowed to do before anything goes out. Then they start answering, following up and booking — under your brand, in your voice.'
  },
  {
    n: '04',
    h: 'Managed or self-run',
    t: 'Your choice',
    body: 'We operate and tune the stack for you on a retainer, or hand it over and you drive it yourself with no monthly fee to us. Either way every call and message is logged and you can pause it all with one switch.'
  }
];

const HowItWorksSection = () => (
  <section className="lp-section tight" id="how" data-screen-label="How it works">
    <div className="lp">
      <div className="lp-eyebrow">/ 02 · How it works</div>
      <h2 className="lp-h2" style={{marginTop: 18, maxWidth: 720}}>
        Four steps from<br/>
        first call to <em className="lp-brass">live operators</em>.
      </h2>

      <div className="lp-steps">
        {HOW_STEPS.map((s) => (
          <div className="lp-step" key={s.n}>
            <div className="lp-step-n">{s.n}</div>
            <div className="lp-step-h">{s.h}</div>
            <div className="lp-step-t">{s.t}</div>
            <p className="lp-step-body">{s.body}</p>
          </div>
        ))}
      </div>

      <div className="lp-steps-cta">
        <a href={clarityBookHref('how-it-works')} className="lp-btn primary">
          Book a strategy call
          <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <a href="/packages" className="lp-btn">See what it costs</a>
        <span className="lp-steps-cta-note">No obligation. We will tell you if this is not a fit.</span>
      </div>
    </div>
  </section>
);

window.ClaritySection = ClaritySection;
window.HowItWorksSection = HowItWorksSection;