// Maple Pavers Explorer — WHY US / TRUST PILLARS, 5 variants.
(function () {
  const { Badge } = window.MaplePaversDesignSystem_8de4d8;
  const { Icon, Overline, PHOTO } = window.MP;
  const PILLARS = window.MP.data.pillars;
  const REASONS = window.MP.data.reasons;

  const Heading = ({ onDark, title }) => (
    <div style={{ marginBottom: 24 }}>
      <Overline onDark>Why Maple Pavers</Overline>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, lineHeight: 1.12, color: onDark ? 'var(--beige-150)' : 'var(--text-strong)', margin: '10px 0 0' }}>{title || 'We earn it. We don\u2019t claim it.'}</h2>
    </div>
  );

  // V1 — Dark pillars
  function WhyDark() {
    return (
      <section style={{ background: 'var(--graphite)', padding: '54px 22px' }}>
        <Heading onDark />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {PILLARS.map((p) => (
            <div key={p.t} style={{ display: 'flex', gap: 14 }}>
              <div style={{ width: 46, height: 46, borderRadius: 'var(--radius)', background: 'rgba(196,122,90,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                <Icon name={p.icon} size={22} color="var(--clay)" />
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--beige-150)', margin: '0 0 5px' }}>{p.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: '21px', color: 'var(--text-on-dark-muted)', margin: 0 }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // V2 — Beige cards
  function WhyCards() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '54px 22px' }}>
        <Heading />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {PILLARS.map((p) => (
            <div key={p.t} style={{ background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: '20px', borderLeft: '3px solid var(--terracotta)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 8 }}>
                <Icon name={p.icon} size={22} color="var(--terracotta)" />
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-strong)', margin: 0 }}>{p.t}</h3>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: '21px', color: 'var(--text-muted)', margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // V3 — Photo split
  function WhyPhoto() {
    return (
      <section style={{ background: 'var(--color-bg)', padding: '54px 22px' }}>
        <div style={{ position: 'relative', height: 180, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow)', marginBottom: 24 }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${PHOTO}hero-driveway.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(26,26,26,0.7), rgba(26,26,26,0.1))' }} />
          <div style={{ position: 'absolute', bottom: 16, left: 16 }}>
            <Overline onDark color="var(--beige-150)">Since 1992</Overline>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--beige-150)', marginTop: 4 }}>Family-owned. Owner-run.</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {PILLARS.map((p) => (
            <div key={p.t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <Icon name="check" size={20} color="var(--terracotta)" style={{ marginTop: 2 }} />
              <div>
                <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, letterSpacing: '0.02em', color: 'var(--text-strong)', margin: '0 0 3px' }}>{p.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: '20px', color: 'var(--text-muted)', margin: 0 }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // V4 — Big claim + trust chips
  function WhyClaim() {
    const chips = ['Licensed & Insured', 'WSIB Compliant', 'Unilock Authorized', '10-Year Warranty', 'BBB A+'];
    return (
      <section style={{ background: 'var(--terracotta)', padding: '54px 22px' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>Family-Owned Since 1992</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 34, lineHeight: 1.06, color: '#fff', margin: '12px 0 16px' }}>
          Three generations. One promise: do it once, do it right.
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: '23px', color: 'rgba(255,255,255,0.9)', margin: '0 0 22px' }}>
          We're not the cheapest quote you'll get. We're the one you won't have to call back.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {chips.map((c) => (
            <span key={c} style={{ display: 'flex', alignItems: 'center', gap: 7, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius)', padding: '8px 12px', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: '#fff' }}>
              <Icon name="check" size={14} /> {c}
            </span>
          ))}
        </div>
      </section>
    );
  }

  // V5 — Numbered editorial list (4 reasons)
  function WhyNumbered() {
    return (
      <section style={{ background: 'var(--color-bg)', padding: '54px 22px' }}>
        <Heading title="Four reasons we win the second quote." />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {REASONS.map((r, i) => (
            <div key={r.t} style={{ display: 'flex', gap: 16, padding: '16px 0', borderTop: '1px solid var(--border-subtle)', alignItems: 'flex-start' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--terracotta)', flex: 'none', width: 28 }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-strong)', margin: '0 0 3px' }}>{r.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: '20px', color: 'var(--text-muted)', margin: 0 }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  window.MP.register('why', {
    label: 'Why us',
    options: [
      { id: 'dark', name: '1 · Dark pillars', Render: WhyDark },
      { id: 'cards', name: '2 · Accent cards', Render: WhyCards },
      { id: 'photo', name: '3 · Photo split', Render: WhyPhoto },
      { id: 'claim', name: '4 · Bold claim + chips', Render: WhyClaim },
      { id: 'numbered', name: '5 · Numbered list', Render: WhyNumbered },
    ],
  });
})();