// AlignSpace landing — Offer (trust strip + two-step funnel + process)
function OfferSection({ onRequestAudit, onBookSession }) {
  const { SectionLabel, PricingCard, TrustItem, Step } = window.AlignSpaceDesignSystem_d3d6d6;

  const trust = [
    ['shield-check', 'Fully Insured', 'Commercial general liability on every project.'],
    ['ruler', '±1mm Tolerance', 'Cabinetry-grade precision, not framing-grade.'],
    ['cpu', 'Computational Fabrication', 'We execute geometry other shops decline.'],
    ['file-check-2', 'WSIB Registered', 'WorkSafe coverage — no liability transferred.'],
  ];

  return (
    <>
      {/* trust strip */}
      <div style={{ borderBottom: '1px solid var(--border-hairline)', background: 'var(--surface-page)' }}>
        <div className="as-wrap as-trust-grid">
          {trust.map(([ic, t, s]) => (
            <TrustItem key={t} icon={<i data-lucide={ic} style={{ width: 20, height: 20 }}></i>} title={t} subtitle={s} />
          ))}
        </div>
      </div>

      {/* offer */}
      <section id="offer" style={{ background: 'var(--surface-raised)', padding: 'var(--section-y) 0' }}>
        <div className="as-wrap">
          <div style={{ maxWidth: '56ch', marginBottom: '56px' }}>
            <SectionLabel>What You Get</SectionLabel>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', lineHeight: 'var(--leading-tight)', color: 'var(--text-primary)', margin: '16px 0 12px' }}>
              Two steps. Start free, commit when the layout earns it.
            </h2>
            <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-muted)' }}>
              The audit proves the method on your actual room. The session is where we iterate live and hand you a fabrication-ready package.
            </p>
          </div>

          <div className="as-pricing-grid">
            <PricingCard
              eyebrow="Step 01 · Lead magnet"
              title="Parametric Layout Audit"
              price="Free"
              description="Submit your room details and we return a single-page parametric layout PDF — clearances checked, ratios resolved."
              features={['1-page parametric layout PDF', 'Appliance clearance + workflow check', 'Upper / lower ratio recommendation', '48-hour turnaround, no obligation']}
              ctaLabel="Request Free Audit"
              onCta={onRequestAudit}
              style={{ background: 'var(--surface-card)' }}
            />
            <PricingCard
              featured
              badge="Most Popular"
              eyebrow="Step 02 · Paid session"
              title="Parametric Design Session"
              price="$500"
              cadence="/ 2-hour session"
              description="A live working session where we iterate your layout in real time and leave you with a complete deliverable package."
              features={['2-hour live consultation', 'Real-time layout iteration on screen', 'Cut list + elevations + clearances', 'Fabrication-ready package to your shop']}
              ctaLabel="Book a Design Session"
              onCta={onBookSession}
            />
          </div>
        </div>
      </section>

      {/* process */}
      <section id="process" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
        <div className="as-wrap">
          <div style={{ maxWidth: '50ch', marginBottom: '48px' }}>
            <SectionLabel>How It Works</SectionLabel>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', color: 'var(--text-primary)', margin: '16px 0 0' }}>From room to resolved layout.</h2>
          </div>
          <div className="as-process-grid">
            {[
              [1, 'Submit Your Room', 'Fill the parametric intake below — dimensions, doors, windows, appliances and preferences. Five minutes, no call required.'],
              [2, 'We Run the Model', 'We model the kitchen as a constraint system and return a 1-page layout PDF within 48 hours — clearances and ratios resolved.'],
              [3, 'Iterate Live', 'Book the $500 session to refine the layout in real time and walk away with a fabrication-ready package.'],
            ].map(([i, t, d]) => (
              <div key={i} style={{ background: 'var(--surface-card)', padding: '32px' }}>
                <Step index={i} title={t}>{d}</Step>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}
window.OfferSection = OfferSection;