// hero.jsx - hero + trust strip for Skybridge

function Hero({ variant = "founder", onCTA }) {
  return (
    <section id="top" className="sb-hero">
      {/* Decorative grid */}
      <div className="sb-hero-grid" aria-hidden />

      <div className="wrap sb-hero-inner">
        <div className="sb-hero-copy">
          <span className="eyebrow">Skybridge · .NET &amp; Azure specialists</span>

          {variant === "founder" ? (
            <h1 className="h-display">
              From legacy <em>.NET</em>
              <br />
              to reliable Azure
              <br />
              delivery.
            </h1>
          ) : variant === "metric" ? (
            <h1 className="h-display">
              We optimize<br />
              pipelines for <em>faster</em><br />
              reliable delivery.
            </h1>
          ) : (
            <h1 className="h-display">
              Bridge legacy<br />
              <em>.NET</em> to Azure.<br />
              End to end.
            </h1>
          )}

          <p className="lede">
            We fix broken CI/CD, modernize legacy <span className="mono">.NET Framework</span>{" "}
            stacks, and stand up Azure infrastructure your team can actually own.
            Fixed fee. 1-2 weeks. CET-aligned hours.
          </p>

          <div className="sb-hero-actions">
            <button className="btn btn--primary" onClick={onCTA}>
              Book a free 30-min audit
              <svg className="arrow" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <a className="btn btn--ghost" href="#services">
              See what we ship
            </a>
          </div>

          <ul className="sb-hero-bullets">
            <li>
              <CheckIcon />
              <span><strong>Fixed-fee</strong> · no surprise invoices</span>
            </li>
            <li>
              <CheckIcon />
              <span><strong>1-2 week</strong> delivery per engagement</span>
            </li>
            <li>
              <CheckIcon />
              <span><strong>No lock-in</strong> · you own the code &amp; pipelines</span>
            </li>
          </ul>
        </div>

        <aside className="sb-hero-aside" aria-label="Live snapshot">
          {/* Founder card */}
          <div className="sb-founder-card">
            <div className="sb-founder-photo">
              <img
                src="assets/founder-portrait.png"
                alt="Saba Gotsiridze founder portrait"
                draggable={false}
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            </div>
            <div className="sb-founder-meta">
              <span className="kicker">Talk to the engineer</span>
              <h3 className="h3" style={{ marginTop: 6 }}>You'll be working with Saba, not a sales rep.</h3>
              <p className="body-muted" style={{ fontSize: 14, marginTop: 8 }}>
                Software engineer · 7+ years in fintech. Latest engagement:
                Denmark fintech contractor, shipped in May 2026.
              </p>
              <div className="sb-founder-links">
                <a href="#founder">Read bio →</a>
                <a href="https://www.linkedin.com/in/gotsiridzes/" target="_blank" rel="noreferrer">LinkedIn ↗</a>
                <a href="https://github.com/gotsiridzes" target="_blank" rel="noreferrer">GitHub ↗</a>
              </div>
            </div>
          </div>

          {/* Live metric */}
          <div className="sb-live-card">
            <header>
              <span className="kicker">Latest engagement · Fintech, Denmark</span>
              <span className="chip chip--red">Shipped · May 2026</span>
            </header>
            <div className="sb-live-grid">
              <Metric label="Pipeline template build" before="10m" after="7m 20s" delta="-27%" />
              <Metric label="Delivery model" before="Classic pipelines" after="YAML multi-stage" delta="modernized" />
              <Metric label="Azure infra cost" before="€5k" after="€2.5k" delta="-50%" />
            </div>
            <div className="sb-live-foot mono">
              <span className="dot" /> classic to YAML · multi-stage, multi-env deployments
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

function Metric({ label, before, after, delta }) {
  return (
    <div className="sb-metric">
      <span className="sb-metric-label kicker">{label}</span>
      <div className="sb-metric-row">
        <span className="sb-metric-before">{before}</span>
        <svg width="20" height="14" viewBox="0 0 20 14" aria-hidden>
          <path d="M2 7h14m0 0-4-4m4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
        </svg>
        <span className="sb-metric-after">{after}</span>
      </div>
      <span className="sb-metric-delta">{delta}</span>
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden>
      <circle cx="9" cy="9" r="8" fill="var(--bridge-red-soft)" stroke="var(--bridge-red)" strokeWidth="1"/>
      <path d="m5.5 9.2 2.4 2.4L12.6 6.8" stroke="var(--bridge-red)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function TrustStrip() {
  // Real, recognizable tech stack names; rendered as wordmarks to avoid brand-logo recreation.
  const stack = [
    { name: ".NET 10", note: "Modern" },
    { name: "Azure", note: "Cloud" },
    { name: "Azure DevOps", note: "CI/CD" },
    { name: "GitHub Actions", note: "CI/CD" },
    { name: "Terraform", note: "IaC" },
    { name: "Docker", note: "Build" },
    { name: "Kubernetes", note: "Runtime" },
  ];
  return (
    <section className="sb-trust">
      <div className="wrap">
        <div className="sb-trust-head">
          <span className="kicker">Daily working stack</span>
          <span className="sb-trust-line" />
        </div>
        <ul className="sb-trust-grid">
          {stack.map((s) => (
            <li key={s.name} className="sb-trust-item">
              <span className="sb-trust-name">{s.name}</span>
              <span className="sb-trust-note">{s.note}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// Component-scoped styles
const heroStyles = document.createElement("style");
heroStyles.textContent = `
  .sb-hero {
    position: relative;
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(48px, 7vw, 96px);
    overflow: hidden;
  }
  .sb-hero-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
  }
  .sb-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .sb-hero-copy { padding-top: 16px; }
  .h-display { margin-top: 24px; }
  .sb-hero-copy .lede { margin-top: 28px; }
  .sb-hero-actions {
    display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap;
  }
  .sb-hero-bullets {
    list-style: none; padding: 0; margin: 36px 0 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .sb-hero-bullets li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14.5px; color: var(--ink-2);
  }
  .sb-hero-bullets strong { color: var(--ink); font-weight: 600; }

  .sb-hero-aside {
    display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 96px;
  }

  /* Founder card */
  .sb-founder-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 30px -18px rgba(0,0,0,0.18);
  }
  [data-theme="technical"] .sb-founder-card {
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 30px -18px rgba(0,0,0,0.45);
  }
  .sb-founder-photo {
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
      radial-gradient(circle at 0 0, rgba(229,96,78,0.16), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(4,38,70,0.14), transparent 55%),
      var(--paper-2);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
  }
  .sb-founder-links {
    display: flex; gap: 14px; margin-top: 12px;
    font-size: 13px;
  }
  .sb-founder-links a { color: var(--bridge-red); }
  .sb-founder-links a:hover { text-decoration: underline; }

  /* Live metric card — always a dark accent panel (tokens don't flip with theme) */
  .sb-live-card {
    background: var(--surface-invert);
    color: var(--surface-invert-fg);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--surface-invert-line);
  }
  .sb-live-card header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .sb-live-card .kicker { color: var(--surface-invert-muted); }
  .sb-live-card .chip--red {
    background: rgba(229,96,78,0.16);
    color: #F0B5AC;
    border-color: rgba(229,96,78,0.4);
  }
  .sb-live-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 16px 0;
    border-top: 1px dashed var(--surface-invert-line);
    border-bottom: 1px dashed var(--surface-invert-line);
  }
  .sb-metric { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
  .sb-metric:not(:last-child) { border-right: 1px dashed var(--surface-invert-line); }
  .sb-metric-label { color: var(--surface-invert-muted); font-size: 10px; }
  .sb-metric-row {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--f-mono); font-size: 13px;
    color: var(--surface-invert-muted);
  }
  .sb-metric-after { color: var(--surface-invert-fg); font-weight: 500; }
  .sb-metric-delta {
    font-family: var(--f-mono); font-size: 11px;
    color: #6EE0A0; letter-spacing: 0.04em;
  }
  .sb-live-foot {
    padding-top: 14px;
    font-size: 11px;
    color: var(--surface-invert-muted);
    display: flex; align-items: center; gap: 8px;
  }
  .sb-live-foot .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #6EE0A0;
    animation: pulse-g 2s infinite;
  }
  @keyframes pulse-g {
    0%,100% { box-shadow: 0 0 0 4px rgba(110,224,160,0.16); }
    50% { box-shadow: 0 0 0 7px rgba(110,224,160,0); }
  }

  @media (max-width: 980px) {
    .sb-hero-inner { grid-template-columns: 1fr; }
    .sb-hero-aside { position: static; }
  }
  @media (max-width: 560px) {
    .sb-live-grid { grid-template-columns: 1fr; gap: 12px; }
    .sb-metric:not(:last-child) { border-right: 0; border-bottom: 1px dashed var(--surface-invert-line); padding-bottom: 12px; }
  }

  /* ────── Trust strip ────── */
  .sb-trust {
    padding-block: 48px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
  }
  .sb-trust-head {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px;
  }
  .sb-trust-line { flex: 1; height: 1px; background: var(--line); }
  .sb-trust-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }
  .sb-trust-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 12px;
    border-right: 1px solid var(--line);
    transition: background .2s var(--ease);
  }
  .sb-trust-item:hover { background: var(--paper); }
  .sb-trust-item:last-child { border-right: 0; }
  .sb-trust-name {
    font-family: var(--f-serif);
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .sb-trust-note {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  @media (max-width: 980px) {
    .sb-trust-grid { grid-template-columns: repeat(4, 1fr); }
    .sb-trust-item:nth-child(4n) { border-right: 0; }
    .sb-trust-item:nth-child(n+5) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 560px) {
    .sb-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-trust-item:nth-child(2n) { border-right: 0; }
    .sb-trust-item { border-top: 1px solid var(--line); }
    .sb-trust-item:nth-child(-n+2) { border-top: 0; }
  }
`;
document.head.appendChild(heroStyles);

Object.assign(window, { Hero, TrustStrip });