// The Fone Shop — marketing Part 2: interactive & wow-factor sections
// Relies on globals from components.jsx (BtnPrimary, BtnSecondary, Eyebrow)
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// ==========================================================
// LIVE STATUS TICKER (hero corner) — "the shop is alive"
// ==========================================================
const ShopTicker = () => {
  const items = [
    { t: 'iPhone 14 screen', s: 'in progress', since: '47 min', c: '#ff9f0a' },
    { t: 'PS5 HDMI port', s: 'ready for collection', since: '12 min', c: '#30d158' },
    { t: 'iPad Air battery', s: 'diagnosing', since: '8 min', c: '#2997ff' },
  ];
  const [i, setI] = useState2(0);
  useEffect2(() => {
    const id = setInterval(() => setI(v => (v + 1) % items.length), 3200);
    return () => clearInterval(id);
  }, []);
  const it = items[i];
  return (
    <div style={{
      position: 'absolute', right: 32, bottom: 32, zIndex: 3,
      padding: '14px 18px', background: 'var(--surface)',
      border: '1px solid var(--border)', borderRadius: 14,
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      minWidth: 280, maxWidth: 320,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 10, letterSpacing: '0.22em', color: 'var(--muted)', fontWeight: 600 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#30d158', boxShadow: '0 0 10px #30d158', animation: 'pulse 2s ease-in-out infinite' }} />
        LIVE FROM THE WORKBENCH
      </div>
      <div key={i} style={{ marginTop: 10, animation: 'fadeSlide 520ms cubic-bezier(0.25,0.1,0.25,1)' }}>
        <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.011em' }}>{it.t}</div>
        <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--muted)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: it.c }} />
          <span style={{ color: 'var(--fg)' }}>{it.s}</span>
          <span>· {it.since} ago</span>
        </div>
      </div>
    </div>
  );
};

// ==========================================================
// LIVE PRICE CALCULATOR
// ==========================================================
const PRICES = {
  iPhone: [
    { m: 'iPhone 15 Pro Max', screen: 249, bat: 65, glass: 95 },
    { m: 'iPhone 15 Pro',     screen: 229, bat: 65, glass: 89 },
    { m: 'iPhone 14',         screen: 129, bat: 55, glass: 75 },
    { m: 'iPhone 13',         screen: 89,  bat: 55, glass: 65 },
    { m: 'iPhone 12',         screen: 79,  bat: 49, glass: 55 },
    { m: 'iPhone SE (2020)',  screen: 65,  bat: 39, glass: 49 },
  ],
  Samsung: [
    { m: 'Galaxy S24 Ultra',  screen: 259, bat: 79, glass: 99 },
    { m: 'Galaxy S23',        screen: 189, bat: 69, glass: 79 },
    { m: 'Galaxy S22',        screen: 120, bat: 59, glass: 69 },
    { m: 'Galaxy A54',        screen: 95,  bat: 49, glass: 55 },
  ],
  iPad: [
    { m: 'iPad Pro 12.9"',    screen: 249, bat: 129, glass: null },
    { m: 'iPad Air 5',        screen: 189, bat: 110, glass: null },
    { m: 'iPad Air 4',        screen: 135, bat: 110, glass: null },
    { m: 'iPad 10th gen',     screen: 115, bat: 89,  glass: null },
  ],
};

