/* Keen Flows website, content sections: Services, How it works, Metrics, CTA. */

function KFFeatures() {
  const { Card } = window.KeenFlowsDesignSystem_019e96;
  const items = [
    { eyebrow: '01 / Workflows', title: 'Custom workflows', body: 'We map a process end to end, then ship the automation that runs it: triage, routing, follow-up, reporting.' },
    { eyebrow: '02 / Integrations', title: 'Deep integrations', body: 'Your stack, wired together. CRMs, inboxes, data warehouses, internal tools, and the long tail of SaaS.' },
    { eyebrow: '03 / Agents', title: 'Agentic systems', body: 'Multi-step agents that plan, call tools, and check their own work, with humans in the loop where it counts.' },
    { eyebrow: '04 / Scale', title: 'Built to scale', body: 'Observability, retries, and guardrails from day one. Systems that hold up when volume goes 10x.' },
    { eyebrow: '05 / Security', title: 'Secure by default', body: 'Least-privilege access, audit trails, and data boundaries that pass procurement without a fight.' },
    { eyebrow: '06 / Partnership', title: 'Ongoing partnership', body: 'We stay on past launch, tuning prompts, expanding coverage, and finding the next thing to automate.' },
  ];
  return (
    <section className="kfsite-section" id="services">
      <div className="kf-container">
        <div className="kfsite-section__head">
          <h2 className="kfsite-section__title">Automation that earns its keep</h2>
          <p className="kfsite-section__lede">No demos that fall over in production. We deliver working systems your team actually relies on.</p>
        </div>
        <div className="kfsite-grid kfsite-grid--3">
          {items.map((it) => (
            <Card key={it.title} eyebrow={it.eyebrow} title={it.title} glow interactive>
              {it.body}
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function KFProcess() {
  const steps = [
    { n: '01', t: 'Map', d: 'We sit with your team, trace the real workflow, and find where the hours actually go.' },
    { n: '02', t: 'Build', d: 'A working system in your stack: scoped tight, shipped in weeks, tested against real cases.' },
    { n: '03', t: 'Deploy', d: 'We roll it out with guardrails and monitoring, then hand over a system your team trusts.' },
    { n: '04', t: 'Scale', d: 'We stay on to tune, expand coverage, and automate the next thing worth automating.' },
  ];
  return (
    <section className="kfsite-section kfsite-section--panel" id="how">
      <div className="kf-container">
        <div className="kfsite-section__head">
          <h2 className="kfsite-section__title">Four steps, no theatre</h2>
        </div>
        <div className="kfsite-steps">
          {steps.map((s) => (
            <div className="kfsite-step" key={s.n}>
              <div className="kfsite-step__n">{s.n}</div>
              <h3 className="kfsite-step__t">{s.t}</h3>
              <p className="kfsite-step__d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function KFMetrics() {
  const stats = [
    { v: '14 days', l: 'median time to first deployed workflow' },
    { v: '40+', l: 'production systems shipped and running' },
    { v: '3,200 hrs', l: 'manual work removed per year, per client' },
    { v: '99.9%', l: 'uptime across deployed automations' },
  ];
  return (
    <section className="kfsite-section">
      <div className="kf-container">
        <div className="kfsite-metrics kfsite-glowcard">
          {stats.map((s) => (
            <div className="kfsite-metric" key={s.l}>
              <div className="kfsite-metric__v">{s.v}</div>
              <div className="kfsite-metric__l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Partnership Program, shown as a modal opened from the footer button. */
function KFPartnerDialog({ open, onClose, onReach }) {
  const { Button } = window.KeenFlowsDesignSystem_019e96;
  if (!open) return null;
  return (
    <div className="kfsite-modal" onClick={onClose}>
      <div className="kfsite-modal__panel kfsite-modal__panel--wide" onClick={(e) => e.stopPropagation()}>
        <button className="kfsite-modal__close" onClick={onClose} aria-label="Close"><span className="kfsite-x"></span></button>
        <h3 className="kfsite-modal__title">Bring automation to your own clients</h3>
        <p className="kfsite-modal__sub">
          We partner with agencies, consultants, web developers, accountants, and other
          businesses that serve small and medium companies. You keep the relationship. We do
          the automation work behind it, so your clients get more value without you taking on
          anything extra.
        </p>
        <ul className="kfsite-partner__list">
          <li className="kfsite-partner__item">Free automation audit for any of your existing clients.</li>
          <li className="kfsite-partner__item">If a client signs on, you earn 20% recurring revenue share.</li>
          <li className="kfsite-partner__item">Paid for as long as that client stays active.</li>
        </ul>
        <Button variant="primary" block onClick={onReach}>Get in touch</Button>
      </div>
    </div>
  );
}

function KFCTA({ onContact }) {
  const { Button } = window.KeenFlowsDesignSystem_019e96;
  return (
    <section className="kfsite-section" id="contact">
      <div className="kf-container">
        <div className="kfsite-cta kfsite-glowcard">
          <div className="kfsite-cta__glow" aria-hidden="true"></div>
          <h2 className="kfsite-cta__title">Find out what you could automate</h2>
          <p className="kfsite-cta__sub">Tell us one workflow that's slowing you down. We'll reply within one business day, no call to schedule.</p>
          <Button variant="primary" size="lg" onClick={onContact}>Get in touch</Button>
        </div>
      </div>
    </section>
  );
}

window.KFFeatures = KFFeatures;
window.KFProcess = KFProcess;
window.KFMetrics = KFMetrics;
window.KFPartnerDialog = KFPartnerDialog;
window.KFCTA = KFCTA;