/* ContrastReveal — the hero centerpiece.
   Same page, two ways: what customers see (rendered) vs what AI sees (stripped).
   Draggable slider wipe + keyboard support; degrades to a tap-toggle on mobile
   or when mode === 'toggle'. CircadiaZen sample (clearly a demo). */

const crStyles = {
  frame: {
    position: 'relative', width: '100%',
    height: '100%', minHeight: 'clamp(420px, 52vw, 560px)',
    borderRadius: 'var(--r-xl)', overflow: 'hidden',
    border: '1px solid var(--line-strong)',
    background: 'var(--navy-2)',
    boxShadow: 'var(--sh-float)', userSelect: 'none', touchAction: 'pan-y'
  },
  layer: { position: 'absolute', inset: 0, overflow: 'hidden' },
  tag: {
    position: 'absolute', top: 14, zIndex: 6, fontFamily: 'var(--font-mono)',
    fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '6px 10px', borderRadius: '999px', backdropFilter: 'blur(6px)',
    display: 'inline-flex', alignItems: 'center', gap: 6, pointerEvents: 'none', whiteSpace: 'nowrap'
  }
};

// ---------- CircadiaZen rendered product page (the "human" view) ----------
function HumanView() {
  const press = ['VOGUE', 'WIRED', 'mindbodygreen'];
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#fbfaf7', color: '#16202e',
      fontFamily: 'var(--font-sans)', display: 'flex', flexDirection: 'column' }}>
      {/* browser chrome — signals "this is a website," not an ad */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', background: '#e9e6dd', borderBottom: '1px solid #d8d3c6', flex: '0 0 auto' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#d9534f' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#e8b94d' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#5cb85c' }}></span>
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 7, background: '#fbfaf7', borderRadius: 7, padding: '5px 11px', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: '#55606e' }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#7a8a76" strokeWidth="2.4"><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
          circadiazen.com
        </div>
      </div>
      {/* top bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '13px 22px', borderBottom: '1px solid #ece8df', flex: '0 0 auto' }}>
        <div className="mock-brand" style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#0c5a52' }}>
          <span style={{ width: 16, height: 16, borderRadius: 5, background: 'linear-gradient(135deg,#13a394,#0c5a52)' }}></span>
          CircadiaZen
        </div>
        <div className="mock-nav" style={{ display: 'flex', gap: 18, fontSize: 13, color: '#55606e', fontWeight: 500 }}>
          <span>Shop</span><span>The Science</span><span>Reviews</span><span>Our Story</span>
        </div>
      </div>
      {/* body */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 24, padding: '22px 26px', flex: '1 1 auto', minHeight: 0 }}>
        {/* product image */}
        <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden',
          background: '#ffffff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 0 }}>
          <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: 9.5,
            color: 'rgba(40,50,46,0.45)', letterSpacing: '0.1em', zIndex: 2 }}>PRODUCT&nbsp;PHOTO</div>
          <img src={window.DEEP_SLEEP_IMG || 'assets/deep-sleep.png'} alt="Deep Sleep Support supplement bottle"
          style={{ width: '100%', objectFit: 'contain', padding: '8% 6%', height: "461px" }} />
        </div>
        {/* details */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#c99a16', fontSize: 14, fontWeight: 600 }}>
            {'★★★★★'} <span style={{ color: '#55606e', fontWeight: 500 }}>4.8 · 1,240 reviews</span>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px,2.7vw,31px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
            Deep Sleep Complex
          </div>
          <div style={{ fontSize: 14.5, color: '#55606e', lineHeight: 1.5 }}>
            Clinically-studied magnesium glycinate + L-theanine. Formulated with our medical advisory board.
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 2 }}>
            <span style={{ fontSize: 28, fontWeight: 700 }}>$58</span>
            <span style={{ fontSize: 13, color: '#8a93a0' }}>60 capsules · 1-month supply</span>
          </div>
          <div style={{ display: 'flex', gap: 7, marginTop: 8, fontSize: 11.5, color: '#55606e', flexWrap: 'wrap' }}>
            <span style={{ background: '#eef1ee', padding: '4px 8px', borderRadius: 7 }}>Third-party tested</span>
            <span style={{ background: '#eef1ee', padding: '4px 8px', borderRadius: 7 }}>NSF certified</span>
            <span style={{ background: '#eef1ee', padding: '4px 8px', borderRadius: 7 }}>60-night guarantee</span>
          </div>
          <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: '1px solid #ece8df', fontSize: 11.5, color: '#8a93a0', letterSpacing: '0.06em' }}>
            AS SEEN IN
            <div style={{ display: 'flex', gap: 16, marginTop: 8, alignItems: 'center', justifyContent: 'space-between' }}>
              {press.map((b) => <span key={b} style={{ fontWeight: 700, color: '#aab0b8', fontSize: 15, fontFamily: b === 'mindbodygreen' ? 'var(--font-sans)' : 'var(--font-display)' }}>{b}</span>)}
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ---------- What AI actually reads → and the takeaway ----------
function AIView() {
  // mirrors the human side's fields — but almost all blank
  const known = [
  { k: 'Brand name', v: 'CircadiaZen', got: true },
  { k: 'What they sell', got: false },
  { k: 'Price', got: false },
  { k: 'Reviews & rating', got: false },
  { k: 'Clinical proof', got: false },
  { k: 'Why choose them', got: false }];

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--navy-2)',
      color: 'var(--fg)', padding: 'clamp(16px,2vw,24px)',
      display: 'flex', flexDirection: 'column', gap: 'clamp(10px,1.3vw,15px)', overflow: 'hidden' }} className="grid-tex">

      {/* short proof: the page blocks AI — robots.txt shown as evidence */}
      <div>
        <div className="mono" style={{ fontSize: 11.5, color: 'var(--fg-subtle)', letterSpacing: '0.1em', marginBottom: 8 }}>circadiazen.com/robots.txt — read by AI crawlers first

        </div>
        <pre style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 'clamp(10.5px,1.2vw,12.5px)', lineHeight: 1.55, color: '#7e8cb2',
          background: 'rgba(0,0,0,0.25)', border: '1px solid var(--line)', borderRadius: 9, padding: '9px 12px' }}>
{`User-agent: GPTBot
`}<span style={{ color: 'var(--crit)', background: 'var(--crit-bg)', padding: '1px 4px', borderRadius: 3 }}>{`Disallow: /`}</span>{`

User-agent: ClaudeBot
`}<span style={{ color: 'var(--crit)', background: 'var(--crit-bg)', padding: '1px 4px', borderRadius: 3 }}>{`Disallow: /`}</span>
        </pre>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 9 }}>
          <span style={{ color: 'var(--crit)', flex: '0 0 auto' }}><Icon name="eye-off" size={17} /></span>
          <span style={{ fontSize: 'clamp(13.5px,1.4vw,15px)', color: 'var(--fg)', lineHeight: 1.4 }}>
            In plain English: <b style={{ fontWeight: 600 }}>your site blocks AI crawlers from every page.</b>
          </span>
        </div>
      </div>

      {/* the so-what: the knowledge AI is left with */}
      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 'clamp(10px,1.4vw,15px)', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        <div className="mono" style={{ fontSize: 11.5, color: 'var(--fg-subtle)', letterSpacing: '0.1em', marginBottom: 2 }}>
          SO HERE'S EVERYTHING AI KNOWS ABOUT YOU
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'space-evenly' }}>
          {known.map((r) =>
          <div key={r.k} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 150px) 1fr', alignItems: 'center', gap: 14,
            borderBottom: '1px solid var(--line)', padding: 'clamp(5px,0.7vw,8px) 0' }}>
              <span style={{ fontSize: 'clamp(13px,1.4vw,15px)', color: 'var(--fg-muted)' }}>{r.k}</span>
              {r.got ?
            <span style={{ fontSize: 'clamp(13.5px,1.45vw,15.5px)', color: 'var(--fg)', fontWeight: 600 }}>{r.v}</span> :
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 'clamp(12px,1.3vw,13.5px)', color: '#5e6b8c',
              fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>
                    <span style={{ width: 70, height: 1, background: 'repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)', flex: '0 0 auto' }}></span>
                    couldn't read
                  </span>}
            </div>
          )}
        </div>
      </div>

      {/* bottom line */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--crit)', boxShadow: '0 0 12px var(--crit)', flex: '0 0 auto' }}></span>
        <span style={{ fontSize: 'clamp(13.5px,1.4vw,15px)', color: 'var(--fg-muted)', lineHeight: 1.4 }}>
          Not enough to recommend you. <b style={{ color: 'var(--fg)', fontWeight: 600 }}>AI names a competitor instead.</b>
        </span>
      </div>
    </div>);

}