const FIXES = [
  { k: 'screen', label: 'Cracked screen', icon: (c) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2.5"/><path d="M8 6l8 8M12 6l4 4"/></svg> },
  { k: 'bat',    label: 'Battery swap',    icon: (c) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 11v2"/><path d="M6 11v2M10 10v4M14 10v4"/></svg> },
  { k: 'glass',  label: 'Back glass',      icon: (c) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2.5"/><path d="M5 12h14"/></svg> },
];

const PriceCalculator = () => {
  const [brand, setBrand] = useState2('iPhone');
  const [modelIdx, setModelIdx] = useState2(3); // iPhone 13
  const [fix, setFix] = useState2('screen');
  const models = PRICES[brand];
  const model = models[Math.min(modelIdx, models.length - 1)];
  const price = model[fix];
  const [display, setDisplay] = useState2(price ?? 0);
  useEffect2(() => {
    if (price == null) return;
    const from = display;
    const to = price;
    let t = 0;
    const id = setInterval(() => {
      t += 0.08;
      const v = from + (to - from) * (1 - Math.pow(1 - Math.min(1, t), 3));
      setDisplay(Math.round(v));
      if (t >= 1) clearInterval(id);
    }, 16);
    return () => clearInterval(id);
  }, [price]);

  return (
    <section id="pricing" style={{ padding: '140px 32px', background: 'transparent', borderTop: 'var(--border-soft) 1px solid' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>LIVE PRICING</Eyebrow>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.05, maxWidth: 900 }}>
          A real price, in three taps.
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', letterSpacing: '-0.022em', maxWidth: 620, lineHeight: 1.5 }}>
          No sign-up, no phone number. Pick what broke, see what it costs. Confirmed after a free in-store diagnostic.
        </p>

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
          {/* Controls */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div>
              <Eyebrow>01 · BRAND</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {Object.keys(PRICES).map(b => (
                  <button key={b} onClick={() => { setBrand(b); setModelIdx(0); if (b === 'iPad' && fix === 'glass') setFix('screen'); }} style={{
                    padding: '10px 20px',
                    background: brand === b ? 'var(--accent)' : 'transparent',
                    color: brand === b ? 'var(--accent-text)' : 'var(--fg)',
                    border: 0, borderRadius: 980,
                    boxShadow: brand === b ? 'none' : 'inset 0 0 0 1px var(--border)',
                    font: '500 15px Inter', letterSpacing: '-0.011em', cursor: 'pointer',
                    transition: 'all 200ms',
                  }}>{b}</button>
                ))}
              </div>
            </div>

            <div>
              <Eyebrow>02 · MODEL</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {models.map((m, i) => (
                  <button key={m.m} onClick={() => setModelIdx(i)} style={{
                    padding: '14px 18px', textAlign: 'left',
                    background: modelIdx === i ? 'rgba(255,107,26,0.08)' : 'transparent',
                    border: 0, borderRadius: 10,
                    boxShadow: modelIdx === i ? 'inset 0 0 0 1px var(--accent)' : 'inset 0 0 0 1px var(--border-soft)',
                    color: modelIdx === i ? 'var(--fg)' : 'var(--fg-2)',
                    font: '500 15px Inter', letterSpacing: '-0.011em', cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    transition: 'all 200ms',
                  }}>
                    <span>{m.m}</span>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: modelIdx === i ? 'var(--accent)' : 'var(--muted)' }}>
                      from £{Math.min(...[m.screen, m.bat, m.glass].filter(x => x != null))}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            <div>
              <Eyebrow>03 · WHAT'S BROKEN</Eyebrow>
              <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {FIXES.map(f => {
                  const available = model[f.k] != null;
                  const active = fix === f.k && available;
                  return (
                    <button key={f.k} onClick={() => available && setFix(f.k)} disabled={!available} style={{
                      padding: '16px 12px',
                      background: active ? 'var(--accent)' : 'transparent',
                      color: active ? 'var(--accent-text)' : available ? 'var(--fg)' : 'var(--muted)',
                      border: 0, borderRadius: 12,
                      boxShadow: active ? 'none' : `inset 0 0 0 1px ${available ? 'var(--border)' : 'var(--border-soft)'}`,
                      cursor: available ? 'pointer' : 'not-allowed',
                      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                      transition: 'all 200ms',
                    }}>
                      {f.icon(active ? '#000' : available ? '#FF6B1A' : '#3a3a3c')}
                      <span style={{ fontSize: 13, fontWeight: 500 }}>{f.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Result card */}
          <div style={{
            position: 'sticky', top: 100,
            padding: 40, borderRadius: 22,
            background: 'linear-gradient(160deg, #1a0d05 0%, #0a0a0a 55%)',
            border: '1px solid rgba(255,107,26,0.25)',
            boxShadow: '0 30px 80px rgba(255,107,26,0.12), inset 0 1px 0 rgba(255,255,255,0.05)',
          }}>
            <Eyebrow style={{ color: '#FF6B1A' }}>YOUR QUOTE</Eyebrow>
            <div style={{ marginTop: 14, fontSize: 14, color: 'var(--muted)' }}>
              {model.m} · {FIXES.find(f => f.k === fix)?.label}
            </div>
            <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{ fontSize: 22, color: 'var(--muted)' }}>from</span>
              <span style={{
                fontSize: 96, fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 0.9,
                fontVariantNumeric: 'tabular-nums',
                background: 'linear-gradient(180deg, #fff 0%, #ffb08a 140%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>£{display}</span>
            </div>
            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 12 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--muted)', fontWeight: 600 }}>TURNAROUND</div>
                <div style={{ marginTop: 6, fontSize: 17, fontWeight: 500, letterSpacing: '-0.011em' }}>Same day</div>
              </div>
              <div style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 12 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--muted)', fontWeight: 600 }}>WARRANTY</div>
                <div style={{ marginTop: 6, fontSize: 17, fontWeight: 500, letterSpacing: '-0.011em' }}>12 months</div>
              </div>
            </div>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <BtnPrimary size="lg" onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}>Book this repair</BtnPrimary>
              <BtnSecondary size="lg" onClick={() => window.location.href = 'tel:01782343842'}>Call the shop</BtnSecondary>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ==========================================================
// BEFORE/AFTER SCRUBBER
// ==========================================================
const BeforeAfter = () => {
  const [x, setX] = useState2(50);
  const ref = useRef2(null);
  const drag = (e) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const cx = (e.touches?.[0]?.clientX ?? e.clientX) - r.left;
    setX(Math.max(4, Math.min(96, (cx / r.width) * 100)));
  };
  return (
    <section style={{ padding: '140px 32px', background: 'transparent', borderTop: 'var(--border-soft) 1px solid' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow>BEFORE / AFTER</Eyebrow>
          <h2 style={{ marginTop: 16, fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.05 }}>
            Drag to see<br/>what 47 minutes does.
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--muted)', letterSpacing: '-0.022em', lineHeight: 1.5 }}>
            Real iPhone 14 screen replacement we did last Tuesday. Glass, digitiser, adhesive, waterproof seal. Back to factory.
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
            {[['47 min', 'workbench to done'], ['£129', 'fixed, not refurb'], ['12 mo', 'warranty']].map(([k, v]) => (
              <div key={k} style={{ whiteSpace: 'nowrap' }}>
                <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>{k}</div>
                <div style={{ marginTop: 2, fontSize: 12, color: 'var(--muted)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div
          ref={ref}
          onMouseMove={(e) => e.buttons === 1 && drag(e)}
          onTouchMove={drag}
          onClick={drag}
          style={{
            position: 'relative', aspectRatio: '1 / 1',
            borderRadius: 24, overflow: 'hidden', cursor: 'ew-resize',
            background: 'var(--bg-2)', boxShadow: '0 30px 80px var(--border)',
            userSelect: 'none',
          }}>
          {/* After (bottom layer — fixed) */}
          <svg viewBox="0 0 400 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <defs>
              <linearGradient id="fixed-glass" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#1a1a1a"/><stop offset="100%" stopColor="#050505"/>
              </linearGradient>
            </defs>
            <rect width="400" height="400" fill="#0a0a0a"/>
            <rect x="80" y="30" width="240" height="340" rx="34" fill="#1d1d1f"/>
            <rect x="92" y="42" width="216" height="316" rx="26" fill="url(#fixed-glass)"/>
            <rect x="160" y="50" width="80" height="20" rx="10" fill="#000"/>
            {/* clean reflection */}
            <rect x="100" y="60" width="40" height="280" rx="18" fill="rgba(255,255,255,0.04)"/>
          </svg>
          {/* Before (cracked — revealed left of slider via clip-path) */}
          <svg viewBox="0 0 400 400" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            clipPath: `inset(0 ${100 - x}% 0 0)`,
            WebkitClipPath: `inset(0 ${100 - x}% 0 0)`,
          }}>
            <rect width="400" height="400" fill="#0a0a0a"/>
            <rect x="80" y="30" width="240" height="340" rx="34" fill="#1d1d1f"/>
            <rect x="92" y="42" width="216" height="316" rx="26" fill="#0a0808"/>
            <rect x="160" y="50" width="80" height="20" rx="10" fill="#000"/>
            {/* cracks */}
            <g stroke="#FF6B1A" strokeWidth="0.8" fill="none" opacity="0.9">
              <path d="M 130 80 L 200 180 L 280 140 L 250 240 L 300 330" />
              <path d="M 200 180 L 110 240 L 140 320" />
              <path d="M 200 180 L 240 60" />
              <path d="M 280 140 L 300 80" />
              <path d="M 250 240 L 180 300" />
            </g>
            <g stroke="rgba(255,255,255,0.2)" strokeWidth="0.4" fill="none">
              <path d="M 130 80 L 90 120 M 280 140 L 310 180 M 180 300 L 140 340" />
            </g>
            <circle cx="130" cy="80" r="3" fill="#FF6B1A"/>
            <path d="M 130 80 L 134 72 M 130 80 L 126 76 M 130 80 L 136 84" stroke="#FF6B1A" strokeWidth="0.6"/>
          </svg>
          {/* Scrubber handle */}
          <div style={{
            position: 'absolute', top: 0, bottom: 0, left: `${x}%`,
            width: 2, background: '#FF6B1A', boxShadow: '0 0 20px rgba(255,107,26,0.6)',
            transform: 'translateX(-1px)',
          }}>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              width: 48, height: 48, borderRadius: '50%',
              background: '#FF6B1A', color: '#000',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 8px 24px rgba(255,107,26,0.4)',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/><path d="m9 18 6-6-6-6"/></svg>
            </div>
          </div>
          {/* Labels */}
          <div style={{
            position: 'absolute', left: 20, top: 20, padding: '6px 10px',
            background: 'var(--surface)', borderRadius: 6, border: '1px solid var(--border)',
            fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', fontWeight: 600,
          }}>BEFORE</div>
          <div style={{
            position: 'absolute', right: 20, top: 20, padding: '6px 10px',
            background: 'var(--surface)', borderRadius: 6, border: '1px solid var(--border)',
            fontSize: 11, letterSpacing: '0.2em', color: '#30d158', fontWeight: 600,
          }}>AFTER</div>
        </div>
      </div>
    </section>
  );
};

// ==========================================================
// LIVE SHOP STATUS (footer-adjacent)
// ==========================================================
const LiveShopStatus = () => {
  // fake "it's 14:23 Saturday, shop closes 17:00" maths
  const closesIn = '2h 14m';
  return (
    <section style={{ padding: '120px 32px', background: 'var(--bg-2)', borderTop: 'var(--border-soft) 1px solid' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow>THE SHOP, RIGHT NOW</Eyebrow>
          <h2 style={{ marginTop: 16, fontSize: 'clamp(40px, 5vw, 56px)', fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.05 }}>
            Open for<br/>another <span style={{ color: '#FF6B1A', fontVariantNumeric: 'tabular-nums' }}>{closesIn}</span>.
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--muted)', letterSpacing: '-0.022em', lineHeight: 1.5, maxWidth: 480 }}>
            Walk in any time. No appointment. If you're coming from beyond Longton, ring ahead and I'll have the parts lined up.
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <BtnPrimary size="lg" icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z"/></svg>} onClick={() => window.location.href = 'tel:01782343842'}>01782 343 842</BtnPrimary>
            <BtnSecondary size="lg" onClick={() => window.open('https://maps.google.com/?q=ST3+2NR', '_blank')}>Directions</BtnSecondary>
          </div>
        </div>

        {/* Stylised map card */}
        <div style={{
          position: 'relative', aspectRatio: '4 / 3', borderRadius: 20, overflow: 'hidden',
          background: 'var(--surface)', border: '1px solid var(--border-soft)',
        }}>
          <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            {/* grid streets */}
            <defs>
              <pattern id="streets" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M0 20h40M20 0v40" stroke="#1a1a1a" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="400" height="300" fill="url(#streets)"/>
            {/* The Strand — highlighted */}
            <path d="M 50 150 Q 180 120 370 160" stroke="#FF6B1A" strokeWidth="2.5" fill="none" opacity="0.9" strokeLinecap="round"/>
            <path d="M 50 150 Q 180 120 370 160" stroke="#FF6B1A" strokeWidth="6" fill="none" opacity="0.15" strokeLinecap="round"/>
            {/* nearby roads */}
            <path d="M 120 50 L 140 240 M 240 50 L 230 240 M 320 50 L 310 240" stroke="#2c2c2e" strokeWidth="1" fill="none"/>
            {/* blocks */}
            <rect x="60" y="60" width="50" height="60" fill="#111" stroke="#1a1a1a"/>
            <rect x="145" y="60" width="85" height="60" fill="#111" stroke="#1a1a1a"/>
            <rect x="60" y="170" width="70" height="60" fill="#111" stroke="#1a1a1a"/>
            <rect x="250" y="170" width="55" height="60" fill="#111" stroke="#1a1a1a"/>
            <rect x="315" y="170" width="65" height="60" fill="#111" stroke="#1a1a1a"/>
            {/* pin */}
            <g transform="translate(180, 138)">
              <circle r="28" fill="rgba(255,107,26,0.15)"/>
              <circle r="18" fill="rgba(255,107,26,0.3)"/>
              <circle r="10" fill="#FF6B1A"/>
              <circle r="4" fill="#000"/>
            </g>
          </svg>
          <div style={{
            position: 'absolute', bottom: 16, left: 16, right: 16,
            padding: '12px 14px',
            background: 'var(--surface)', border: '1px solid var(--border)',
            borderRadius: 12, backdropFilter: 'blur(12px)',
          }}>
            <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '-0.011em' }}>27 The Strand, Longton</div>
            <div style={{ marginTop: 2, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--muted)' }}>ST3 2NR · 53.0008° N, 2.1362° W</div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ShopTicker, PriceCalculator, BeforeAfter, LiveShopStatus });