// Winkz Designs 2026, flagship "watch a site rebuild itself" scroll demo.
// A single site upgrades element-by-element (header → promise → photo → button →
// reviews), then gets wired for AI search and recommended by the assistant.
// Phase tabs on top; a plain-English breakdown checklist underneath.
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon, Eyebrow = window.Eyebrow, Grad = window.Grad;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';
  const COPPER = 'linear-gradient(120deg,#FFC98A,#E8A163,#C87941,#8E4A24)';
  const COPPER_TEXT = { background: 'linear-gradient(115deg,#FFC98A,#E8A163,#C87941)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' };

  /* ── Copperline Electric isometric infographic (replaces the "team photo" slot) ── */
  const ISO_P = (x, y, z) => [(x - y) * 0.866, (x + y) * 0.5 - z];
  const ISO_poly = (arr) => arr.map(([x, y, z]) => ISO_P(x, y, z).join(',')).join(' ');
  function IsoBox({ o, s, top, left, right, stroke }) {
    const [ox, oy, oz] = o, [w, d, h] = s;
    const T = ISO_poly([[ox, oy, oz + h], [ox + w, oy, oz + h], [ox + w, oy + d, oz + h], [ox, oy + d, oz + h]]);
    const L = ISO_poly([[ox, oy + d, oz], [ox, oy + d, oz + h], [ox + w, oy + d, oz + h], [ox + w, oy + d, oz]]);
    const R = ISO_poly([[ox + w, oy, oz], [ox + w, oy, oz + h], [ox + w, oy + d, oz + h], [ox + w, oy + d, oz]]);
    return <g strokeLinejoin="round">
      <polygon points={L} fill={left} stroke={stroke} strokeWidth="0.06" />
      <polygon points={R} fill={right} stroke={stroke} strokeWidth="0.06" />
      <polygon points={T} fill={top} stroke={stroke} strokeWidth="0.06" />
    </g>;
  }
  function GoogleBadge({ show = true, dark = false }) {
    const star = (i) => (
      <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill="#FBBC04" aria-hidden="true" style={{ display: 'block' }}>
        <path d="M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.13 6.57L12 17.46l-5.91 3.1 1.13-6.57L2.45 9.34l6.6-.96L12 2.4z" />
      </svg>
    );
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
        padding: '6px 11px', borderRadius: 999,
        border: dark ? '1px solid rgba(255,255,255,0.14)' : '1px solid #e2e6ee',
        background: dark ? 'rgba(255,255,255,0.05)' : '#fff',
        boxShadow: dark ? 'none' : '0 8px 18px -14px rgba(10,37,64,0.5)',
        opacity: show ? 1 : 0, transition: 'opacity .5s',
      }}>
        <svg width="13" height="13" viewBox="0 0 48 48" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}>
          <path fill="#4285F4" d="M45.1 24.5c0-1.6-.14-3.16-.42-4.66H24v8.82h11.83c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.1c4.16-3.83 6.56-9.47 6.56-16.32z" />
          <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.32l-7.1-5.52c-1.97 1.32-4.49 2.1-7.46 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
          <path fill="#FBBC04" d="M11.69 28.19A13.2 13.2 0 0 1 11 24c0-1.46.25-2.87.69-4.19v-5.7H4.34A22 22 0 0 0 2 24c0 3.55.85 6.91 2.34 9.89l7.35-5.7z" />
          <path fill="#EA4335" d="M24 10.74c3.23 0 6.13 1.11 8.41 3.29l6.3-6.3C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.11l7.35 5.7C13.42 14.61 18.27 10.74 24 10.74z" />
        </svg>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, color: dark ? '#fff' : '#0a2540' }}>4.9</span>
        <span style={{ display: 'flex', gap: 1 }}>{[0, 1, 2, 3, 4].map(star)}</span>
        <span style={{ fontSize: 11, color: dark ? 'rgba(255,255,255,0.55)' : '#6b7688' }}>600+ reviews</span>
      </span>
    );
  }

  function CopperlineLogo({ scale = 1, dark = false }) {
    return (
      <span style={{ display: 'flex', alignItems: 'center', gap: 9 * scale }}>
        <svg width={26 * scale} height={29 * scale} viewBox="0 0 26 29" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}>
          <defs>
            <linearGradient id="cl-cu" x1="0" y1="0" x2="26" y2="29" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#E8A163" /><stop offset="0.55" stopColor="#C87941" /><stop offset="1" stopColor="#9C5A2E" />
            </linearGradient>
          </defs>
          <path d="M13 0.9 L25.1 7.9 V21.9 L13 28.9 L0.9 21.9 V7.9 Z" fill="url(#cl-cu)" />
          <path d="M13 3.1 L23.2 9 V20.8 L13 26.7 L2.8 20.8 V9 Z" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="0.9" />
          <path d="M14.8 7.6 L8.6 15.6 h3.4 L10.9 21.6 L17.3 13.4 h-3.6 Z" fill="#fff" />
        </svg>
        <span style={{ display: 'flex', flexDirection: 'column', gap: 2 * scale, lineHeight: 1 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 * scale, letterSpacing: '-0.02em', color: dark ? '#fff' : '#0a2540', whiteSpace: 'nowrap' }}>Copperline</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 7.5 * scale, letterSpacing: '0.3em', color: '#C87941', whiteSpace: 'nowrap' }}>ELECTRIC</span>
        </span>
      </span>
    );
  }

  function CopperlineIso() {
    const base = 150;
    // downtown Denver skyline: [x, width, roofTop]
    const BLD = [
      [20, 26, 106], [48, 20, 92], [70, 30, 70], [104, 24, 54],
      [130, 26, 84], [158, 20, 100], [180, 32, 66], [214, 22, 90],
      [238, 26, 78], [266, 20, 102], [288, 30, 88],
    ];
    const tones = ['#16273f', '#1a2c47', '#132340', '#1c2f4e'];
    const wins = [];
    BLD.forEach(([bx, bw, btop], bi) => {
      for (let wy = btop + 8; wy < base - 6; wy += 8) {
        for (let wx = bx + 4; wx < bx + bw - 4; wx += 7) {
          const lit = ((bi * 3 + wx + wy) % 5) !== 0;
          wins.push([wx, wy, lit, ((wx * 2 + wy) % 13 === 0)]);
        }
      }
    });
    const mtnBack = '0,116 44,64 88,98 130,52 178,92 222,56 266,98 310,60 340,104 340,150 0,150';
    const mtnFront = '0,138 38,104 78,128 120,96 168,126 210,100 258,130 300,102 340,132 340,150 0,150';
    const ridge = '0,116 44,64 88,98 130,52 178,92 222,56 266,98 310,60 340,104';
    return (
      <svg viewBox="0 0 340 172" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
        <defs>
          <linearGradient id="cl-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#0b1a30" /><stop offset="1" stopColor="#0a1220" /></linearGradient>
          <linearGradient id="cl-bolt" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#F23BFE" /><stop offset="0.5" stopColor="#79BAFF" /><stop offset="1" stopColor="#2DE3EA" /></linearGradient>
          <radialGradient id="cl-glow" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stopColor="rgba(121,186,255,0.55)" /><stop offset="1" stopColor="rgba(121,186,255,0)" /></radialGradient>
          <filter id="cl-soft" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1.1" /></filter>
          <linearGradient id="cl-stream" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stopColor="#F23BFE" /><stop offset="0.5" stopColor="#79BAFF" /><stop offset="1" stopColor="#2DE3EA" /></linearGradient>
          <filter id="cl-streamblur" x="-40%" y="-120%" width="180%" height="340%"><feGaussianBlur stdDeviation="3.2" /></filter>
        </defs>
        <rect x="0" y="0" width="340" height="172" fill="url(#cl-sky)" />
        {/* aurora / energy streams */}
        <g filter="url(#cl-streamblur)" fill="none" stroke="url(#cl-stream)" strokeLinecap="round" opacity="0.6">
          <path d="M-10 42 C 70 16, 150 58, 220 32 S 320 18, 350 44" strokeWidth="3" />
          <path d="M-10 60 C 80 38, 150 76, 240 46 S 320 42, 350 58" strokeWidth="1.7" opacity="0.85" />
        </g>
        {/* stars */}
        {[[30, 24], [70, 16], [120, 30], [210, 20], [262, 14], [300, 32], [182, 12]].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={i % 2 ? 1.1 : 0.8} fill={i % 2 ? '#F23BFE' : '#2DE3EA'} opacity="0.7" />)}
        {/* Rockies */}
        <polygon points={mtnBack} fill="#122443" />
        <polyline points={ridge} fill="none" stroke="url(#cl-stream)" strokeWidth="2.6" opacity="0.26" filter="url(#cl-streamblur)" strokeLinejoin="round" />
        <polyline points={ridge} fill="none" stroke="url(#cl-stream)" strokeWidth="1.3" opacity="0.55" strokeLinejoin="round" />
        <polygon points={mtnFront} fill="#0d1c33" />
        {/* downtown buildings */}
        {BLD.map((b, i) => <rect key={i} x={b[0]} y={b[2]} width={b[1]} height={base - b[2]} fill={tones[i % tones.length]} stroke="#0a1526" strokeWidth="0.6" />)}
        {/* rooftop rim light on the signature tower */}
        <line x1="104" y1="54" x2="128" y2="54" stroke="url(#cl-stream)" strokeWidth="1.4" opacity="0.75" />
        {/* lit windows */}
        {wins.map((w, i) => <rect key={i} x={w[0]} y={w[1]} width="3" height="3.6" rx="0.4" fill={w[2] ? (w[3] ? '#F23BFE' : '#2DE3EA') : '#0c1a30'} opacity={w[2] ? (w[3] ? 0.9 : 0.72) : 0.5} />)}
        {/* street base + brand dashes */}
        <rect x="0" y={base} width="340" height="22" fill="#080f1c" />
        {[20, 60, 100, 140, 180, 220, 260, 300].map((x, i) => <rect key={i} x={x} y={base + 9} width="14" height="2" rx="1" fill="url(#cl-stream)" opacity="0.5" />)}
        {/* glowing bolt powering the city */}
        {(() => {
          const cx = 116, cy = 30; const b = (dx, dy) => `${cx + dx},${cy + dy}`;
          const bolt = [b(3, -15), b(-6, 2), b(-1, 2), b(-5, 15), b(8, -3), b(1, -3), b(6, -15)].join(' ');
          return <g>
            <ellipse cx={cx} cy={cy + 1} rx="24" ry="24" fill="url(#cl-glow)" />
            <polygon points={bolt} fill="url(#cl-bolt)" stroke="#f0f7ff" strokeWidth="0.8" strokeLinejoin="round" filter="url(#cl-soft)" />
            <polygon points={bolt} fill="url(#cl-bolt)" stroke="#f0f7ff" strokeWidth="0.6" strokeLinejoin="round" />
          </g>;
        })()}
      </svg>
    );
  }

  // element-upgrade thresholds (redesign phase)
  const T = { header: 0.10, promise: 0.19, photo: 0.28, button: 0.37, trust: 0.46 };

  const BREAKDOWN = [
    ['PanelTop', 'A clean header people trust', T.header],
    ['MessageSquareQuote', 'One clear promise, not "welcome to our website"', T.promise],
    ['Image', 'Real, modern photography', T.photo],
    ['MousePointerClick', 'One obvious button, so more visitors book', T.button],
    ['Star', 'Reviews & services up front for instant trust', T.trust],
  ];

  const STAGES = [
    ['Audit', 0.00, 'Reading the dated site, what’s costing them customers.'],
    ['Header', T.header, 'Rebuilding a clean header people instantly trust.'],
    ['Message', T.promise, 'Rewriting the headline into one clear promise.'],
    ['Imagery', T.photo, 'Swapping clip-art for real, modern photography.'],
    ['Call-to-action', T.button, 'Adding one obvious button so visitors book.'],
    ['Proof', T.trust, 'Surfacing reviews & services up front for trust.'],
    ['AI SEO', 0.55, 'Wiring keywords, schema & content for AI search.'],
    ['Recommended', 0.78, 'Becoming the name the AI assistant recommends.'],
  ];

  const SEO_ITEMS = [
    ['Heading1', 'Keyword-rich H1/H2 headers', 0.60],
    ['Target', 'Target keywords optimized', 0.635],
    ['Braces', 'LocalBusiness schema', 0.67],
    ['MapPin', 'Service + area entities', 0.705],
    ['FileCheck2', 'Clean, crawlable content', 0.74],
  ];
  const KEYWORDS = [
    ['emergency electrician denver', 0.60],
    ['24/7 electrical repair', 0.635],
    ['panel upgrade denver', 0.67],
    ['ev charger installation', 0.705],
  ];

  const TABS = [
    ['Redesign', 'PenLine', 'redesign'],
    ['AI SEO', 'Sparkles', 'aiseo'],
    ['Get found', 'Search', 'getfound'],
  ];

  // cross-fade one slot between a "dated" and "modern" node
  function Swap({ up, dated, modern, h }) {
    return (
      <div style={{ position: 'relative', height: h }}>
        <div style={{ position: 'absolute', inset: 0, opacity: up ? 0 : 1, transition: 'opacity .55s ease' }}>{dated}</div>
        <div style={{ position: 'absolute', inset: 0, opacity: up ? 1 : 0, transition: 'opacity .55s ease' }}>{modern}</div>
      </div>
    );
  }

  function BuildReveal() {
    const wrapRef = useRef(null);
    const [p, setP] = useState(0);
    useEffect(() => {
      const onScroll = () => {
        const el = wrapRef.current; if (!el) return;
        const rect = el.getBoundingClientRect();
        const vh = window.innerHeight || 800;
        const total = el.offsetHeight - vh;
        const scrolled = Math.min(Math.max(-rect.top, 0), total);
        setP(total > 0 ? scrolled / total : 0);
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      window.addEventListener('resize', onScroll, { passive: true });
      onScroll();
      return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
    }, []);

    const headerUp = p >= T.header, promiseUp = p >= T.promise, photoUp = p >= T.photo, buttonUp = p >= T.button, trustUp = p >= T.trust;
    const secure = p >= 0.30;
    const phase = p >= 0.78 ? 'getfound' : p >= 0.55 ? 'aiseo' : 'redesign';
    const seoOn = phase === 'aiseo' || phase === 'getfound';
    const recOn = phase === 'getfound';
    const datedFooterOut = p >= 0.50;
    const coverOn = 1 - Math.min(1, p / 0.06);
    const activeStage = STAGES.reduce((a, s, i) => (p >= s[1] ? i : a), 0);

    const replay = () => { const el = wrapRef.current; if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY + 4, behavior: 'smooth' }); };

    return (
      <div ref={wrapRef} style={{ position: 'relative', height: '360vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
          <div className="wrap" style={{ width: '100%' }}>
            <div style={{ maxWidth: 1000, margin: '0 auto' }}>

              {/* ── Toolbar ── */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '12px 16px', borderRadius: 14, border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.03)', marginBottom: 14, flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: GRAD, color: '#08080A', fontWeight: 800, fontSize: 12, padding: '5px 10px', borderRadius: 9 }}><Icon n="Sparkles" s={13} color="#08080A" /> AI</span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, lineHeight: 1.1 }}>From invisible to the first answer AI gives</div>
                    <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>Rebuild · optimize for AI search · get recommended</div>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  {TABS.map(([label, icon, key]) => {
                    const active = phase === key;
                    const passed = (key === 'redesign') || (key === 'aiseo' && (phase === 'aiseo' || phase === 'getfound')) || (key === 'getfound' && phase === 'getfound');
                    return (
                      <span key={key} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600, fontFamily: 'var(--font-body)', color: active ? '#08080A' : passed ? '#dde' : 'var(--text-muted)', background: active ? GRAD : passed ? 'rgba(255,255,255,0.06)' : 'transparent', border: '1px solid ' + (active ? 'transparent' : 'rgba(255,255,255,0.08)'), transition: 'all .3s' }}>
                        <Icon n={icon} s={13} color={active ? '#08080A' : passed ? '#2DE3EA' : '#889'} /> {label}
                      </span>
                    );
                  })}
                  <span onClick={replay} style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600, color: 'var(--text-secondary)', border: '1px solid rgba(255,255,255,0.12)' }}><Icon n="RotateCcw" s={13} color="#889" /> Replay</span>
                </div>
              </div>

              {/* ── Live rebuild: narration rail + frame ── */}
              <div className="br-layout" style={{ display: 'grid', gridTemplateColumns: '248px 1fr', gap: 26, alignItems: 'start' }}>

                {/* narration rail */}
                <div className="br-rail" style={{ paddingTop: 4 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--winkz-cyan)', marginBottom: 16 }}>LIVE REBUILD</div>
                  <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <div style={{ position: 'absolute', left: 13, top: 12, bottom: 12, width: 2, background: 'rgba(255,255,255,0.08)' }} />
                    <div style={{ position: 'absolute', left: 13, top: 12, width: 2, height: (p * 100) + '%', maxHeight: 'calc(100% - 24px)', background: GRAD, transition: 'height .15s linear' }} />
                    {STAGES.map((s, i) => {
                      const active = i === activeStage, done = i < activeStage;
                      return (
                        <div key={i} style={{ display: 'flex', gap: 11, padding: '7px 0', position: 'relative', zIndex: 1 }}>
                          <span style={{ width: 28, height: 28, borderRadius: 999, flexShrink: 0, display: 'grid', placeItems: 'center', background: active || done ? GRAD : '#14141A', border: '1px solid ' + (active || done ? 'transparent' : 'rgba(255,255,255,0.12)'), boxShadow: active ? '0 0 16px rgba(242,59,254,0.5)' : 'none', transition: 'all .3s' }}>
                            {done ? <Icon n="Check" s={12} color="#08080A" /> : <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: active ? '#08080A' : '#889' }}>{i + 1}</span>}
                          </span>
                          <div style={{ paddingTop: 2 }}>
                            <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: active || done ? '#fff' : '#889', transition: 'color .3s' }}>{s[0]}</div>
                            <div style={{ fontSize: 11.5, color: 'var(--winkz-cyan)', lineHeight: 1.35, maxHeight: active ? 44 : 0, opacity: active ? 1 : 0, overflow: 'hidden', transition: 'max-height .35s ease, opacity .35s ease, margin .3s', marginTop: active ? 4 : 0 }}>{s[2]}</div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>

              {/* ── Browser frame ── */}
              <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', background: '#0A0A0D', boxShadow: '0 40px 100px -40px rgba(0,0,0,0.9)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '11px 15px', background: '#121218', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FF5A6E' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FFC24B' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#2DE3A0' }} />
                  <div style={{ marginLeft: 12, flex: 1, maxWidth: 340, height: 26, borderRadius: 999, background: '#0A0A0D', border: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', gap: 7, padding: '0 13px' }}>
                    <Icon n={secure ? 'Lock' : 'TriangleAlert'} s={12} color={secure ? '#2DE3A0' : '#FFC24B'} />
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: secure ? '#cde' : '#a99' }}>{secure ? 'copperlineelectric.com' : 'copperline-electric.net'}</span>
                  </div>
                  {secure && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#2DE3A0', border: '1px solid rgba(45,227,160,0.4)', padding: '3px 8px', borderRadius: 999 }}>● LIVE</span>}
                </div>

                {/* canvas */}
                <div style={{ position: 'relative', height: 'min(60vh, 468px)', overflow: 'hidden', background: promiseUp ? 'linear-gradient(180deg,#ffffff,#f4f6fb)' : '#efe9d6', transition: 'background .6s ease' }}>

                  {/* NAV */}
                  <Swap up={headerUp} h={50}
                    dated={
                      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', background: '#0a5b6b', color: '#ffe14d', fontFamily: 'Times New Roman, serif' }}>
                        <span style={{ fontSize: 12, fontWeight: 700 }}>☎ (303) 555-0148</span>
                        <span style={{ fontSize: 22, fontWeight: 700, color: '#fff', textShadow: '1px 1px 0 #04323a' }}>Copperline Electric</span>
                        <span style={{ fontSize: 11, color: '#bfe', textDecoration: 'underline' }}>HOME · SERVICES</span>
                      </div>
                    }
                    modern={
                      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', borderBottom: '1px solid #e6e9f0', background: '#fff' }}>
                        <CopperlineLogo />
                        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                          {['Services', 'Areas', 'Reviews'].map((l, i) => <span key={i} style={{ fontSize: 13, color: '#4a5568', fontWeight: 500 }}>{l}</span>)}
                          <span style={{ background: COPPER, color: '#fff', fontWeight: 700, fontSize: 13, padding: '8px 15px', borderRadius: 9, boxShadow: '0 8px 18px -10px rgba(200,121,65,0.9)' }}>Book now</span>
                        </div>
                      </div>
                    }
                  />

                  <div style={{ display: 'grid', gridTemplateColumns: '1.08fr 0.92fr', gap: 22, padding: '20px 24px 0', alignItems: 'start' }}>
                    <div>
                      {/* PROMISE (headline + sub) */}
                      <Swap up={promiseUp} h={128}
                        dated={
                          <div style={{ fontFamily: 'Times New Roman, serif', color: '#222' }}>
                            <div style={{ fontSize: 22, fontWeight: 700, color: '#a11', marginBottom: 8 }}>Welcome To Our Website!!!</div>
                            <p style={{ fontSize: 13, lineHeight: 1.5, margin: 0 }}>We are a family owned electrical company serving the greater Denver area for over 20 years. We do wiring, panels, repairs and MORE. Satisfaction guaranteed!!!</p>
                          </div>
                        }
                        modern={
                          <div>
                            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, color: '#0a7d4f', background: '#e5f7ee', border: '1px solid #b8e6cf', borderRadius: 999, padding: '4px 10px', marginBottom: 12 }}><Icon n="ShieldCheck" s={13} color="#0a7d4f" />Licensed &amp; insured</div>
                            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(21px,2.8vw,30px)', fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.03em', color: '#0a2540' }}>Denver's most-trusted electrician, <span style={COPPER_TEXT}>on call 24/7.</span></div>
                            <p style={{ fontSize: 13, color: '#4a5568', lineHeight: 1.5, margin: '10px 0 0', maxWidth: 330 }}>Upfront pricing, same-day service, and licensed pros who treat your home right.</p>
                          </div>
                        }
                      />
                      {/* button lives at the bottom of the site now */}
                    </div>

                    {/* PHOTO */}
                    <Swap up={photoUp} h={172}
                      dated={
                        <div style={{ height: '100%', borderRadius: 4, overflow: 'hidden', border: '3px ridge #b9b09a', background: '#cfc7ad', position: 'relative', filter: 'saturate(0.55) contrast(0.92) sepia(0.25)' }}>
                          <img src="assets/copperline-2009.png" alt="Copperline Electric storefront, 2009" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                          <span style={{ position: 'absolute', bottom: 6, left: 6, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 9, padding: '2px 6px', fontFamily: 'Times New Roman, serif' }}>Come visit our shop!</span>
                        </div>
                      }
                      modern={
                        <div style={{ height: '100%', borderRadius: 14, overflow: 'hidden', background: 'radial-gradient(120% 120% at 70% 15%, #10233f, #0a1424)', position: 'relative', display: 'grid', placeItems: 'center', boxShadow: '0 20px 40px -18px rgba(26,115,232,0.5)', border: '1px solid rgba(126,208,255,0.14)' }}>
                          <CopperlineIso />
                          <image-slot id="copperline-denver" shape="rounded" radius="14" fit="cover" src="assets/copperline-storefront.png" placeholder="Drop a Denver job-site photo" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
                          <span style={{ position: 'absolute', bottom: 8, left: 10, zIndex: 3, pointerEvents: 'none', opacity: seoOn ? 0 : 1, transition: 'opacity .4s', textShadow: '0 1px 6px rgba(0,0,0,0.7)', fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'rgba(214,232,255,0.85)' }}>Copperline Electric · powering Denver</span>
                        </div>
                      }
                    />
                  </div>

                  {/* TRUST row */}
                  <div style={{ padding: '16px 24px 0' }}>
                    <Swap up={trustUp} h={74}
                      dated={
                        <div style={{ fontFamily: 'Times New Roman, serif', color: '#555', fontSize: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
                          <span style={{ background: '#000', color: '#0f0', fontFamily: 'monospace', padding: '3px 7px', letterSpacing: 2 }}>Visitors: 004213</span>
                          <span>Best viewed in Internet Explorer 6</span>
                        </div>
                      }
                      modern={
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
                          {[['Flame', 'Emergency repair', '24/7 response'], ['Gauge', 'Panel upgrades', 'Safe & to code'], ['BatteryCharging', 'EV chargers', 'Install & wiring']].map((c, i) => (
                            <div key={i} style={{ borderRadius: 11, border: '1px solid #ecdfd3', background: 'linear-gradient(165deg,#fffaf5,#fff)', padding: 12, boxShadow: '0 8px 20px -14px rgba(142,74,36,0.35)' }}>
                              <span style={{ width: 28, height: 28, borderRadius: 8, background: COPPER, display: 'grid', placeItems: 'center', marginBottom: 7, boxShadow: '0 6px 14px -8px rgba(200,121,65,0.9)' }}><Icon n={c[0]} s={15} color="#fff" /></span>
                              <div style={{ fontSize: 12.5, fontWeight: 700, color: '#0a2540' }}>{c[1]}</div>
                              <div style={{ fontSize: 10.5, color: '#6b7688', marginTop: 1 }}>{c[2]}</div>
                            </div>
                          ))}
                        </div>
                      }
                    />
                  </div>

                  {/* dated footer fades out */}
                  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: '#0a5b6b', textAlign: 'center', fontSize: 10, color: '#bfe', padding: '5px', fontFamily: 'Times New Roman, serif', opacity: datedFooterOut ? 0 : (headerUp ? 0.6 : 1), transition: 'opacity .5s' }}>Copyright 2011 Copperline Electric · Site by CoolWebDesigns</div>

                  {/* BOOK button pinned to the bottom of the mini site */}
                  <div style={{ position: 'absolute', left: 24, bottom: 16, height: 34, width: 300, zIndex: 4 }}>
                    <Swap up={buttonUp} h={34}
                      dated={<span style={{ display: 'inline-block', fontFamily: 'Times New Roman, serif', background: 'linear-gradient(#f4f4f4,#bbb)', border: '2px outset #ddd', padding: '6px 13px', fontSize: 12, fontWeight: 700, color: '#003' }}>» Click Here! «</span>}
                      modern={
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                          <span style={{ position: 'relative', display: 'inline-flex' }}>
                            <span style={{ background: COPPER, color: '#fff', fontWeight: 700, fontSize: 12.5, padding: '8px 15px', borderRadius: 9, boxShadow: seoOn ? '0 0 0 3px rgba(232,161,99,0.55), 0 10px 20px -10px rgba(200,121,65,0.75)' : '0 10px 20px -10px rgba(200,121,65,0.75)', transition: 'box-shadow .4s' }}>Book an electrician</span>
                            <span style={{ position: 'absolute', top: -8, right: -9, display: 'inline-flex', alignItems: 'center', gap: 3, fontFamily: 'var(--font-mono)', fontSize: 8, fontWeight: 700, color: '#fff', background: COPPER, borderRadius: 999, padding: '2px 5px', whiteSpace: 'nowrap', opacity: seoOn ? 1 : 0, transform: seoOn ? 'none' : 'scale(0.7)', transition: 'all .35s' }}>CTA ✓</span>
                          </span>
                          <GoogleBadge show={trustUp} />
                        </div>
                      }
                    />
                  </div>

                  {/* intro cover, keeps the dark aesthetic on entry, lifts as you scroll in */}
                  <div style={{ position: 'absolute', inset: 0, zIndex: 5, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 24, background: 'radial-gradient(120% 90% at 50% 0%, #14141c, #08080A)', opacity: coverOn, pointerEvents: 'none' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--winkz-cyan)', marginBottom: 14 }}>BEFORE · WHAT MOST BUSINESSES HAVE</span>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(20px,2.6vw,30px)', letterSpacing: '-0.03em', maxWidth: 460, lineHeight: 1.12, color: '#fff' }}>A dated site nobody finds, and AI never mentions.</div>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 18, fontSize: 13, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>Scroll to rebuild it <Icon n="ArrowDown" s={14} color="#889" /></span>
                  </div>

                  {/* ===== AI-SEO OVERLAY ===== */}
                  <div style={{ position: 'absolute', top: 10, right: 12, width: 256, borderRadius: 13, background: 'rgba(10,10,14,0.93)', backdropFilter: 'blur(10px)', border: '1px solid rgba(232,161,99,0.38)', boxShadow: '0 24px 50px -20px rgba(0,0,0,0.7), 0 0 40px -22px rgba(232,161,99,0.8)', padding: 12, opacity: phase === 'aiseo' ? 1 : 0, transform: seoOn ? 'none' : 'translateX(18px)', transition: 'opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1)', pointerEvents: 'none' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9 }}>
                      <span style={{ width: 22, height: 22, borderRadius: 7, background: COPPER, display: 'grid', placeItems: 'center', boxShadow: '0 0 14px -4px rgba(232,161,99,0.85)' }}><Icon n="Sparkles" s={12} color="#fff" /></span>
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, color: '#fff' }}>SEO &amp; AI optimization</span>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                      {SEO_ITEMS.map((it, i) => {
                        const done = p >= it[2];
                        return (
                          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: done ? 1 : 0.4, transition: 'opacity .35s' }}>
                            <span style={{ width: 18, height: 18, borderRadius: 5, background: done ? 'rgba(232,161,99,0.18)' : 'rgba(255,255,255,0.06)', display: 'grid', placeItems: 'center', flexShrink: 0, transition: 'background .35s' }}>{done ? <Icon n="Check" s={11} color="#E8A163" /> : <Icon n={it[0]} s={10} color="#889" />}</span>
                            <span style={{ fontSize: 10.5, color: done ? '#dde' : '#889', fontFamily: 'var(--font-mono)' }}>{it[1]}</span>
                          </div>
                        );
                      })}
                    </div>
                    <div style={{ marginTop: 9, paddingTop: 8, borderTop: '1px solid rgba(255,255,255,0.09)' }}>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em', color: '#788', marginBottom: 6 }}>TARGET KEYWORDS</div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                        {KEYWORDS.map((k, i) => {
                          const shown = p >= k[1];
                          return (
                            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 9, color: shown ? '#E8A163' : '#556', background: shown ? 'rgba(232,161,99,0.12)' : 'rgba(255,255,255,0.03)', border: '1px solid ' + (shown ? 'rgba(232,161,99,0.35)' : 'rgba(255,255,255,0.06)'), borderRadius: 999, padding: '2px 6px', opacity: shown ? 1 : 0.45, transform: shown ? 'none' : 'translateY(4px)', transition: 'all .35s' }}>
                              <span style={{ width: 4, height: 4, borderRadius: 999, background: shown ? '#E8A163' : '#556' }} />{k[0]}
                            </span>
                          );
                        })}
                      </div>
                    </div>
                  </div>

                  {/* ===== RECOMMENDED OVERLAY, embedded chat widget, bottom-right ===== */}
                  <div style={{ position: 'absolute', right: 16, bottom: 16, width: 'min(300px, 84%)', opacity: recOn ? 1 : 0, transform: recOn ? 'none' : 'translateY(18px) scale(0.96)', transformOrigin: 'bottom right', transition: 'opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1)', pointerEvents: 'none', zIndex: 6 }}>
                    <div style={{ borderRadius: 15, background: 'rgba(10,10,14,0.97)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 26px 55px -18px rgba(0,0,0,0.85)', padding: 13 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 11, paddingBottom: 9, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                        <span style={{ width: 20, height: 20, borderRadius: 999, background: COPPER, display: 'grid', placeItems: 'center', boxShadow: '0 0 14px -4px rgba(232,161,99,0.8)' }}><Icon n="Sparkles" s={11} color="#fff" /></span>
                        <span style={{ fontSize: 11.5, fontWeight: 600, color: '#fff' }}>AI Assistant</span>
                        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 9, color: '#2DE3A0' }}><span style={{ width: 5, height: 5, borderRadius: 999, background: '#2DE3A0' }} />live</span>
                      </div>
                      <div style={{ width: 'fit-content', maxWidth: '88%', marginLeft: 'auto', fontSize: 11.5, color: '#cfe', background: 'rgba(121,186,255,0.14)', border: '1px solid rgba(121,186,255,0.2)', borderRadius: 11, borderBottomRightRadius: 3, padding: '7px 10px', marginBottom: 9, lineHeight: 1.4 }}>"Best emergency electrician in Denver?"</div>
                      <div style={{ fontSize: 11.5, color: '#e7eaf2', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 11, borderBottomLeftRadius: 3, padding: '9px 11px', lineHeight: 1.45 }}>
                        Go with <b style={{ color: '#fff' }}>Copperline Electric</b>, 4.9★, 600+ reviews, 24/7, upfront pricing.
                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 8, background: COPPER, color: '#fff', fontWeight: 700, fontSize: 10, padding: '3px 8px', borderRadius: 999, boxShadow: '0 8px 18px -10px rgba(200,121,65,0.9)' }}><Icon n="Trophy" s={10} color="#fff" />Recommended #1</div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              {/* /br-layout */}
              </div>

              <style>{`@media (max-width:900px){.br-rail{display:none}.br-layout{grid-template-columns:1fr!important}}`}</style>

            </div>
          </div>
        </div>
      </div>
    );
  }

  window.BuildReveal = BuildReveal;
})();