function ContrastReveal({ mode = 'slider' }) {
  const [pos, setPos] = React.useState(52); // slider divider %
  const [view, setView] = React.useState('human'); // toggle mode
  const frameRef = React.useRef(null);
  const dragging = React.useRef(false);
  const [isNarrow, setIsNarrow] = React.useState(false);

  React.useEffect(() => {
    const check = () => setIsNarrow(window.innerWidth < 640);
    check();window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  const useToggle = mode === 'toggle' || isNarrow;

  const moveTo = (clientX) => {
    const el = frameRef.current;if (!el) return;
    const r = el.getBoundingClientRect();
    let p = (clientX - r.left) / r.width * 100;
    p = Math.max(2, Math.min(98, p));
    setPos(p);
  };
  const onDown = (e) => {dragging.current = true;moveTo(e.clientX);e.currentTarget.setPointerCapture?.(e.pointerId);};
  const onMove = (e) => {if (dragging.current) moveTo(e.clientX);};
  const onUp = (e) => {dragging.current = false;e.currentTarget.releasePointerCapture?.(e.pointerId);};
  const onKey = (e) => {
    if (e.key === 'ArrowLeft') {setPos((p) => Math.max(2, p - 3));e.preventDefault();}
    if (e.key === 'ArrowRight') {setPos((p) => Math.min(98, p + 3));e.preventDefault();}
  };

  // ----- TOGGLE / mobile -----
  if (useToggle) {
    return (
      <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, justifyContent: 'center' }}>
          {[['human', 'What customers see'], ['ai', 'What AI sees']].map(([k, label]) =>
          <button key={k} onClick={() => setView(k)} style={{
            flex: 1, padding: '11px 14px', borderRadius: 'var(--r-md)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14,
            cursor: 'pointer', border: '1px solid ' + (view === k ? 'var(--accent)' : 'var(--line-strong)'),
            background: view === k ? 'var(--accent)' : 'transparent', color: view === k ? 'var(--on-accent)' : 'var(--fg-muted)' }}>
              {label}
            </button>
          )}
        </div>
        <div style={{ ...crStyles.frame, flex: 1 }} ref={frameRef}>
          <div style={crStyles.layer}>{view === 'human' ? <HumanView /> : <AIView />}</div>
        </div>
        <p style={{ textAlign: 'center', margin: '12px 0 0', fontSize: 13.5, fontFamily: 'var(--font-sans)', color: "var(--accent)", opacity: "1", fontWeight: "700" }}>
          {view === 'human' ?
          'This is what a buyer sees. Toggle over and see what AI is able to read on your site.' :
          'AI is flying blind. It can’t see your price, proof, or reviews — so it recommends someone else.'}
        </p>
      </div>);

  }

  // ----- SLIDER -----
  return (
    <div style={crStyles.frame} ref={frameRef} onPointerMove={onMove} onPointerUp={onUp} onPointerLeave={onUp}>
      {/* base: human */}
      <div style={crStyles.layer}><HumanView /></div>
      {/* top: AI, revealed from divider rightward */}
      <div style={{ ...crStyles.layer, clipPath: `inset(0 0 0 ${pos}%)` }}><AIView /></div>

      {/* labels */}
      <div style={{ ...crStyles.tag, left: 14, color: 'var(--on-accent)', background: 'var(--accent)',
        opacity: pos > 18 ? 1 : 0, transition: 'opacity .2s' }}>Customer view</div>
      <div style={{ ...crStyles.tag, right: 14, color: 'var(--fg-muted)', background: 'rgba(10,14,26,0.7)', border: '1px solid var(--line-strong)',
        opacity: pos < 82 ? 1 : 0, transition: 'opacity .2s' }}>AI view</div>

      {/* divider + handle */}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${pos}%`, transform: 'translateX(-50%)', zIndex: 8, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', width: 2, transform: 'translateX(-50%)',
          background: 'var(--accent)', boxShadow: '0 0 18px var(--accent-glow)' }}></div>
        <button
          role="slider" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pos)}
          aria-label="Drag to compare the customer view with the AI view"
          onPointerDown={onDown} onKeyDown={onKey} tabIndex={0}
          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
            width: 46, height: 46, borderRadius: '50%', background: 'var(--accent)', border: '3px solid #0a0e1a',
            boxShadow: '0 6px 20px rgba(0,0,0,0.5), 0 0 24px var(--accent-glow)', cursor: 'ew-resize',
            pointerEvents: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="m9 7-4 5 4 5M15 7l4 5-4 5" />
          </svg>
        </button>
      </div>

      <div style={{ position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)', zIndex: 8,
        fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: 'var(--fg)', background: 'rgba(8,12,24,0.92)', padding: '6px 13px', borderRadius: 999,
        border: '1px solid var(--accent)', boxShadow: '0 4px 16px rgba(0,0,0,0.45), 0 0 0 3px rgba(8,12,24,0.55)',
        backdropFilter: 'blur(6px)', pointerEvents: 'none', display: 'flex', alignItems: 'center', gap: 7,
        whiteSpace: 'nowrap' }}>
        <span style={{ color: 'var(--accent)' }}>⟷</span> Drag to reveal
      </div>
    </div>);

}

Object.assign(window, { ContrastReveal });