/* global React, Eyebrow */

// =========================================================
// Defensible — cyber practice page (single long page)
// Lives inside Planetiware. Scoped dark-navy theme via
// .defensible-page class (see defensible-section.css).
// =========================================================

const STANCE = [
  { n: '01', t: 'Evidence over theatre', b: 'Every control we install produces an artefact you can produce on demand — not a screenshot, an artefact. If it cannot be evidenced, it does not count.' },
  { n: '02', t: 'Boring tooling', b: 'We pick the tools that have been working for a decade over the ones with the best demo. You will live with this stack a long time.' },
  { n: '03', t: 'Owner-led', b: 'You brief the senior engineer who owns your work. No anonymous ticket queue, no handover to a junior, no level-one filter.' },
  { n: '04', t: 'Fixed scope', b: 'Every engagement starts with a written outcome, a written exit criterion, and a fixed fee. No discovery that becomes a residency.' },
  { n: '05', t: 'You own it after', b: 'Written runbooks, dashboards your team can read, and escalation paths that survive us leaving. Not a black box.' },
  { n: '06', t: 'No long contracts', b: 'Month-to-month after the initial engagement. If we are not useful, you can leave on thirty days. We have not lost one yet.' },
];

const ENGAGEMENTS = [
  { n: '01', t: 'SMB1001 certification prep', d: 'End-to-end preparation across all five tiers — the controls, the evidence, and a self-attestation pack your insurer and customers will accept without question.', more: 'SIGNATURE OFFER →' },
  { n: '02', t: 'Essential Eight uplift',     d: 'Honest baseline, prioritised plan, ML1 → ML3 path measured every quarter. No vanity dashboards.', more: 'DETAILS →' },
  { n: '03', t: 'Managed detection & response', d: '24/7 MDR with named triage analysts, integrated with your environment — not a ticket factory pretending to be a SOC.', more: 'DETAILS →' },
  { n: '04', t: 'Incident response retainer', d: 'A phone number that picks up at 2am, a tailored runbook, and a senior engineer on the bridge inside an hour.', more: 'DETAILS →' },
];

const TIERS = [
  { n: 'TIER 01', t: 'Bronze',   s: 'Foundational hygiene. The minimum a serious supplier should have. A good starting point.' },
  { n: 'TIER 02', t: 'Silver',   s: 'Documented controls and evidence. A solid step up for businesses bidding into mid-market and corporates.' },
  { n: 'TIER 03', t: 'Gold',     s: 'Risk-managed posture with measured outcomes. Where insurers start giving meaningful discounts — and where we sit ourselves.', signature: true },
  { n: 'TIER 04', t: 'Platinum', s: 'Continuous improvement, board reporting, independent verification.' },
  { n: 'TIER 05', t: 'Diamond',  s: 'Full third-party audit on a recurring cycle. For businesses where cyber posture is a competitive moat.' },
];

const TIMELINE = [
  { w: 'WEEK 01 — 02', t: 'Honest gap analysis', b: 'We map your current controls against the tier you want. You get a written gap register, ranked by effort. No drama.' },
  { w: 'WEEK 03 — 06', t: 'Control uplift',      b: 'We close the gaps — identity, endpoint, backup, MFA, incident plan. Boring controls, properly evidenced.' },
  { w: 'WEEK 07 — 09', t: 'Evidence pack',       b: 'Every control produces an artefact. We compile, label, and cross-reference them to the standard — ready for your insurer, your tender, or any customer who asks.' },
  { w: 'WEEK 10 — 12', t: 'Self-attest & handover', b: 'You complete the SMB1001 self-attestation with the evidence to back it up. You get the certificate, the runbook, and a quarterly check-in to keep it current.' },
];

