/* global React, Icon, CheckBox */

function OtherGuys() {
  return (
    <section style={ogStyles.wrap}>
      <div style={ogStyles.inner}>
        <div style={ogStyles.compare}>
          <div style={ogStyles.col}>
            <div style={ogStyles.colHeader}>
              <span style={ogStyles.colTagOther}>The Other Guys</span>
            </div>
            <blockquote style={ogStyles.otherQuote}>
              "We paint, power-wash, clean windows, remodel kitchens, change lightbulbs, groom dogs — and yes, we can paint your deck and floor today."
            </blockquote>
          </div>
          <div style={{ ...ogStyles.col, ...ogStyles.usCol }}>
            <div style={ogStyles.colHeader}>
              <img src="assets/logo-white.png" alt="Deck Restore+" style={{ height: 28 }} />
            </div>
            <div style={ogStyles.usQuote}>"We Restore Wood."</div>
            <div style={ogStyles.usSubhead}>We're experts in one thing.</div>
          </div>
        </div>
      </div>
    </section>);

}

const ogStyles = {
  wrap: { background: 'var(--cream)', padding: '96px 0' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  compare: {
    display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 24,
    alignItems: 'stretch'
  },
  col: {
    background: 'var(--paper)', border: '1px solid var(--border)',
    borderRadius: 22, padding: '40px 36px',
    display: 'flex', flexDirection: 'column', gap: 20
  },
  usCol: { background: 'var(--forest-700)', border: 'none', color: '#fff' },
  colHeader: {},
  colTagOther: {
    display: 'inline-block', padding: '5px 12px',
    background: 'var(--ink-100)', color: 'var(--ink-600)',
    borderRadius: 999, fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 700,
    letterSpacing: '0.16em', textTransform: 'uppercase'
  },
  otherQuote: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic',
    fontSize: 22, lineHeight: 1.4, color: 'var(--ink-600)',
    fontWeight: 500, margin: 0
  },
  usQuote: {
    fontFamily: 'var(--font-display)', fontWeight: 800,
    fontSize: 'clamp(2.5rem, 4.5vw, 4rem)', lineHeight: 1.0,
    letterSpacing: '-0.03em', color: '#fff'
  },
  usSubhead: {
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22,
    color: 'var(--mint-300)', letterSpacing: '-0.01em'
  }
};

