function LiveFrame({ url, scale = 0.5 }) {
  // Wrap a full-resolution iframe and scale it down so the real site
  // fits cleanly inside the browser-frame preview.
  const wrapperStyle = {
    position: 'absolute',
    inset: 0,
    overflow: 'hidden',
  };
  const iframeStyle = {
    width: `${100 / scale}%`,
    height: `${100 / scale}%`,
    border: 'none',
    transform: `scale(${scale})`,
    transformOrigin: '0 0',
    pointerEvents: 'none', // preview only — click the link below to visit
    background: '#fff',
  };
  return (
    <div style={wrapperStyle}>
      <iframe
        src={url}
        style={iframeStyle}
        loading="lazy"
        title={url}
        sandbox="allow-scripts allow-same-origin"
      />
    </div>
  );
}

function AceBrowser() {
  const [mode, setMode] = React.useState('light');
  const url = mode === 'light' ? 'https://ace2.brucedigital.org' : 'https://ace.brucedigital.org';
  return (
    <div className="browser">
      <div className="browser-bar">
        <div className="browser-dots"><span/><span/><span/></div>
        <div className="browser-url">{url.replace('https://', '')}</div>
      </div>
      <div className="browser-canvas">
        <div className="browser-toggle">
          <button className={mode === 'light' ? 'active' : ''} onClick={() => setMode('light')}>Light</button>
          <button className={mode === 'dark' ? 'active' : ''} onClick={() => setMode('dark')}>Dark</button>
        </div>
        <LiveFrame key={url} url={url} scale={0.55} />
        <a
          href={url}
          target="_blank"
          rel="noreferrer"
          aria-label={`Open ${url}`}
          style={{
            position: 'absolute', inset: 0, zIndex: 2,
          }}
        />
      </div>
    </div>
  );
}

function FsalBrowser() {
  const url = 'https://fsal.co.nz';
  return (
    <div className="browser">
      <div className="browser-bar">
        <div className="browser-dots"><span/><span/><span/></div>
        <div className="browser-url">fsal.co.nz</div>
      </div>
      <div className="browser-canvas">
        <LiveFrame url={url} scale={0.55} />
        <a
          href={url}
          target="_blank"
          rel="noreferrer"
          aria-label="Open fsal.co.nz"
          style={{ position: 'absolute', inset: 0, zIndex: 2 }}
        />
      </div>
    </div>
  );
}

function Portfolio() {
  return (
    <section className="section" id="work">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="section-kicker">— 04 / Selected work</div>
            <h2 className="section-title">Recently <em>shipped.</em></h2>
          </div>
          <div className="section-kicker" style={{maxWidth: 280}}>
            Two Auckland businesses, two different briefs. Same one-week turnaround.
          </div>
        </div>

        <div className="portfolio-item reveal">
          <div className="portfolio-info">
            <div className="portfolio-thumb live">Live · 2 versions</div>
            <h3>Ace Plumbing &amp; Heating</h3>
            <div className="mono-meta">
              <span>Avondale, Auckland</span><i>·</i>
              <span>Trade services</span><i>·</i>
              <span>Light + dark</span>
            </div>
            <p>
              Plumbing and gasfitting business. We built two design versions as a
              side-by-side test — a clean light variant and a confident dark one —
              so the client could choose which fit their voice.
            </p>
            <div className="portfolio-links">
              <a className="portfolio-link" href="https://ace2.brucedigital.org" target="_blank" rel="noreferrer">
                ace2.brucedigital.org →
              </a>
              <a className="portfolio-link" href="https://ace.brucedigital.org" target="_blank" rel="noreferrer">
                ace.brucedigital.org →
              </a>
            </div>
          </div>
          <AceBrowser />
        </div>

        <div className="portfolio-item reveal" style={{gridTemplateColumns: '1.4fr 1fr'}}>
          <FsalBrowser />
          <div className="portfolio-info">
            <div className="portfolio-thumb live">Live · in progress</div>
            <h3>Bruce Financial Services</h3>
            <div className="mono-meta">
              <span>Auckland</span><i>·</i>
              <span>Financial advisory (FSAL)</span>
            </div>
            <p>
              Independent financial advisory firm. The brief was clarity — cutting
              through the jargon and helping clients feel at ease before they ever
              pick up the phone.
            </p>
            <div className="portfolio-links">
              <a className="portfolio-link" href="https://fsal.co.nz" target="_blank" rel="noreferrer">
                fsal.co.nz →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Portfolio = Portfolio;