function DefensiblePage({ go }) {
  return (
    <main data-screen-label="Defensible cyber practice" className="defensible-page">

      {/* ---------- HERO ---------- */}
      <section className="d-hero">
        <div className="wrap">
          <div className="d-hero-logo">
            <img src="assets/defensible-logo.png" alt="Defensible" />
            <span className="practice">The cyber practice<br/>of Planetiware</span>
            <a className="d-cert-badge" href="https://certification.cybercert.ai/issued/b081925c-fcdf-41b5-bca4-c4e0ef53cfba" target="_blank" rel="noopener" title="View our SMB1001 Gold certificate on Cybercert">
              <img src="assets/smb1001-gold.png" alt="SMB1001 Gold (Level 3) — Cybercert" />
              <span className="d-cert-text">
                <strong>We hold it ourselves.</strong>
                <span>SMB1001 Gold · Level 3</span>
              </span>
            </a>
          </div>
          <Eyebrow>Cyber for Australian SMBs</Eyebrow>
          <h1 style={{marginTop: 24}}>Cyber posture you can <em>defend</em> in writing.</h1>
          <p className="d-hero-sub">
            Defensible is the cyber practice inside Planetiware — a focused offering for Australian businesses who need to satisfy a cyber insurer, win a tender, or sleep at night without buying enterprise tooling they will never use.
          </p>
          <div className="d-hero-actions">
            <button className="btn btn-primary" onClick={() => go('contact')}>
              Book a posture review <span className="d-arrow">→</span>
            </button>
            <a className="btn btn-ghost" href="#defensible-smb1001"
               onClick={(e) => { e.preventDefault(); document.getElementById('defensible-smb1001')?.scrollIntoView({behavior: 'smooth', block: 'start'}); }}>
              SMB1001 certification
            </a>
          </div>

          <div className="d-hero-meta">
            <div className="d-hero-meta-cell">
              <div className="k">Signature offer</div>
              <div className="v">SMB1001<br/>certification prep</div>
            </div>
            <div className="d-hero-meta-cell">
              <div className="k">Built for</div>
              <div className="v">Australian SMBs<br/>20–500 staff</div>
            </div>
            <div className="d-hero-meta-cell">
              <div className="k">Delivered by</div>
              <div className="v">Named senior<br/>engineers only</div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- STANCE ---------- */}
      <section className="d-short">
        <div className="wrap">
          <div className="d-section-head">
            <div>
              <Eyebrow>The stance</Eyebrow>
              <h2 style={{marginTop: 18}}>Cyber is a posture, not a product.</h2>
            </div>
            <p className="lede">
              Most cyber engagements end with a stack of dashboards no-one watches and a policy nobody reads. We work the other way around — starting from what your business has to be able to <em style={{fontStyle: 'italic', color: 'var(--d-paper-2)'}}>prove</em>, working back to the smallest, cheapest, most boring controls that get you there.
            </p>
          </div>
          <div className="d-stance">
            {STANCE.map((s) => (
              <div key={s.n} className="d-stance-cell">
                <span className="n">{s.n}</span>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- ENGAGEMENTS ---------- */}
      <section>
        <div className="wrap">
          <div className="d-section-head">
            <div>
              <Eyebrow>What we do</Eyebrow>
              <h2 style={{marginTop: 18}}>Four cyber engagements.<br/>That is the whole list.</h2>
            </div>
            <p className="lede">
              Each one has a written outcome, a fixed-fee discovery on the front, and an exit criterion. We do these four things — properly — and refer the rest to the broader Planetiware practice.
            </p>
          </div>
          <div className="d-svc-list">
            {ENGAGEMENTS.map((e) => (
              <div key={e.n} className="d-svc-row" onClick={() => go('contact')}>
                <div className="num">{e.n}</div>
                <div className="title">{e.t}</div>
                <div className="desc">{e.d}</div>
                <div className="more">{e.more}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- SMB1001 TIERS ---------- */}
      <section id="defensible-smb1001">
        <div className="wrap">
          <div className="d-section-head">
            <div>
              <Eyebrow>SMB1001 — the signature offer</Eyebrow>
              <h2 style={{marginTop: 18}}>One standard.<br/>Five levels of seriousness.</h2>
            </div>
            <div>
              <p className="lede">
                SMB1001 is the Australian cyber standard built for businesses that are not enterprises. Most of our clients aim for Gold — enough to win the work, satisfy the insurer, and prove the posture without over-engineering. We hold Gold ourselves.
              </p>
              <div className="d-self-cert">
                <a href="https://certification.cybercert.ai/issued/b081925c-fcdf-41b5-bca4-c4e0ef53cfba" target="_blank" rel="noopener" title="View our SMB1001 Gold certificate on Cybercert">
                  <img src="assets/smb1001-gold.png" alt="SMB1001 Gold Level 3" />
                </a>
                <div>
                  <div className="k">We hold Gold ourselves</div>
                  <p>Planetiware is certified to SMB1001 Gold (Level 3) by Cybercert. We know what the evidence pack looks like because we built ours — and we will not put you through something we have not done.</p>
                  <a className="d-cert-link" href="https://certification.cybercert.ai/issued/b081925c-fcdf-41b5-bca4-c4e0ef53cfba" target="_blank" rel="noopener">
                    Verify our certificate →
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div className="d-tiers">
            {TIERS.map((t) => (
              <div key={t.n} className={`d-tier ${t.signature ? 'signature' : ''}`}>
                <div className="n">{t.n}</div>
                <h4>{t.t}</h4>
                <p className="sub">{t.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- TIMELINE ---------- */}
      <section className="d-short">
        <div className="wrap">
          <div className="d-section-head">
            <div>
              <Eyebrow>How we work</Eyebrow>
              <h2 style={{marginTop: 18}}>From kickoff to certified.<br/>Eight to twelve weeks.</h2>
            </div>
            <p className="lede">
              Fixed fee, fixed timeline, fixed outcome. We do not bill discovery while we figure out what we are selling.
            </p>
          </div>
          <div className="d-timeline">
            {TIMELINE.map((t) => (
              <div key={t.w} className="d-timeline-cell">
                <div className="week">{t.w}</div>
                <h4>{t.t}</h4>
                <p className="b">{t.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- QUOTE ---------- */}
      <section style={{paddingTop: 0, paddingBottom: 0}}>
        <div className="wrap">
          <div className="d-quote">
            <blockquote>Our cyber insurer accepted the evidence pack without a single follow-up question. The renewal was the easiest meeting of the year.</blockquote>
            <div className="d-quote-attr">
              <span className="name">CFO</span>
              <span>·</span>
              <span>Logistics · 180 staff · SMB1001 Bronze, 2025</span>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- CTA ---------- */}
      <section className="d-cta">
        <div className="wrap-tight">
          <Eyebrow muted>Next step</Eyebrow>
          <h2 style={{marginTop: 18}}>A thirty-minute posture review.<br/>One honest opinion.</h2>
          <p>
            Tell us the one cyber thing keeping your team up at night. We will tell you what we would actually do about it — and whether the Defensible practice or the broader Planetiware team is the right answer.
          </p>
          <div className="actions">
            <button className="btn btn-primary" onClick={() => go('contact')}>
              Book the review <span className="d-arrow">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ---------- PRACTICE LINE ---------- */}
      <div className="d-practice-line">
        <span>Defensible is the cyber practice of <strong>Planetiware</strong>. Same team. Same support line. Sharper focus.</span>
      </div>
    </main>
  );
}

Object.assign(window, { DefensiblePage });