/* global React, Icon, CheckBox */
const { useState: useStateBA } = React;

const SERVICE_TILES = [
  { title: 'Deck Staining',              slug: 'deck-staining',              cat: 'OUTDOOR', img: 'uploads/IMG_4285.png',  desc: 'Penetrating oil-based stains in seven colours. No peeling, no film. Long-lasting protection from Ontario weather.' },
  { title: 'Fence Staining',             slug: 'fence-staining',             cat: 'OUTDOOR', img: 'uploads/IMG_4308.png',  desc: 'Match or complement your deck. Protects every face, edge, and post top from moisture, mold, and UV.' },
  { title: 'Deck Cleaning',              slug: 'deck-cleaning',              cat: 'OUTDOOR', img: 'uploads/IMG_4286.png',  desc: 'Chemical sanitation and calibrated power washing — the essential first step before any stain or seal goes down.' },
  { title: 'Fence Cleaning',             slug: 'fence-cleaning',             cat: 'OUTDOOR', img: 'uploads/IMG_4303.png',  desc: 'Mold, algae, and greyed-out oxidized wood removed down to clean, healthy wood ready for finishing.' },
  { title: 'Paint & Stain Stripping',    slug: 'paint-stripping',            cat: 'OUTDOOR', img: 'uploads/IMG_4296.png',  desc: 'Eco-friendly strippers take old product off completely — the right way to prep before a new coat.' },
  { title: 'Deck Sanding & Prep',        slug: 'deck-sanding-prep',          cat: 'OUTDOOR', img: 'uploads/IMG_4294.png',  desc: 'Commercial sanders for the field, hand work on railings and spindles. A surface the finish can actually hold.' },
  { title: 'Hardwood Floor Refinishing', slug: 'hardwood-floor-refinishing', cat: 'INDOOR',  img: 'uploads/IMG_2943.PNG', desc: 'Drum sanding, optional colour stain, and durable topcoats. Decades of character brought back to life.' },
];

