// Accretion.jsx — how Accretion uses Hackhack as its pre-audit layer.
//
// NOTE: the 80% figure is a business claim, not measured output. Confirm it is
// substantiable before this ships — it reads as fact here.
const PRE_AUDIT_STAT = {
  value: '80%',
  label: 'fewer bugs left to find',
  body: 'The pre-audit clears the mechanical findings before a human auditor opens the repository, so the engagement starts further along.',
};

// Deliberately not a second percentage. Clearing 80% of the bugs does not cut
// 80% of the work — auditors still have to read and understand every line — so
// any cost saving we could honestly quote lands far below the 80% and reads as
// a let-down sitting next to it. What actually improves is the audit itself.
const OUTCOMES = [
  {
    title: 'Auditors go deeper',
    body: 'The engagement is spent on design, economics and intent, not on the bugs a machine had already found.',
  },
  {
    title: 'A cleaner final report',
    body: 'Routine issues are gone before the report is written, so what is left in it is the substance.',
  },
  {
    title: 'Less back and forth',
    body: 'The simple bugs are fixed before the audit starts, which cuts rounds off remediation at the end.',
  },
];

const PIPELINE = [
  { step: '01', title: 'Your repository', body: 'Anchor, native Rust, or Pinocchio. Whatever you are shipping.' },
  { step: '02', title: 'Hackhack pre-audit', body: 'Autonomous review reproduces what it can exploit and clears it out.', active: true },
  { step: '03', title: 'Accretion audit', body: 'Senior auditors start on the hard part: design, economics, intent.' },
];

function Accretion() {
  return (
    <section id="accretion" className="section section-rule section-sunken">
      <div className="container">
        <div className="section-intro" style={{ maxWidth: 760 }}>
          <img src="assets/accretion.png" alt="Accretion" style={{ height: 24, width: 'auto', marginBottom: 28 }} />
          <span className="eyebrow">the pre-audit engine</span>
          <h2 className="h-section">
            Accretion runs Hackhack<br />
            <span className="h-quiet">before a human audit begins.</span>
          </h2>
          <p className="lead">
            Every Accretion engagement starts with a Hackhack pre-audit across the customer&rsquo;s
            repositories. The machine clears what a machine can clear, so senior auditors spend
            their time where human judgement actually matters.
          </p>
        </div>

        {/* What the pre-audit changes for the customer: one number, then the
            things that number is actually worth. */}
        <div className="grid-2" style={{ gap: 'clamp(24px, 4vw, 48px)', marginBottom: 'clamp(56px, 7vw, 88px)', alignItems: 'start' }}>
          <div style={{ borderTop: '1px solid var(--hh-border)', paddingTop: 24 }}>
            <div className="hh-tabular" style={{
              fontWeight: 700, fontSize: 'clamp(44px, 6vw, 72px)', lineHeight: 1,
              letterSpacing: '-0.04em', color: 'var(--hh-mint)',
            }}>{PRE_AUDIT_STAT.value}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--hh-text)', margin: '14px 0 12px',
            }}>{PRE_AUDIT_STAT.label}</div>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--hh-text-muted)', margin: 0, maxWidth: '46ch' }}>
              {PRE_AUDIT_STAT.body}
            </p>
          </div>

          <div style={{ borderTop: '1px solid var(--hh-border)', paddingTop: 24 }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--hh-text)', marginBottom: 18,
            }}>what that buys you</div>
            {OUTCOMES.map((o, i) => (
              <div key={o.title} style={{
                paddingTop: i === 0 ? 0 : 16, paddingBottom: 16,
                borderBottom: i === OUTCOMES.length - 1 ? 'none' : '1px solid var(--hh-divider)',
              }}>
                <div style={{ fontSize: 16, color: 'var(--hh-text)', marginBottom: 5 }}>{o.title}</div>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--hh-text-muted)', margin: 0, maxWidth: '46ch' }}>
                  {o.body}
                </p>
              </div>
            ))}
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--hh-text)', margin: '4px 0 0' }}>
              You get a better audit, not a thinner one.
            </p>
          </div>
        </div>

        {/* The order of operations, on one connected rule. */}
        <div className="pipeline" style={{ marginBottom: 'clamp(56px, 7vw, 88px)' }}>
          {PIPELINE.map((p) => (
            <div key={p.step} className="pipeline-step" data-active={p.active ? 'true' : 'false'}>
              <span className="pipeline-node" aria-hidden="true" />
              <span style={{
                fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 11,
                letterSpacing: '0.16em', color: p.active ? 'var(--hh-mint)' : 'var(--hh-text-muted)',
              }}>{p.step}</span>
              <div style={{ fontSize: 17, color: 'var(--hh-text)', margin: '12px 0 8px' }}>{p.title}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--hh-text-muted)', margin: 0, maxWidth: '38ch' }}>{p.body}</p>
            </div>
          ))}
        </div>

        {/* Two ways in. The left one is the point: you do not need an audit
            engagement to use Hackhack. */}
        <div className="grid-2" style={{ gap: 'clamp(16px, 2.5vw, 24px)' }}>
          <div className="card card-featured" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <span className="eyebrow" style={{ margin: 0, color: 'var(--hh-mint)' }}>standalone</span>
            <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--hh-text)', letterSpacing: '-0.01em' }}>
              Submit a repo. We run the review.
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--hh-text-muted)', margin: 0 }}>
              You do not need an audit engagement, an introduction, or a sales call. Submit your
              repository and we return verified findings in hours.
            </p>
            <a className="btn btn-primary" href="https://app.hackhack.ai" style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
              Run a security review
            </a>
          </div>

          <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <span className="eyebrow" style={{ margin: 0 }}>with an audit</span>
            <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--hh-text)', letterSpacing: '-0.01em' }}>
              Or as part of an Accretion engagement.
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--hh-text-muted)', margin: 0 }}>
              Included as the pre-audit layer in every Accretion audit. Submit a review here first
              and book an audit later, and what you spent here is credited against that engagement,
              up to the cap.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Accretion = Accretion;