// jsx/About.jsx: the "About" page: a short, personable founder intro for Luke.
// Reuses shared TopNav / Closing / Footer; only the hero, bio block and the
// "Direct / Sceptical / Practical" trio are new. Styling is namespaced `ab-`.
// Editorial paper look; the portrait carries the brand's black + offset-magenta
// framing (echoes the ZMark shadow) so the page feels of-a-piece with the rest
// of the site. Console-first positioning: Zarco is one product, run by one
// person, not a studio.

// Compact local copy of App.jsx's PartnerMark (official Claude logomark path).
// Can't import cross-file in this no-build setup, so it's replicated here for
// the small "Registered partner" credential near the bio signature.
function ClaudeMark({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor"
      aria-hidden="true" focusable="false">
      <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
    </svg>
  );
}

function About() {
  const principles = [
    { k: "Direct",    d: "You deal with the person who built Zarco, not a chain of account managers passing your question along." },
    { k: "Sceptical", d: "A cybersecurity background means testing before trusting. Nothing ships on faith, and nothing goes live untested." },
    { k: "Practical", d: "Real systems your team actually uses, wired into the tools you already run: not prototypes that gather dust." },
  ];
  return (
    <React.Fragment>
      <section className="section ab-hero" id="top">
        <div className="shell">
          <div className="chapter-mark">Zarco / About</div>
          <h1 className="display ab-title">The <em>person</em> behind the product.</h1>
          <p className="lede ab-lede">Zarco is built and run by Luke Burywood. He started the company to close the gap between what AI can do and what most businesses actually get from it.</p>
        </div>
      </section>

      <section className="section ab-bio">
        <div className="shell ab-bio-grid">
          <div className="ab-portrait-wrap">
            <img
              className="ab-portrait"
              src="assets/luke-portrait.jpg"
              width="1106" height="1422"
              alt="Luke Burywood, founder of Zarco"
            />
            <div className="ab-portrait-cap mono">Luke Burywood · Founder</div>
          </div>
          <div className="ab-prose">
            <p>Most businesses don't have an AI capability problem. The models are good enough for real work already. What's usually missing is the wiring: nobody has sat down and built AI around how the business actually operates, the tools it already uses, and the approvals it needs. That's why so many businesses have tried AI and got very little back.</p>
            <p><strong>Luke Burywood</strong> started Zarco so a business could hire the employee it's been missing, rather than buy another piece of software: something that reads the inbox, chases the invoice, drafts the update, and checks with you before it acts on anything that matters. He came to AI from a career in cybersecurity, where "it should be fine" is never a good enough answer. That shows in how Zarco is put together: sceptical of what a demo promises, rigorous about what can go wrong, with approvals and an audit trail built in from day one.</p>
            <p>Before the Console there were systems built for other people: a recruitment AI suite, a booking platform, internal tools that are still running.</p>
            <p>Zarco stays small on purpose. When something needs building, checking or fixing, you deal with the person who built the product end to end, not whoever happens to be free on the support rota that day.</p>
            <div className="ab-sign">
              <span className="ab-sign-name">Luke Burywood</span>
              <span className="ab-sign-role mono">Founder, Zarco</span>
              <a className="ab-sign-link" href="https://www.linkedin.com/company/zarco-ai">LinkedIn →</a>
            </div>
            <div className="ab-credential" role="img" aria-label="Zarco is a Registered partner in the Claude Partner Network">
              <ClaudeMark className="ab-credential-mark" />
              <span className="ab-credential-text">Registered partner · Claude Partner Network</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section tinted ab-principles">
        <div className="shell">
          <div className="chapter-mark">How we work</div>
          <div className="ab-principles-grid">
            {principles.map((p) => (
              <div key={p.k} className="ab-principle">
                <div className="ab-principle-k">{p.k}</div>
                <p className="ab-principle-d">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

const aboutCss = `
.ab-hero { padding: clamp(72px, 12vh, 132px) 0 clamp(36px, 5vh, 60px); }
.ab-title { font-size: clamp(44px, 7vw, 84px); max-width: 14ch; }
.ab-lede { margin-top: clamp(20px, 3vw, 30px); max-width: 560px; }

.ab-bio { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 96px); }
.ab-bio-grid {
  display: grid; grid-template-columns: minmax(300px, 360px) 1fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.ab-portrait-wrap { position: relative; }
.ab-portrait {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1106 / 1422; object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--ink-04);
  box-shadow: 14px 14px 0 -1px var(--magenta), 0 30px 60px -38px rgba(14,14,14,0.42);
}
.ab-portrait-cap {
  margin-top: 18px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-40);
}

.ab-prose { max-width: 60ch; }
.ab-prose p {
  font-size: clamp(16px, 1.45vw, 18px); line-height: 1.65;
  color: var(--ink-80); margin: 0 0 20px; text-wrap: pretty;
}
.ab-prose p:last-of-type { margin-bottom: 0; }
.ab-prose strong { font-weight: 600; color: var(--ink); }
.ab-sign {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ink-10);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.ab-sign-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ab-sign-role { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-40); }
.ab-sign-link { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--magenta); text-decoration: none; }
.ab-sign-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.ab-credential { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; }
.ab-credential-mark { width: 17px; height: 17px; color: #D97757; flex-shrink: 0; } /* official Claude brand colour */
.ab-credential-text { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }

.ab-principles-grid {
  margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ink-10);
  border: 1px solid var(--ink-10); border-radius: var(--radius-md); overflow: hidden;
}
.ab-principle { background: var(--paper); padding: 32px 28px; }
.ab-principle-k {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 12px;
}
.ab-principle-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); flex: none; }
.ab-principle-d { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }

@media (max-width: 860px) {
  .ab-bio-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-portrait-wrap { max-width: 340px; }
  .ab-portrait { box-shadow: 10px 10px 0 -1px var(--magenta), 0 20px 40px -30px rgba(14,14,14,0.42); }
  .ab-principles-grid { grid-template-columns: 1fr; }
}
`;

window.About = About;
window.aboutCss = aboutCss;