function ServiceTeaser() {
  return (
    <section id="services" style={stTeaserSt.wrap}>
      <div style={stTeaserSt.inner}>
        <div className="ds-eyebrow" style={{ textAlign: 'center', marginBottom: 12 }}>OUR SERVICES</div>
        <h2 style={stTeaserSt.h2}>Everything your wood needs.</h2>
        <div style={stTeaserSt.grid}>
          {SERVICE_TILES.map(svc => (
            <a key={svc.slug} href={svc.slug + '.html'} style={stTeaserSt.card}>
              <div style={stTeaserSt.imgWrap}>
                <img src={svc.img} alt={svc.title} style={stTeaserSt.img} loading="lazy" />
                <span style={{ ...stTeaserSt.cat, ...(svc.cat === 'INDOOR' ? stTeaserSt.catIndoor : {}) }}>{svc.cat}</span>
              </div>
              <div style={stTeaserSt.body}>
                <h3 style={stTeaserSt.title}>{svc.title}</h3>
                <p style={stTeaserSt.desc}>{svc.desc}</p>
                <span style={stTeaserSt.cta}>Learn More →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const stTeaserSt = {
  wrap: { background: 'var(--paper)', padding: '96px 0', borderTop: '1px solid var(--border)' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(2rem,3.6vw,3rem)', lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '0 0 48px', textAlign: 'center' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(320px,1fr))', gap: 24 },
  card: { background: 'var(--paper)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', textDecoration: 'none', transition: 'transform var(--transition-base), box-shadow var(--transition-base)' },
  imgWrap: { aspectRatio: '3/2', overflow: 'hidden', position: 'relative' },
  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s cubic-bezier(.2,.6,.2,1)' },
  cat: { position: 'absolute', top: 14, left: 14, padding: '4px 10px', background: 'var(--forest-700)', color: '#fff', borderRadius: 999, fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em' },
  catIndoor: { background: 'var(--ink-900)' },
  body: { padding: '20px 24px 24px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 },
  title: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--ink-900)', margin: 0, letterSpacing: '-0.01em' },
  desc: { fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-700)', margin: 0 },
  cta: { marginTop: 'auto', paddingTop: 8, fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 700, color: 'var(--forest-700)' },
};

// ── SMARTER CHOICE (why restore) ────────────────────────────────
function SmarterChoice() {
  const bullets = [
    { title: 'Preserve Character', body: 'Keep the authentic wood that gives your home charm.' },
    { title: 'Cost-Effective', body: 'More affordable than replacement.' },
    { title: 'Eco-Friendly', body: 'Reduce waste by renewing what you already have.' },
    { title: 'Transformative Results', body: 'Floors and decks that look brand new.' },
  ];
  return (
    <section style={scStyles.wrap}>
      <div style={scStyles.inner}>
        <div style={scStyles.left}>
          <div className="ds-eyebrow">WHY RESTORE</div>
          <h2 style={scStyles.h2}>A Smarter Choice Than Replacement</h2>
          <p style={scStyles.lead}>
            Most decks and floors don't need to be ripped out. They need an expert and a weekend.
          </p>
          <div style={scStyles.bullets}>
            {bullets.map(b => (
              <div key={b.title} style={scStyles.bullet}>
                <CheckBox size={28} />
                <div>
                  <div style={scStyles.bulletTitle}>{b.title}</div>
                  <div style={scStyles.bulletBody}>{b.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <BeforeAfter />
      </div>
    </section>
  );
}

const scStyles = {
  wrap: { background: 'var(--cream)', padding: '96px 0' },
  inner: {
    maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
  },
  left: {},
  h2: {
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: 'clamp(2rem, 3.6vw, 2.75rem)', lineHeight: 1.1,
    letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '14px 0 16px',
  },
  lead: {
    fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55,
    color: 'var(--ink-700)', margin: '0 0 32px', maxWidth: 480,
  },
  bullets: { display: 'flex', flexDirection: 'column', gap: 18 },
  bullet: { display: 'flex', gap: 14, alignItems: 'flex-start' },
  bulletTitle: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17,
    color: 'var(--ink-900)', marginBottom: 3,
  },
  bulletBody: {
    fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.5,
    color: 'var(--ink-700)',
  },
};

// ── BEFORE / AFTER SLIDER ────────────────────────────────────────
function BeforeAfter() {
  const [pos, setPos] = useStateBA(42);
  return (
    <div style={baStyles.frame}>
      <img src="uploads/IMG_4285.png" alt="After restoration" style={baStyles.img} />
      <div style={{ ...baStyles.beforeClip, width: pos + '%' }}>
        <img
          src="uploads/IMG_4286.png"
          alt="Before restoration"
          style={{ ...baStyles.img, position: 'absolute', top: 0, left: 0, width: '100%' }}
        />
      </div>
      <span style={{ ...baStyles.label, top: 14, left: 14, background: 'var(--ink-900)', color: '#fff' }}>BEFORE</span>
      <span style={{ ...baStyles.label, top: 14, right: 14, background: 'var(--forest-700)', color: '#fff' }}>AFTER</span>
      <div style={{ ...baStyles.divider, left: pos + '%' }}>
        <div style={baStyles.knob}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--forest-700)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 6 9 12 15 18"/>
          </svg>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--forest-700)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 6 15 12 9 18"/>
          </svg>
        </div>
      </div>
      <input
        type="range" min="0" max="100" value={pos}
        onChange={e => setPos(+e.target.value)}
        style={baStyles.slider}
        aria-label="Drag to compare before and after"
      />
      <div style={baStyles.caption}>Drag to compare · Benjamin Moore Arborcoat</div>
    </div>
  );
}

const baStyles = {
  frame: {
    position: 'relative', borderRadius: 22, overflow: 'hidden',
    boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border)',
    userSelect: 'none', aspectRatio: '4/3',
  },
  img: { width: '100%', height: '100%', display: 'block', objectFit: 'cover' },
  beforeClip: {
    position: 'absolute', top: 0, left: 0, height: '100%', overflow: 'hidden',
  },
  label: {
    position: 'absolute', padding: '5px 11px', borderRadius: 999,
    fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 700,
    letterSpacing: '0.14em', zIndex: 5,
  },
  divider: {
    position: 'absolute', top: 0, bottom: 0, width: 3,
    background: '#fff', transform: 'translateX(-50%)',
    boxShadow: '0 0 0 1px rgba(0,0,0,0.12)', pointerEvents: 'none', zIndex: 4,
  },
  knob: {
    position: 'absolute', top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 40, height: 40, borderRadius: '50%',
    background: '#fff', boxShadow: 'var(--shadow-md)',
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2,
    border: '2px solid var(--forest-700)',
  },
  slider: {
    position: 'absolute', inset: 0, width: '100%', height: '100%',
    opacity: 0, cursor: 'ew-resize', margin: 0, zIndex: 10,
  },
  caption: {
    position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)',
    background: 'rgba(20,17,13,0.72)', backdropFilter: 'blur(8px)',
    color: '#fff', padding: '5px 14px', borderRadius: 999,
    fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 500,
    whiteSpace: 'nowrap', zIndex: 5,
  },
};

window.Services = ServiceTeaser;
window.SmarterChoice = SmarterChoice;