// Tablet — loaded website screen + scroll-aware chrome behavior.
// Demonstrates how the top tab strip adapts as content scrolls:
//   · rest (top)    → full strip: tabs + URL pill + actions
//   · mini (scroll) → single compact domain pill, actions hidden
//   · peek (scroll up while deep) → strip expands again, signaling navigation is reachable
// Tap the compact pill at any time to expand.

function TScreenWebsite({ scrollRef, onScroll, landscape = true }) {
  return (
    <div
      ref={scrollRef}
      onScroll={onScroll}
      style={{
        flex: 1, minHeight: 0, overflow: 'auto', background: '#FAFAF8', color: '#1A1A1A',
        fontFamily: 'Inter, -apple-system, system-ui, sans-serif',
      }}
    >
      {/* Article hero */}
      <div style={{
        padding: landscape ? '64px 80px 32px' : '48px 28px 24px',
        maxWidth: 880, margin: '0 auto',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6, background: '#FF6600', color: '#fff',
            display: 'grid', placeItems: 'center', fontFamily: 'Geist', fontWeight: 800, fontSize: 16,
          }}>Y</div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#1A1A1A' }}>The Engineering Blog</div>
            <div style={{ fontSize: 11, color: '#6B6B6B', fontFamily: 'JetBrains Mono, monospace' }}>engineering.example.com · 8 min read</div>
          </div>
          <div style={{ flex: 1 }}/>
          <button style={{ padding: '6px 12px', fontSize: 12, fontWeight: 500, color: '#fff', background: '#1A1A1A', border: 0, borderRadius: 16, cursor: 'pointer' }}>Follow</button>
        </div>
        <h1 style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: landscape ? 56 : 42, lineHeight: 1.05, letterSpacing: '-0.02em',
          fontWeight: 400, margin: '0 0 18px', color: '#0E0E0E',
        }}>
          Designing peer-to-peer browsers for the post-mediator era
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.5, color: '#3A3A3A', margin: 0, maxWidth: 660 }}>
          The web grew up assuming there was always a server in the middle. We've spent the last
          two years asking what changes when there isn't — and how a browser should change with it.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 28, fontSize: 12, color: '#6B6B6B', fontFamily: 'JetBrains Mono, monospace' }}>
          <span>by Maya Chen</span>
          <span style={{ width: 3, height: 3, borderRadius: 2, background: '#C0C0C0' }}/>
          <span>May 14, 2026</span>
          <span style={{ width: 3, height: 3, borderRadius: 2, background: '#C0C0C0' }}/>
          <span>3,420 reads</span>
        </div>
      </div>

      {/* Hero image */}
      <div style={{ maxWidth: 1040, margin: '0 auto', padding: landscape ? '0 80px' : '0 28px' }}>
        <div style={{
          height: landscape ? 360 : 220, borderRadius: 14,
          background: 'linear-gradient(135deg, #6EE7B7 0%, #60A5FA 100%)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* decorative dotted network */}
          <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} viewBox="0 0 800 360" preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="tw-dots" width="22" height="22" patternUnits="userSpaceOnUse">
                <circle cx="2" cy="2" r="1.2" fill="rgba(255,255,255,0.45)"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#tw-dots)"/>
            {/* peer nodes */}
            {[
              [180, 100],[420, 180],[640, 90],[300, 250],[560, 280],[120, 230],
            ].map((p, i) => (
              <g key={i}>
                <circle cx={p[0]} cy={p[1]} r="14" fill="rgba(255,255,255,0.95)"/>
                <circle cx={p[0]} cy={p[1]} r="6" fill="#0B0C0F"/>
              </g>
            ))}
            <g stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" fill="none">
              <path d="M180 100 L420 180"/>
              <path d="M420 180 L640 90"/>
              <path d="M420 180 L300 250"/>
              <path d="M300 250 L560 280"/>
              <path d="M180 100 L120 230"/>
              <path d="M120 230 L300 250"/>
              <path d="M640 90 L560 280"/>
            </g>
          </svg>
        </div>
        <div style={{ fontSize: 12, color: '#6B6B6B', textAlign: 'center', marginTop: 10, fontStyle: 'italic' }}>
          Above: a sample mesh topology with three mediators and five direct peer links.
        </div>
      </div>

      {/* Body */}
      <div style={{ maxWidth: 720, margin: '40px auto 0', padding: landscape ? '0 80px 96px' : '0 28px 80px' }}>
        {[
          { kind: 'h', text: 'Why the assumption matters' },
          { kind: 'p', text: 'For three decades, the URL bar has been the canonical browser interaction. Type a host, fetch a document, render it. Every UI affordance we built — tabs, bookmarks, the back button — descended from that single primitive.' },
          { kind: 'p', text: 'But when the document is not coming from a host — when it is being pushed by a peer over DIDComm, or pulled from a mesh of devices five feet away — the URL bar is the wrong centerpiece.' },
          { kind: 'pull', text: '“What if the address bar was the second-most-important thing in the chrome?”' },
          { kind: 'p', text: 'The first thing should be the identity you are using to be on the network at all. The second is wherever (or whoever) you are currently looking at. Everything else — tabs, history, find-in-page — is a refinement of those two.' },
          { kind: 'h', text: 'Designing for two transports at once' },
          { kind: 'p', text: 'Half the time you load a real https URL. The other half you load a peer — a friend, a document they are streaming live, an Ajna app they shared. Both have to feel like first-class citizens.' },
          { kind: 'p', text: 'We started with a small convention: every loaded resource carries a transport chip. Internet pages show a globe; peer resources show a mesh glyph or BLE icon. That tiny piece of metadata lets the chrome stay simple without lying about what is actually happening underneath.' },
          { kind: 'h', text: 'When the chrome should disappear' },
          { kind: 'p', text: 'iPad has the screen real estate to keep full chrome visible all the time. We chose not to. The tab strip collapses to a single pill the moment you scroll into content, gives you back ten extra rows, and re-expands the instant you scroll up. The chrome should be there when you reach for it, gone when you do not.' },
          { kind: 'p', text: 'This was harder than it sounds. The hardest part is not the animation; it is the hysteresis — the chrome should not flicker when your finger trembles, and should not fight you when you scroll fast. We use a six-pixel deadband and a one-frame debounce.' },
        ].map((b, i) => {
          if (b.kind === 'h') return <h2 key={i} style={{ fontFamily: "'Instrument Serif', Georgia, serif", fontSize: 28, fontWeight: 400, letterSpacing: '-0.01em', margin: '36px 0 12px', color: '#0E0E0E' }}>{b.text}</h2>;
          if (b.kind === 'pull') return (
            <blockquote key={i} style={{
              margin: '28px 0', padding: '4px 0 4px 22px',
              borderLeft: '3px solid #1A1A1A', fontSize: 22, lineHeight: 1.35,
              fontFamily: "'Instrument Serif', Georgia, serif", fontStyle: 'italic', color: '#0E0E0E',
            }}>{b.text}</blockquote>
          );
          return <p key={i} style={{ fontSize: 17, lineHeight: 1.6, color: '#2A2A2A', margin: '0 0 16px' }}>{b.text}</p>;
        })}

        {/* Footer card */}
        <div style={{
          marginTop: 44, padding: 22, borderRadius: 14,
          background: '#F0F0EC', border: '1px solid #E2E2DC',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ width: 44, height: 44, borderRadius: 22, background: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', color: '#0B0C0F', display: 'grid', placeItems: 'center', fontFamily: 'Geist', fontWeight: 700 }}>MC</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Maya Chen</div>
            <div style={{ fontSize: 12, color: '#6B6B6B' }}>Design lead at Ajna · writing about decentralized UX</div>
          </div>
          <button style={{ padding: '8px 14px', fontSize: 12, fontWeight: 600, color: '#fff', background: '#1A1A1A', border: 0, borderRadius: 18, cursor: 'pointer' }}>Subscribe</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TScreenWebsite });