function Process() {
  const steps = [
  {
    title: 'Wood Cleaning',
    lead: 'Specialized solutions break down mold, algae, and moss at a molecular level. Commercial-grade power washing — enough pressure to clean, not enough to gouge.',
    pills: ['Prevents Slips & Falls', 'Better Stain Adhesion', 'Prevents Mold Regrowth']
  },
  {
    title: 'Stain Stripping',
    lead: 'Eco-friendly chemical strippers safe for pets, plants, and people. Selective removal tuned to the original stain — penetrating or film-forming.',
    pills: ['Removes Stubborn Coatings', 'Fits Into Cleaning Process', 'Cost-Effective']
  },
  {
    title: 'Sanding',
    lead: 'Commercial floor sander for an even canvas. Hand-sanding railings, edges, corners. Opens the grain so stain absorbs deep and evenly.',
    pills: ['Optimal Stain Penetration', 'Smoother, Safer Surface', 'Extended Lifespan']
  },
  {
    title: 'Staining & Sealing',
    lead: 'Premium oil-based stains penetrate deep — better moisture resistance, no peeling. Solid stains for tough cover-ups. Clear seals for natural-wood lovers.',
    pills: ['Long-Lasting Protection', 'Customizable Finishes', 'Prevents Moisture Damage']
  }];


  return (
    <section id="process" style={prStyles.wrap}>
      <div style={prStyles.inner}>
        <div style={prStyles.header}>
          <div className="ds-eyebrow" style={{ color: 'var(--mint-300)' }}>OUR PROCESS</div>
          <h2 style={prStyles.h2}>Four steps. No shortcuts.</h2>
          <p style={prStyles.lead}>
            Each project moves through the same disciplined sequence. Plus, when boards are too far gone — minor repairs and deck resurfacing fold in seamlessly.
          </p>
        </div>
        <div style={prStyles.list}>
          {steps.map((s, i) =>
          <div key={s.title} style={prStyles.step}>
              <div style={prStyles.stepNum}>0{i + 1}</div>
              <div style={prStyles.stepContent}>
                <h3 style={prStyles.stepTitle}>{s.title}</h3>
                <p style={prStyles.stepLead}>{s.lead}</p>
                <div style={prStyles.pills}>
                  {s.pills.map((p) =>
                <div key={p} style={prStyles.pill}>
                      <CheckBox size={22} />
                      <span>{p}</span>
                    </div>
                )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const prStyles = {
  wrap: { background: 'var(--forest-700)', color: '#fff', padding: '96px 0' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  header: { textAlign: 'center', maxWidth: 640, margin: '0 auto 64px' },
  h2: {
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: 'clamp(2rem, 3.6vw, 3rem)', lineHeight: 1.1,
    letterSpacing: '-0.02em', color: '#fff', margin: '14px 0 16px'
  },
  lead: {
    fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6,
    color: 'rgba(255,255,255,0.78)', margin: 0
  },
  list: { display: 'flex', flexDirection: 'column', gap: 24 },
  step: {
    background: 'var(--forest-800)', borderRadius: 22, padding: '28px 32px',
    display: 'grid', gridTemplateColumns: '80px 1fr', gap: 24, alignItems: 'flex-start',
    border: '1px solid var(--forest-600)'
  },
  stepNum: {
    fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44,
    color: 'var(--mint-300)', letterSpacing: '-0.02em', lineHeight: 1
  },
  stepContent: {},
  stepTitle: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26,
    color: '#fff', margin: '0 0 8px', letterSpacing: '-0.01em'
  },
  stepLead: {
    fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55,
    color: 'rgba(255,255,255,0.78)', margin: '0 0 16px', maxWidth: 720
  },
  pills: { display: 'flex', gap: 10, flexWrap: 'wrap' },
  pill: {
    display: 'flex', alignItems: 'center', gap: 9,
    background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)',
    padding: '8px 13px', borderRadius: 999,
    fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, color: '#fff'
  }
};

// Parse hex → [r,g,b] and scale to produce a darker gap/shadow colour
function hexDarken(hex, factor) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const toHex = (v) => Math.round(v * factor).toString(16).padStart(2, '0');
  return '#' + toHex(r) + toHex(g) + toHex(b);
}

function WoodChip({ stain, index }) {
  const id = 'wg-' + index;
  const gap = hexDarken(stain.hex, 0.58);
  const boards = [0, 30, 60, 90];
  return (
    <div style={stStyles.chipWrap}>
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 120 120" style={{ display: 'block' }}>
        <defs>
          <filter id={id + 'a'}>
            <feTurbulence type="fractalNoise" baseFrequency="0.85 0.018" numOctaves="3" seed={index + 3} />
            <feColorMatrix values="0 0 0 0 0.18  0 0 0 0 0.09  0 0 0 0 0.03  0 0 0 0.42 0" />
          </filter>
          <filter id={id + 'b'}>
            <feTurbulence type="fractalNoise" baseFrequency="0.4 0.008" numOctaves="2" seed={index + 9} />
            <feColorMatrix values="0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0 0.01  0 0 0 0.22 0" />
          </filter>
          <clipPath id={id + 'clip'}>
            <rect width="120" height="120" />
          </clipPath>
        </defs>
        <g clipPath={`url(#${id}clip)`}>
          {boards.map((y) =>
          <g key={y}>
              <rect x="0" y={y} width="120" height="29" fill={stain.hex} />
              <rect x="0" y={y} width="120" height="29" filter={`url(#${id}a)`} opacity="0.65" />
              <rect x="0" y={y} width="120" height="29" filter={`url(#${id}b)`} opacity="0.35" />
            </g>
          )}
          {/* board gaps */}
          {boards.map((y) =>
          <line key={'g' + y} x1="0" y1={y + 29} x2="120" y2={y + 29} stroke={gap} strokeWidth="2.5" opacity="0.8" />
          )}
          {/* subtle highlight at top of each board */}
          {boards.map((y) =>
          <rect key={'h' + y} x="0" y={y} width="120" height="4" fill="#fff" opacity="0.07" />
          )}
        </g>
      </svg>
    </div>);

}

function StainColors() {
  const stains = [
  { name: 'Natural', hex: '#d4b896' },
  { name: 'Cedar', hex: '#c5824a' },
  { name: 'Teak', hex: '#8a5a3a' },
  { name: 'Mahogany', hex: '#5c2e1f' },
  { name: 'Redwood', hex: '#a83f2a' },
  { name: 'Chestnut Brown', hex: '#6b3a1f' },
  { name: 'Bleached Gray', hex: '#b2ada0' }];

  return (
    <section style={stStyles.wrap}>
      <div style={stStyles.inner}>
        <div style={stStyles.header}>
          <div className="ds-eyebrow">COLOR OPTIONS</div>
          <h2 style={stStyles.h2}>Seven finishes. Pick yours.</h2>
          <p style={stStyles.lead}>We primarily work with Benjamin Moore Woodluxe, and Cutek Extreme Superdeck or Cutek Extreme on request. Custom colours available.

          </p>
        </div>
        <div style={stStyles.grid}>
          {stains.map((s, i) =>
          <div key={s.name} style={stStyles.swatch}>
              <WoodChip stain={s} index={i} />
              <div style={stStyles.swatchName}>{s.name}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const stStyles = {
  wrap: { background: 'var(--paper)', padding: '96px 0', borderTop: '1px solid var(--border)' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  header: { textAlign: 'center', maxWidth: 600, margin: '0 auto 48px' },
  h2: {
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: 'clamp(2rem, 3.4vw, 2.75rem)', lineHeight: 1.1,
    letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '14px 0 14px'
  },
  lead: {
    fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55,
    color: 'var(--ink-700)', margin: 0
  },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 16 },
  swatch: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 },
  chipWrap: {
    width: '100%', aspectRatio: '1', borderRadius: 16, overflow: 'hidden',
    boxShadow: 'var(--shadow-sm)', border: '1px solid rgba(20,17,13,0.08)'
  },
  swatchName: {
    fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600,
    color: 'var(--ink-900)', textAlign: 'center'
  }
};

window.OtherGuys = OtherGuys;
window.Process = Process;
window.StainColors = StainColors;