// proof.jsx - honest proof section (real GitHub portfolio) + founder bio

function CaseStudies() {
  return (
    <section className="section" id="results">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">Recent delivery proof</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              Legacy pipeline mess<br />
              to <em>reliable delivery.</em>
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            Latest engagement: Denmark fintech contractor (shipped May 2026).
            We focus on measurable operational wins and pragmatic modernization,
            not vanity rewrites.
          </p>
        </div>

        <div className="sb-proof-card">
          <div className="sb-proof-metrics">
            <div>
              <span className="kicker">Pipeline template build</span>
              <p><strong>10m to 7m 20s</strong> (-27%)</p>
            </div>
            <div>
              <span className="kicker">Delivery model</span>
              <p><strong>Classic to YAML</strong> multi-stage, multi-env</p>
            </div>
            <div>
              <span className="kicker">Azure infra spend</span>
              <p><strong>EUR5k to EUR2.5k</strong> (-50%)</p>
            </div>
          </div>
          <ul className="sb-proof-list">
            <li>Pipeline audits and CI/CD optimization for practical throughput gains</li>
            <li>Legacy Azure DevOps classic pipeline migration to YAML</li>
            <li>Multi-stage and multi-environment release setup with safer rollouts</li>
            <li>Resource right-sizing and cleanup to reduce cloud spend</li>
          </ul>
        </div>

        {/* Honest note about client cases */}
        <aside className="sb-cases-note">
          <span className="chip">Client specifics under NDA</span>
          <p>
            Named case studies are shared privately as approvals allow. On calls
            we can walk through architecture decisions, migration approach, and
            before/after metrics in more detail.
          </p>
        </aside>
      </div>
    </section>
  );
}

function Founder({ onCTA }) {
  return (
    <section className="section section--alt" id="founder">
      <div className="wrap sb-founder-wrap">
        <div className="sb-founder-photo-lg" style={{ overflow: "hidden" }}>
          <img
            src="assets/founder-portrait.png"
            alt="Saba Gotsiridze founder portrait"
            draggable={false}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              display: "block",
              borderRadius: "inherit",
            }}
          />
        </div>

        <div className="sb-founder-text">
          <span className="eyebrow">About</span>
          <h2 className="h1" style={{ marginTop: 18, marginBottom: 24 }}>
            <em>One name</em> on every<br />invoice and every PR.
          </h2>

          <div className="sb-founder-bio">
            <p>
              I'm <strong>Saba Gotsiridze</strong> - software engineer with 7+
              years building production systems in fintech, and the founder of
              Skybridge. I started this studio after watching capable teams
              lose entire quarters on broken pipelines and stalled
              modernization projects. Work that never needed to stall.
            </p>
            <p>
              My stack is .NET, Azure, microservices, CQRS, gRPC,
              message-driven architectures - the patterns banks and payment
              platforms actually run on. Open source on{" "}
              <a href="https://github.com/gotsiridzes" target="_blank" rel="noreferrer" className="sb-link-inline">
                GitHub
              </a>; long-form on{" "}
              <a href="https://www.linkedin.com/in/gotsiridzes/" target="_blank" rel="noreferrer" className="sb-link-inline">
                LinkedIn
              </a>.
            </p>
            <p>
              When you hire Skybridge, you talk to me. I do the audit, I write
              the SOW, and I post daily updates in your preferred channel
              (Slack, Teams, email, or Jira). For larger scopes I bring in a
              small bench of senior engineers I've worked with for years -
              you'll meet them before they touch code.
            </p>
            <p>
              <strong>No account managers. No offshore handoffs. No bait-and-switch.</strong>
            </p>
          </div>

          <div className="sb-founder-stats">
            <div>
              <span className="sb-fs-num">7<span>+</span></span>
              <span className="kicker">years in fintech</span>
            </div>
            <div>
              <span className="sb-fs-num">26</span>
              <span className="kicker">public .NET repos</span>
            </div>
            <div>
              <span className="sb-fs-num">1<span>:1</span></span>
              <span className="kicker">work directly with founder</span>
            </div>
          </div>

          <div className="sb-founder-actions">
            <button className="btn btn--primary" onClick={onCTA}>
              Book a 30-min call
              <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="mailto:hello@skybridgesystems.io">
              hello@skybridgesystems.io
            </a>
          </div>

          <div className="sb-founder-trust">
            <span className="chip">Tbilisi · CET-aligned hours</span>
            <span className="chip">NDA on request</span>
            <span className="chip">Email-first, no cold-call pressure</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const proofStyles = document.createElement("style");
proofStyles.textContent = `
  .sb-proof-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }
  .sb-proof-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line);
  }
  .sb-proof-metrics p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
  }
  .sb-proof-metrics strong { color: var(--ink); }
  .sb-proof-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--ink-2);
    font-size: 14px;
  }
  .sb-proof-list li::marker { color: var(--bridge-red); }
  @media (max-width: 720px) {
    .sb-proof-metrics { grid-template-columns: 1fr; }
  }

  .sb-cases-note {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 20px 24px;
    border-left: 3px solid var(--bridge-red);
    background: var(--paper-2);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .sb-cases-note .chip { flex-shrink: 0; margin-top: 2px; }
  .sb-cases-note p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 70ch;
  }

  /* Founder (unchanged from earlier) */
  .sb-founder-wrap {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  @media (max-width: 900px) { .sb-founder-wrap { grid-template-columns: 1fr; } }
  .sb-founder-photo-lg { aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .sb-founder-bio {
    display: flex; flex-direction: column; gap: 14px;
    font-size: 16px; color: var(--ink-2); line-height: 1.6;
    max-width: 60ch;
  }
  .sb-founder-bio strong { color: var(--ink); }
  .sb-link-inline { color: var(--bridge-red); border-bottom: 1px solid currentColor; }
  .sb-founder-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin: 32px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .sb-founder-stats > div {
    padding: 22px 16px 22px 0;
    display: flex; flex-direction: column; gap: 6px;
    border-right: 1px solid var(--line);
  }
  .sb-founder-stats > div:last-child { border-right: 0; padding-left: 20px; }
  .sb-founder-stats > div:nth-child(2) { padding-left: 20px; }
  .sb-fs-num {
    font-family: var(--f-serif); font-size: 48px; line-height: 1;
    color: var(--bridge-red); letter-spacing: -0.01em;
  }
  .sb-fs-num span { font-size: 28px; color: var(--bridge-red); opacity: 0.7; }
  .sb-founder-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .sb-founder-trust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
  @media (max-width: 560px) {
    .sb-founder-stats { grid-template-columns: 1fr; }
    .sb-founder-stats > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0 !important; }
    .sb-founder-stats > div:last-child { border-bottom: 0; }
  }
`;
document.head.appendChild(proofStyles);

Object.assign(window, { CaseStudies, Founder });