/* Portfolio — compact, single featured live site, real screenshot */

function Portfolio() {
  return (
    <section id="portfolio" className="portfolio">
      <div className="container">
        <div className="section-head" style={{maxWidth: 720}}>
          <span className="eyebrow">Previous work</span>
          <h2>A site we've <span className="h-accent">built</span>.</h2>
          <p className="lead">A live site we built for one half of the team — built and hosted exactly the way we'd build yours.</p>
        </div>

        <a className="portfolio-featured" href="https://shatadru.in" target="_blank" rel="noopener">
          <div className="portfolio-featured-frame">
            <div className="browser-bar">
              <span className="browser-dot" style={{background: "#FF5F57"}}></span>
              <span className="browser-dot" style={{background: "#FEBC2E"}}></span>
              <span className="browser-dot" style={{background: "#28C840"}}></span>
              <span className="browser-url">shatadru.in</span>
            </div>
            <div className="portfolio-featured-photo" />
          </div>
          <div className="portfolio-featured-meta">
            <span className="portfolio-live-tag"><span className="portfolio-live-dot" /> Live site</span>
            <h3>shatadru.in</h3>
            <p>A custom portfolio site with a terminal-inspired layout, animated live-system widgets, and a switchable light/dark theme. Built, hosted, and maintained the way we'd build yours.</p>
            <div className="portfolio-featured-actions">
              <span className="btn btn-primary btn-sm">
                <i data-lucide="external-link" style={{width: 14, height: 14, strokeWidth: 2}}></i>
                Visit site
              </span>
            </div>
          </div>
        </a>
      </div>
      <style>{`
        .portfolio { background: var(--paper-warm); padding-top: 64px; padding-bottom: 64px; }
        @media (max-width: 760px) { .portfolio { padding-top: 48px; padding-bottom: 48px; } }

        .portfolio-featured {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          max-width: 1040px;
          margin: 0 auto;
          background: var(--surface);
          border-radius: var(--r-xl);
          overflow: hidden;
          box-shadow: 0 4px 14px rgba(20,20,20,0.06);
          border: 1px solid var(--border);
          text-decoration: none;
          color: inherit;
          transition: box-shadow var(--dur-base) var(--ease-out-soft),
                      transform var(--dur-base) var(--ease-out-soft);
        }
        .portfolio-featured:hover {
          box-shadow: 0 18px 40px rgba(20,20,20,0.12);
          transform: translateY(-3px);
        }
        @media (max-width: 860px) { .portfolio-featured { grid-template-columns: 1fr; } }

        .portfolio-featured-frame {
          background: #0a0d12;
          padding: 10px 10px 0 10px;
          display: flex;
          flex-direction: column;
        }
        .browser-bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
        .browser-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
        .browser-url {
          font-family: var(--font-mono, monospace);
          font-size: 11px;
          color: rgba(255,255,255,0.55);
          margin-left: 12px;
          letter-spacing: 0.02em;
        }
        .portfolio-featured-photo {
          flex: 1;
          min-height: 280px;
          background-image: url("shatadru-preview.png");
          background-size: cover;
          background-position: top center;
          border-radius: var(--r-sm) var(--r-sm) 0 0;
        }
        @media (max-width: 860px) {
          .portfolio-featured-photo { min-height: 220px; aspect-ratio: 16 / 10; }
        }

        .portfolio-featured-meta {
          padding: 28px 32px 30px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          justify-content: center;
        }
        .portfolio-live-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-body);
          font-weight: 700;
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--primary);
          align-self: flex-start;
        }
        .portfolio-live-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--primary);
          animation: portfolioLivePulse 2s ease-in-out infinite;
        }
        @keyframes portfolioLivePulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(15, 140, 95, 0.45); }
          50%      { box-shadow: 0 0 0 6px rgba(15, 140, 95, 0); }
        }
        .portfolio-featured-meta h3 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 28px;
          line-height: 1.05;
          margin: 4px 0 4px;
          color: var(--ink);
          letter-spacing: -0.03em;
        }
        .portfolio-featured-meta p {
          font-size: 14.5px;
          line-height: 1.6;
          color: var(--ink-soft);
          margin: 0 0 14px;
        }
        .portfolio-featured-actions {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

window.Portfolio = Portfolio;