/* Sample page rendered at three simulated viewports.
   .bd-root sets the local "root" (em-based). Each preview scales
   the sample to a fixed pixel width with its own font-size,
   simulating real desktop / tablet / mobile rendering. */

function SamplePage({ variant }) {
  const isDesktop = variant === 'desktop';
  const isTablet = variant === 'tablet';
  const isMobile = variant === 'mobile';

  return (
    <div className="sample-page" style={{
      padding: isMobile ? '1em' : isTablet ? '1.5em' : '2em',
      display: 'flex',
      flexDirection: 'column',
      gap: isMobile ? '1.5em' : '2em',
    }}>
      {/* Nav */}
      <nav className="bd-nav" style={{ padding: isMobile ? '0.625em 0.875em' : undefined }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5em' }}>
          <SampleMark/>
          <span style={{ fontWeight: 800, letterSpacing: '-0.02em', fontSize: '1rem' }}>boolland</span>
        </div>
        {isMobile ? (
          <div className="bd-burger"><span/><span/><span/></div>
        ) : (
          <>
            <div className="links">
              <a href="#">Work</a>
              <a href="#">Services</a>
              <a href="#">About</a>
              {isDesktop && <a href="#">Journal</a>}
            </div>
            <div className="actions">
              {isDesktop && <button className="bd-btn ghost sm">Sign in</button>}
              <button className="bd-btn primary sm">Start a project</button>
            </div>
          </>
        )}
      </nav>

      {/* Hero */}
      <div style={{
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? '1em' : '2em',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
      }}>
        <div style={{ flex: 2 }}>
          <div className="bd-eyebrow" style={{ marginBottom: '1em' }}>software house · est. 2020 · KL</div>
          <h1 className="bd-h1" style={{ fontSize: isMobile ? '2.25rem' : isTablet ? '2.75rem' : '3.5rem' }}>
            We code your <span style={{ color: '#5b6cff' }}>vision.</span>
          </h1>
          <p className="bd-body" style={{ marginTop: '1em', maxWidth: '32em', opacity: 0.78 }}>
            Bespoke websites, mobile apps, and e-commerce systems for brands that are done with templates.
          </p>
          <div style={{ display: 'flex', gap: '0.5em', marginTop: '1.5em', flexWrap: 'wrap' }}>
            <button className="bd-btn primary">Start a project →</button>
            <button className="bd-btn ghost">See our work</button>
          </div>
        </div>

        {!isMobile && (
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="bd-card elevated" style={{ background: 'var(--bd-ink)', color: 'var(--bd-paper)', borderColor: 'var(--bd-ink)' }}>
              <div className="bd-card-meta" style={{ color: 'rgba(250,250,247,0.5)' }}>case study · 11</div>
              <div className="bd-card-title">Headless Shopify rebuild</div>
              <div className="bd-card-body" style={{ opacity: 0.8 }}>
                1.1s → 240ms page load. 28% lift in checkout completion.
              </div>
              <div className="bd-badge success dot" style={{ marginTop: '0.5em', alignSelf: 'flex-start' }}>shipped</div>
            </div>
          </div>
        )}
      </div>

      {/* Features grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1fr 1fr 1fr',
        gap: '0.75em',
      }}>
        <article className="bd-card">
          <div className="bd-card-meta">01 · websites</div>
          <div className="bd-card-title" style={{ fontSize: '1rem' }}>Bespoke web</div>
          <div className="bd-card-body" style={{ fontSize: '0.8125rem' }}>Marketing, content, custom apps. We pick the stack to fit the job.</div>
        </article>
        <article className="bd-card">
          <div className="bd-card-meta">02 · commerce</div>
          <div className="bd-card-title" style={{ fontSize: '1rem' }}>E-commerce</div>
          <div className="bd-card-body" style={{ fontSize: '0.8125rem' }}>Shopify, Hydrogen, headless. Themes that move and storefronts that scale.</div>
        </article>
        <article className="bd-card" style={{ display: isMobile ? 'flex' : isTablet ? 'none' : 'flex' }}>
          <div className="bd-card-meta">03 · mobile</div>
          <div className="bd-card-title" style={{ fontSize: '1rem' }}>iOS · Android</div>
          <div className="bd-card-body" style={{ fontSize: '0.8125rem' }}>Native and React Native. Same engineering bar as the web work.</div>
        </article>
      </div>
    </div>
  );
}

function ViewportsSection() {
  // Each frame: simulated viewport width × height + the root font-size
  // that the real CSS would compute at that viewport, plus a display
  // scale that fits the visualisation comfortably on the guideline page.
  const frames = [
    { kind: 'desktop', width: 1280, height: 800,  rootPx: 14.4, scale: 0.62, label: 'Desktop',          ref: '1vw at 1440 ref' },
    { kind: 'tablet',  width: 820,  height: 980,  rootPx: 13.1, scale: 0.72, label: 'Tablet · iPad',    ref: '1.6vw at 820 ref' },
    { kind: 'mobile',  width: 390,  height: 720,  rootPx: 15.6, scale: 0.95, label: 'Mobile · iPhone',  ref: '4vw at 390 ref' },
  ];

  return (
    <section id="viewports" data-screen-label="08 Viewports">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>08</b> &nbsp;/&nbsp; Viewports</div>
          <div>
            <h2 className="h1">Same brand.<br/>Three screens.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The same boolland.com hero, rendered at desktop, tablet and mobile reference widths. Notice that the system isn't just "smaller" on mobile — content reflows, the sidebar collapses, the nav simplifies. One layout system, three behaviours.
            </p>
          </div>
        </div>

        <div className="vp-list">
          {frames.map(f => {
            const w = f.width * f.scale;
            const h = f.height * f.scale;
            return (
              <div className="vp-frame" key={f.kind}>
                <div className="head">
                  <div className="dots"><div className="dot"/><div className="dot"/><div className="dot"/></div>
                  <div className="w">{f.label}</div>
                  <div className="mono">{f.width}×{f.height}</div>
                </div>
                <div className="vp-stage">
                  <div className="vp-canvas" style={{ width: w, height: h }}>
                    <div
                      className="bd-root"
                      style={{
                        width: f.width,
                        height: f.height,
                        fontSize: f.rootPx,
                        transform: `scale(${f.scale})`,
                        transformOrigin: 'top left',
                        background: 'var(--bd-paper)',
                        overflow: 'hidden',
                      }}
                    >
                      <SamplePage variant={f.kind}/>
                    </div>
                  </div>
                </div>
                <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line)', fontFamily: 'Roboto Mono, monospace', fontSize: 11, color: 'var(--muted)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
                  <span>:root → {f.rootPx} px &nbsp;·&nbsp; {f.ref}</span>
                  <span>preview shown at {Math.round(f.scale * 100)}% of native size</span>
                </div>
              </div>
            );
          })}
        </div>

        <div className="g3" style={{ marginTop: 32 }}>
          <div className="spec">
            <b>// desktop</b>{'\n'}
            Hero sits on a 2/3 split with a<br/>
            case-study card on the right.<br/>
            Full nav with sign-in. 3-column<br/>
            services grid.
          </div>
          <div className="spec">
            <b>// tablet</b>{'\n'}
            Hero card stays visible but<br/>
            services collapse to 2 columns.<br/>
            Sign-in moves into the menu.
          </div>
          <div className="spec">
            <b>// mobile</b>{'\n'}
            Single column, hamburger menu,<br/>
            full-width CTAs. Touch targets<br/>
            ≥ 44 px. Card stack stays open.
          </div>
        </div>
      </div>
    </section>
  );
}

window.SamplePage = SamplePage;
window.ViewportsSection = ViewportsSection;