// Before/after slider for website redesigns
const BeforeAfter = () => {
  const [pos, setPos] = useState(50);
  const dragging = useRef(false);
  const ref = useReveal();
  const boxRef = useRef(null);

  const onMove = (e) => {
    if (!dragging.current || !boxRef.current) return;
    const r = boxRef.current.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
    setPos(Math.max(0, Math.min(100, (x / r.width) * 100)));
  };

  useEffect(() => {
    const up = () => { dragging.current = false; };
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('touchmove', onMove);
    return () => {
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('touchmove', onMove);
    };
  }, []);

  return (
    <section className="section">
      <div className="container">
        <div ref={ref} className="reveal split" style={{ alignItems:'center' }}>
          <div>
            <span className="eyebrow">A real redesign we shipped</span>
            <h2 className="h-xl" style={{ marginTop: 20 }}>
              The kind of site <span className="serif-i" style={{color:'var(--accent)'}}>your neighbour</span> actually uses.
            </h2>
            <p style={{ color: 'var(--fg-2)', marginTop: 20, fontSize: 16, lineHeight: 1.55 }}>
              This is Marrickville Dental's old site on the left, the rebuild on the right. We didn't change their business — just made it easier to find them and book in.
            </p>
            <div className="grid-2" style={{ marginTop: 32, gap: 18 }}>
              {[['2.4×','phone calls from the website'],['~15 min','to book, was three clicks + a form'],['1.4 s','page load on 4G (was 6.8 s)'],['$3,400','one-off · no ongoing fees']].map(([v,l]) => (
                <div key={l} style={{ borderTop: '1px solid var(--line)', paddingTop: 14 }}>
                  <div style={{ fontSize: 'clamp(18px, 3vw, 22px)', fontWeight:500, letterSpacing:'-0.02em', fontFamily:'var(--serif)' }}>{v}</div>
                  <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.08em', textTransform:'uppercase', marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          <div
            ref={boxRef}
            onMouseDown={(e) => { dragging.current = true; onMove(e); }}
            onTouchStart={(e) => { dragging.current = true; onMove(e); }}
            className="hairline"
            style={{
              position:'relative', aspectRatio: '4 / 3', borderRadius: 18, overflow:'hidden',
              userSelect:'none', cursor:'ew-resize',
              background: 'var(--surface)'
            }}>
            {/* AFTER (under, fills full area) */}
            <AfterMock />
            {/* BEFORE (clipped to left side, revealed by slider) */}
            <div style={{ position:'absolute', inset: 0, clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
              <BeforeMock />
            </div>
            {/* handle */}
            <div style={{
              position:'absolute', top: 0, bottom: 0, left: pos + '%',
              width: 2, background: 'var(--fg)',
              transform: 'translateX(-1px)',
              pointerEvents: 'none',
            }}>
              <div style={{
                position:'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
                width: 52, height: 52, borderRadius: '50%',
                background: 'var(--fg)', color: 'var(--bg)',
                display:'flex', alignItems:'center', justifyContent:'center', gap: 2,
                boxShadow: '0 10px 30px -8px oklch(0 0 0 / .5), 0 0 0 4px var(--bg)',
                pointerEvents: 'auto',
              }}>
                <svg width="10" height="12" viewBox="0 0 10 12" fill="none" style={{ opacity: .95 }}>
                  <path d="M6 2 L2 6 L6 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <svg width="10" height="12" viewBox="0 0 10 12" fill="none" style={{ opacity: .95 }}>
                  <path d="M4 2 L8 6 L4 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            </div>
            <span className="mono" style={{ position:'absolute', top: 16, left: 16, fontSize: 10, padding: '5px 11px', background:'oklch(0 0 0 / .7)', color:'white', borderRadius: 4, letterSpacing:'.16em', fontWeight: 500 }}>BEFORE</span>
            <span className="mono" style={{ position:'absolute', top: 16, right: 16, fontSize: 10, padding: '5px 11px', background:'var(--accent)', color:'var(--bg)', borderRadius: 4, letterSpacing:'.16em', fontWeight: 500 }}>AFTER</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// Fake 'before' — generic Web 2.0, cluttered
const BeforeMock = () => (
  <div style={{ position:'absolute', inset: 0, background: '#f3f2ee', color:'#222', padding: 22, fontSize: 10, fontFamily:'Arial' }}>
    <div style={{ display:'flex', gap: 12, paddingBottom: 10, borderBottom: '1px solid #ccc', fontSize: 11 }}>
      <div style={{fontWeight:700, color:'#c0392b'}}>YOUR BUSINESS CO.</div>
      <div style={{marginLeft:'auto', display:'flex', gap: 12, color:'#555'}}>
        <span>Home</span><span>About Us</span><span>Services</span><span>Our Team</span><span>Blog</span><span>Contact</span>
      </div>
    </div>
    <div style={{ background: 'linear-gradient(180deg,#4a6fa5,#2c3e50)', color:'white', padding: 24, marginTop: 10, textAlign:'center' }}>
      <div style={{ fontSize: 22, fontWeight: 700, fontFamily:'Georgia, serif' }}>Welcome To Our Website!</div>
      <div style={{ fontSize: 11, marginTop: 6, opacity:.9 }}>We are a leading provider of quality solutions for all your business needs.</div>
      <div style={{ marginTop: 14, display:'inline-block', padding: '6px 16px', background:'#e67e22', color:'white', borderRadius: 4, fontSize: 10, fontWeight: 700 }}>CLICK HERE</div>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 10, marginTop: 14 }}>
      {['Quality Service','Best Prices','24/7 Support'].map(t => (
        <div key={t} style={{ background:'white', border:'1px solid #ddd', padding: 10 }}>
          <div style={{ width: 24, height: 24, background:'#c0392b', borderRadius: '50%', marginBottom: 6 }}/>
          <div style={{ fontWeight:700, fontSize:10 }}>{t}</div>
          <div style={{ fontSize: 9, color:'#666', marginTop: 4, lineHeight:1.4 }}>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.</div>
        </div>
      ))}
    </div>
    <div style={{ background:'#ffe79a', border:'1px dashed #c9941f', padding: 10, marginTop: 12, fontSize: 10, color:'#6b4e00' }}>
      ⚠ Special Offer! Call us today: 1800 555 0142
    </div>
  </div>
);

// Fake 'after' — our polished style
const AfterMock = () => (
  <div style={{ position:'absolute', inset: 0, background:'#faf8f4', color:'#1a1a1a', fontFamily:'var(--sans)', display:'flex', flexDirection:'column' }}>
    {/* nav bar */}
    <div style={{
      display:'flex', alignItems:'center', padding: '14px 22px',
      borderBottom:'1px solid oklch(0 0 0 / .06)', background:'#faf8f4',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <div style={{
          width: 22, height: 22, borderRadius: '50%',
          background:'#0f2b24', color:'#faf8f4', display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily:'var(--serif)', fontSize: 13, fontStyle:'italic', fontWeight: 500,
        }}>m</div>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing:'-0.01em' }}>Marrickville Dental</div>
      </div>
      <div style={{ marginLeft:'auto', display:'flex', gap: 18, fontSize: 10, color:'#555' }}>
        <span>Services</span><span>About</span><span>Team</span><span>Pricing</span>
      </div>
      <div style={{
        marginLeft: 18, padding: '6px 14px', fontSize: 10, fontWeight: 500,
        background:'#0f2b24', color:'#faf8f4', borderRadius: 999,
      }}>Book online</div>
    </div>

    {/* hero — split */}
    <div style={{ display:'grid', gridTemplateColumns: '1.2fr 1fr', flex: 1, minHeight: 0 }}>
      {/* left: copy */}
      <div style={{ padding: '28px 24px', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div style={{ display:'flex', alignItems:'center', gap:6, fontSize: 9, color:'#6b6558', letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500 }}>
          <span style={{width:4,height:4,borderRadius:'50%',background:'#d97757'}}/>
          Marrickville · since 2004
        </div>
        <div style={{
          fontFamily:'var(--serif)', fontSize: 34, lineHeight: 1.05,
          letterSpacing:'-0.025em', marginTop: 12, color:'#0f2b24',
        }}>
          Family dentistry,<br/>
          <span style={{ fontStyle:'italic', color:'#d97757' }}>on your street.</span>
        </div>
        <div style={{ fontSize: 11, color:'#3d3d3d', marginTop: 14, lineHeight: 1.55, maxWidth: '95%' }}>
          Two dentists, one hygienist, HICAPS on the spot. Bulk billing for kids under 18.
        </div>
        <div style={{ display:'flex', gap: 8, marginTop: 18 }}>
          <div style={{
            padding: '8px 14px', fontSize: 10, fontWeight: 500,
            background:'#0f2b24', color:'#faf8f4', borderRadius: 999,
          }}>Book an appointment →</div>
          <div style={{
            padding: '8px 14px', fontSize: 10, fontWeight: 500,
            border:'1px solid oklch(0 0 0 / .14)', color:'#0f2b24', borderRadius: 999,
          }}>(02) 9564 ••••</div>
        </div>

        {/* trust row */}
        <div style={{
          marginTop: 22, paddingTop: 16, borderTop:'1px solid oklch(0 0 0 / .08)',
          display:'flex', gap: 22,
        }}>
          {[['4.9★','220 reviews'],['2,400+','patients'],['22 yrs','in Marrickville']].map(([v,l]) => (
            <div key={l}>
              <div style={{ fontSize: 14, fontFamily:'var(--serif)', fontWeight:500, color:'#0f2b24', letterSpacing:'-0.01em' }}>{v}</div>
              <div style={{ fontSize: 8, color:'#6b6558', marginTop: 2, letterSpacing:'.04em' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* right: image panel */}
      <div style={{
        position:'relative', margin: '14px 18px 14px 0',
        borderRadius: 12, overflow:'hidden',
        background: 'linear-gradient(160deg, #e8dcc3 0%, #c8b593 45%, #8b9a7f 100%)',
      }}>
        {/* sun */}
        <div style={{
          position:'absolute', top: '14%', right: '18%',
          width: 46, height: 46, borderRadius:'50%',
          background:'radial-gradient(circle, #f5e8c8, #e8cc92)',
          opacity: 0.75, filter:'blur(1px)',
        }}/>
        {/* horizon soft */}
        <div style={{
          position:'absolute', left: 0, right: 0, bottom: '38%', height: 1,
          background:'oklch(0 0 0 / .08)',
        }}/>

        {/* illustrated dental-office scene (SVG) */}
        <svg viewBox="0 0 220 160" preserveAspectRatio="xMidYMax meet" style={{
          position:'absolute', inset: 0, width:'100%', height:'100%',
        }}>
          {/* floor */}
          <rect x="0" y="118" width="220" height="42" fill="#f4ede0" opacity="0.55"/>
          {/* wall accent arch */}
          <path d="M30 118 Q30 70 68 70 Q106 70 106 118" fill="#faf2e2" opacity="0.6"/>
          {/* dentist chair */}
          <g transform="translate(56 58)">
            {/* base */}
            <rect x="22" y="56" width="20" height="6" rx="2" fill="#0f2b24"/>
            <rect x="28" y="40" width="8" height="18" fill="#3d4a44"/>
            {/* seat cushion */}
            <rect x="6" y="30" width="56" height="14" rx="4" fill="#0f2b24"/>
            <rect x="8" y="32" width="52" height="3" fill="#1d4033" opacity="0.5"/>
            {/* backrest (tilted) */}
            <rect x="0" y="6" width="34" height="28" rx="5" fill="#0f2b24" transform="rotate(-15 17 20)"/>
            {/* headrest */}
            <circle cx="-2" cy="6" r="6" fill="#0f2b24"/>
            {/* armrest */}
            <rect x="18" y="28" width="22" height="4" rx="2" fill="#1d4033"/>
            {/* lamp arm */}
            <path d="M50 4 L64 18 L62 28" stroke="#3d4a44" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
            <circle cx="62" cy="30" r="5" fill="#faf2e2" stroke="#3d4a44" strokeWidth="1.2"/>
            <circle cx="62" cy="30" r="2" fill="#f5e8c8"/>
          </g>
          {/* plant */}
          <g transform="translate(168 80)">
            <rect x="0" y="28" width="18" height="14" rx="1" fill="#d97757"/>
            <path d="M9 28 Q2 18 5 6 Q9 14 9 28" fill="#4a6b4a"/>
            <path d="M9 28 Q16 16 14 4 Q10 14 9 28" fill="#5a7a58"/>
            <path d="M9 28 Q9 18 9 10" stroke="#4a6b4a" strokeWidth="1"/>
          </g>
          {/* small tool tray */}
          <g transform="translate(130 102)">
            <rect x="0" y="6" width="24" height="3" rx="1" fill="#0f2b24" opacity="0.5"/>
            <circle cx="4" cy="4" r="1.5" fill="#0f2b24"/>
            <circle cx="10" cy="4" r="1.5" fill="#0f2b24"/>
            <circle cx="16" cy="4" r="1.5" fill="#0f2b24"/>
          </g>
        </svg>

        {/* overlay card */}
        <div style={{
          position:'absolute', bottom: 14, left: 14, right: 14,
          padding: '10px 14px', background:'oklch(1 0 0 / .92)', backdropFilter:'blur(8px)',
          borderRadius: 8,
          display:'flex', alignItems:'center', gap: 10,
          boxShadow:'0 4px 16px oklch(0 0 0 / .08)',
        }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background:'#7aaf5f', boxShadow:'0 0 6px #7aaf5f' }}/>
          <div style={{ fontSize: 10, color:'#0f2b24', fontWeight: 500 }}>Next available · Thu 10:30am</div>
        </div>
      </div>
    </div>

    {/* service strip */}
    <div style={{
      display:'grid', gridTemplateColumns:'repeat(4, 1fr)',
      borderTop:'1px solid oklch(0 0 0 / .06)',
      background:'#fff',
    }}>
      {[['01','Check-ups','$195'],['02','Whitening','from $450'],['03','Implants','from $3,900'],['04','Emergencies','same day']].map(([n,t,p]) => (
        <div key={t} style={{
          padding: '14px 16px',
          borderRight: n === '04' ? 'none' : '1px solid oklch(0 0 0 / .06)',
        }}>
          <div style={{ fontFamily:'var(--mono)', fontSize: 9, color:'#d97757', letterSpacing:'.12em' }}>{n}</div>
          <div style={{ fontSize: 11, fontWeight:500, marginTop: 4, color:'#0f2b24' }}>{t}</div>
          <div style={{ fontSize: 9, color:'#6b6558', marginTop: 2 }}>{p}</div>
        </div>
      ))}
    </div>
  </div>
);

window.BeforeAfter = BeforeAfter;