// Sections: Services, Experience, Process, Stack, Pricing, Testimonials, FAQ, Contact
const { useState: useStateS } = React;

function Services() {
  const items = [
  { n: '01', t: 'CI/CD & Release', d: 'Build pipelines that are fast, secure, and predictable. The best kind of boring.', l: ['GitLab pipelines, private runners', 'Reusable components catalog (auth, deploy, health, rollback)', 'Artifacts, environments, rollbacks', 'Secrets + least privilege'] },
  { n: '02', t: 'Kubernetes Platform', d: 'Cluster foundations to GitOps delivery, with sensible defaults and guardrails.', l: ['GKE / kubeadm setup, ingress, certs', 'Namespaces, RBAC, policies', 'Helm/Kustomize + ArgoCD'] },
  { n: '03', t: 'Streaming & Event Backbone', d: 'Production-ready Kafka clusters and the patterns around them — partitions, replication, retention, and consumer groups that won\'t bite you at 3am.', l: ['Kafka cluster sizing + topology', 'Topic design, ACLs, schema registry', 'Producer/consumer reliability patterns', 'Monitoring lag, throughput, broker health'] },
  { n: '04', t: 'Observability', d: 'Logs, metrics, and traces with dashboards that tell the truth — and alerts that don\'t cry wolf.', l: ['Centralized logging (BigQuery, ELK)', 'Alerting strategy + runbooks', 'Post-incident reviews'] },
  { n: '05', t: 'DevSecOps Uplift', d: 'Security that fits delivery: scanning, policies, and sane access patterns.', l: ['IaC + container scanning', 'SBOM basics, secure defaults', 'Hardening + audit trails'] },
  { n: '06', t: 'Hands-on Support', d: 'Pairing, troubleshooting, and unblocking the team when things get spicy.', l: ['Pipeline + deployment debugging', 'API support for engineering users', 'Docs, training, handover'] }];


  return (
    <section id="services" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">services</div>
            <h2>Pick one. Or combine into a full platform build.</h2>
            <p className="lede">
              Six areas we work in. Most engagements span two or three —
              an IaC cleanup that turns into a full GitOps build, or CI hardening that finds an observability gap.
            </p>
          </div>
          <div className="right">06 modules · choose your own</div>
        </div>

        <div className="services-grid">
          {items.map((it) =>
          <div className="service" key={it.n}>
              <div className="service-num">{it.n} / 06</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <ul>{it.l.map((x) => <li key={x}>{x}</li>)}</ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Experience() {
  const cases = [
  {
    t: 'Sandbox environment on GCP & Auth0',
    d: 'Stood up a sandbox on GCP and Auth0 with Terraform — networking, workloads, and auth configured so the environment mirrors prod\'s public APIs (same outward contracts, isolated stack). Clients now validate integrations end-to-end before touching prod.',
    chips: ['Terraform', 'GCP', 'Auth0', 'OIDC/OAuth', 'Sandbox'],
    meta: '2025'
  },
  {
    t: 'GitLab CI components library (ci-components)',
    d: 'Built a shared library of reusable YAML components — auth, deploy patterns, health checks, integration tests, rollback. Refactored pipelines across services to include and extend them instead of one-off scripts. Every service inherits the same 7-stage flow: pre · build_push · deploy · health-check · rollback · integration · backup.',
    chips: ['GitLab CI', 'YAML components', 'GKE', 'GCP', 'Templates'],
    meta: '2025 → 2026',
    link: 'https://gitlab.com/components2010244/components-ci/-/tree/main/components?ref_type=heads',
    featured: true
  },
  {
    t: 'Self-hosted Kafka cluster + dev-tailored UI',
    d: 'Replaced a Confluent Cloud setup with a self-hosted Kafka cluster sized for the team\'s real workload — brokers, ZooKeeper-less KRaft mode, schema registry, and ACLs. Paired it with a custom UI tailored to dev workflows: topic browsing, message replay, consumer-group lag, and one-click reset for sandboxes. Lower cost, full control, and tools the team actually wanted.',
    chips: ['Kafka', 'KRaft', 'Schema Registry', 'GKE', 'React UI'],
    meta: '2025 → 2026'
  },
  {
    t: 'Centralized logging: GKE → BigQuery',
    d: 'Implemented Cloud Logging\'s log router to deliver GKE container and system logs into BigQuery, with filters so only relevant streams land in the right datasets. Built parsed/curated tables for triage, dashboards, and archiving error-shaped events for postmortems.',
    chips: ['Cloud Logging', 'Log router', 'GKE', 'BigQuery', 'SQL'],
    meta: 'Jan–Apr 2026'
  },
  {
    t: 'Slack notifier in the deploy pipeline',
    d: 'Integrated a Slack Incoming Webhook into the health-check component: on successful QA health check, post a Block Kit message with a "View workload" link straight to the GKE console. Webhook stays in GitLab CI variables only — no secrets in repos.',
    chips: ['Slack webhooks', 'Block Kit', 'GitLab CI', 'bash/curl', 'GKE'],
    meta: 'Apr 2026'
  },
  {
    t: 'Pi5 cluster homelab',
    d: 'A 3-node Raspberry Pi 5 cluster (kubeadm) we run as a homelab — production-grade patterns at home for testing and prototyping. GitOps deploys, observability, the works. Where platform ideas get validated before bringing them to client work.',
    chips: ['Raspberry Pi 5', 'kubeadm', 'GitOps', 'Self-hosted'],
    meta: '2024 → ongoing'
  },
  {
    t: 'Engineering reporter (GitLab + Jira)',
    d: 'Python tool combining GitLab activity (commits, MRs, reviews) and Jira (JQL scope, story points, sprint context) into one report. Configurable rosters, identity aliases, Excel/HTML/Markdown exports, Jira-by-status stacked chart. One command replaces hand-rolled review spreadsheets.',
    chips: ['Python', 'pandas', 'GitLab API', 'Jira REST', 'Chart.js'],
    meta: 'Apr 2026'
  }];


  return (
    <section id="experience" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">experience · selected</div>
            <h2>Recent work, end-to-end.</h2>
            <p className="lede">Projects we scoped, built, and handed over with docs and runbooks the team actually uses.</p>
          </div>
          <div className="right">06 selected</div>
        </div>

        <div className="cases">
          {cases.map((c, i) =>
          <article className={`case ${c.featured ? 'case-featured' : ''}`} key={i}>
              <div className="case-idx">CASE / {String(i + 1).padStart(2, '0')}</div>
              <div>
                <h3>
                  {c.link ? <a href={c.link} target="_blank" rel="noopener" style={{ borderBottom: '1px dashed var(--accent)' }}>{c.t} <span style={{ fontSize: 11, color: 'var(--accent)' }}>↗</span></a> : c.t}
                </h3>
                <p>{c.d}</p>
                {c.featured &&
              <div style={{
                marginTop: 16,
                border: '1px solid var(--line-2)',
                borderRadius: 10,
                overflow: 'hidden',
                background: '#0a0e14'
              }}>
                    <div style={{
                  padding: '8px 12px',
                  borderBottom: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, color: 'var(--text-mute)'
                }}>
                      <span className="dot r"></span>
                      <span className="dot y"></span>
                      <span className="dot g"></span>
                      <span style={{ marginLeft: 8 }}>pipeline · 7 stages · all green</span>
                      <span style={{ marginLeft: 'auto', color: '#4ade80' }}>passed</span>
                    </div>
                    <div style={{ height: 140, overflow: 'hidden', display: 'flex' }}>
                      <img src="assets/pipeline-ci-components.png" alt="ci-components pipeline visualization showing 7 stages: pre, build_push, deploy, health-check, rollback, integration, backup" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
                    </div>
                  </div>
              }
                <div className="chips">
                  {c.chips.map((x) => <span className="chip" key={x}>{x}</span>)}
                </div>
              </div>
              <div className="case-meta">{c.meta}</div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function Process() {
  const steps = [
  { n: '01', t: 'Align', d: 'We define success metrics, scope, risks, and a delivery plan you can hand to your team.', l: ['Discovery call · 60 min', 'Written scope + estimate', 'Risk register'] },
  { n: '02', t: 'Build', d: 'Infrastructure and pipelines are versioned, reviewed, and repeatable. No one-off SSH magic.', l: ['Async-friendly cadence', 'PRs reviewed daily', 'Weekly demo'] },
  { n: '03', t: 'Hand over', d: 'Docs, runbooks, and a 30-day support window so the team owns it long-term.', l: ['Runbooks for top 5 incidents', 'Architecture doc', '30-day Slack support'] }];

  return (
    <section id="process" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">how we work</div>
            <h2>Simple process. Clear expectations. Documented outcomes.</h2>
          </div>
          <div className="right">3 phases</div>
        </div>
        <div className="process">
          {steps.map((s) =>
          <div className="step" key={s.n}>
              <div className="step-tag">phase {s.n}<div className="step-line"></div></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <ul>{s.l.map((x) => <li key={x}>{x}</li>)}</ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Stack() {
  const cats = [
  { name: 'Cloud', items: [['GCP', 'primary'], ['AWS', 'fluent'], ['Cloudflare', 'edge'], ['Auth0', 'identity']] },
  { name: 'Infra', items: [['Terraform', 'IaC'], ['Kafka', 'streaming'], ['Helm', 'charts'], ['Docker', 'always']] },
  { name: 'Runtime', items: [['Kubernetes', 'GKE/kubeadm'], ['ArgoCD', 'gitops'], ['Pi5 cluster', 'homelab'], ['kubeadm', 'self-host']] },
  { name: 'CI · Obs', items: [['GitLab CI', 'primary'], ['ci-components', 'reusable'], ['Datadog', 'apm'], ['BigQuery', 'logs']] }];

  return (
    <section id="stack" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">stack</div>
            <h2>Tooling we're fluent in.</h2>
            <p className="lede">Opinionated where it helps; pragmatic where it doesn't.</p>
          </div>
          <div className="right">no js framework wars</div>
        </div>
        <div className="stack-strip">
          <div className="stack-cats">
            {cats.map((c) =>
            <div className="stack-cat" key={c.name}>
                <div className="cat-name">{c.name}</div>
                <ul>
                  {c.items.map(([k, v]) =>
                <li key={k}><span>{k}</span><span>{v}</span></li>
                )}
                </ul>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function Pricing() {
  const plans = [
  {
    name: 'audit',
    t: 'Platform Audit',
    rate: '€2.2k', sub: 'fixed · 1 week',
    desc: 'A diagnostic on your current setup with concrete fixes ranked by impact.',
    bullets: ['Full review of CI/CD + infra', 'Risk + cost report', 'Prioritized 90-day plan', '1-hour walkthrough call'],
    cta: 'request audit'
  },
  {
    name: 'project',
    t: 'Build / Migration',
    rate: '€450', sub: 'from / day · ~4–8 weeks',
    desc: 'Scoped builds: a CI overhaul, K8s foundation, GitOps setup, or a full platform migration.',
    bullets: ['Async-first, weekly demos', 'PRs reviewed within 24h', 'Runbooks + handover docs', '30-day post-launch support'],
    cta: 'discuss project',
    featured: true
  },
  {
    name: 'fractional',
    t: 'Fractional DevOps',
    rate: '€3.5k', sub: 'from / month · 2 days/wk',
    desc: 'Ongoing capacity for teams that need a senior infra brain in the room without a full hire.',
    bullets: ['2 days/week, your sprint cadence', 'On-call advisory included', 'Monthly platform review', '3-month minimum'],
    cta: 'check availability'
  }];

  return (
    <section id="pricing" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">engagements</div>
            <h2>Three ways to work together.</h2>
            <p className="lede">All engagements come with documentation, async-friendly comms, and zero surprise invoices.</p>
          </div>
          <div className="right">eur · ex. vat</div>
        </div>
        <div className="pricing">
          {plans.map((p) =>
          <div className={`price ${p.featured ? 'featured' : ''}`} key={p.name}>
              <div className="price-name">{p.name}</div>
              <h3>{p.t}</h3>
              <div className="price-rate"><b>{p.rate}</b> {p.sub}</div>
              <p style={{ color: 'var(--text-dim)', fontSize: 13.5, lineHeight: 1.6 }}>{p.desc}</p>
              <ul>{p.bullets.map((x) => <li key={x}>{x}</li>)}</ul>
              <a className="btn btn-cta" href="#contact">{p.cta} <span className="arrow">→</span></a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Testimonials() {
  const quotes = [
  {
    q: 'Florian demonstrated qualities that are difficult to teach: tenacity, reliability, and a strong sense of ownership. He quickly became someone the team could rely on, whether supporting cloud infrastructure, handling DevOps tasks, or stepping in whenever help was needed.',
    n: 'Gustavo Alfaro', r: 'Enterprise Software Architect · MTN Global', a: 'GA'
  },
  {
    q: 'Florian se distingue par une compréhension avancée des principes DevOps, qu\u2019il sait appliquer de manière pertinente aussi bien sur le plan théorique que pratique. Son engagement, sa rigueur et son attitude proactive font de lui un profil très prometteur, capable de contribuer à des projets DevOps exigeants.',
    n: 'Fall Lewis Yomba', r: 'Senior Technology Instructor · MCT, Microsoft & AWS', a: 'FL'
  }];

  return (
    <section id="testimonials" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">what teams say</div>
            <h2>The receipts.</h2>
          </div>
          <div className="right">verified on request</div>
        </div>
        <div className="testimonials">
          {quotes.map((q, i) =>
          <div className="quote" key={i}>
              <div className="quote-text">{q.q}</div>
              <div className="quote-author">
                <div className="avatar">{q.a}</div>
                <div>
                  <div className="author-name">{q.n}</div>
                  <div className="author-role">{q.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = useStateS(0);
  const items = [
  { q: 'Are you a one-person operation or an agency?',
    a: 'We are a mixed team of different levels with trusted partners for frontend, ui design and other needs. Lean by design — that keeps overhead low and decisions fast. For larger builds we bring in trusted collaborators (frontend, security, SRE) on a per-project basis, with clear scoping so you always know who owns what.' },
  { q: 'What time zones do you cover?',
    a: 'We’re based in Europe (CET) and overlap mornings US East, full-day with EU teams. Async-first by default — Slack/Linear/email, not back-to-back meetings.' },
  { q: 'Do you work with startups or just larger companies?',
    a: 'Both. Most engagements are seed-to-Series-B startups that need senior infra without the cost of a full hire, plus the occasional larger team that wants outside eyes on a specific platform problem.' },
  { q: 'Will our team be able to maintain what you build?',
    a: 'That\'s the whole point. Everything is in version control, code-reviewed by your team during the build, and shipped with runbooks for the top failure modes. No lock-in, no mystery scripts.' },
  { q: 'Do you do on-call or 24/7 support?',
    a: 'Not as primary on-call — we’re a small team. But we include a 30-day post-launch support window on every project, and Fractional engagements include advisory on-call (you call us when something\'s on fire and we help you debug it, not pager rotation).' },
  { q: 'How do we get started?',
    a: 'Email us with what you\'re building and where it hurts. We\'ll reply within a business day with either a 30-min discovery call slot or a pointer to someone better-suited if it\'s not our wheelhouse.' }];

  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="mono-label">faq</div>
            <h2>The questions teams actually ask.</h2>
          </div>
          <div className="right">06 q · expand to read</div>
        </div>
        <div className="faq">
          {items.map((it, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span><span style={{ color: 'var(--text-mute)', fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, marginRight: 12 }}>{String(i + 1).padStart(2, '0')}</span>{it.q}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  return (
    <section id="contact" className="section">
      <div className="container">
        <div className="contact-wrap">
          <div>
            <div className="mono-label">contact</div>
            <h2>Tell us what you're shipping.</h2>
            <p>We'll reply with what we'd do first — usually within a business day. No sales funnel, no nurture sequence.</p>
            <div className="contact-list">
              <a className="contact-row" href="mailto:hello@flochai.com">
                <div className="glyph">@</div>
                <div>
                  <div className="label">email · fastest</div>
                  <div className="val">hello@flochai.com</div>
                </div>
              </a>
              <a className="contact-row" href="https://www.linkedin.com/in/flochai/" target="_blank" rel="noopener">
                <div className="glyph">in</div>
                <div>
                  <div className="label">linkedin</div>
                  <div className="val">linkedin.com/in/flochai</div>
                </div>
              </a>
              <a className="contact-row" href="https://gitlab.com/flochai" target="_blank" rel="noopener">
                <div className="glyph">{'</>'}</div>
                <div>
                  <div className="label">gitlab</div>
                  <div className="val">gitlab.com/flochai</div>
                </div>
              </a>
            </div>
          </div>
          <div className="contact-card-side">
            <div><span className="comment">{'// availability'}</span></div>
            <div><span className="k">status</span> = <span className="v accent">"open"</span></div>
            <div><span className="k">next_slot</span> = <span className="v">"q3 2026"</span></div>
            <div><span className="k">timezone</span> = <span className="v">"CET (UTC+1)"</span></div>
            <div><span className="k">overlap</span> = <span className="v">["EU", "US East AM"]</span></div>
            <div style={{ marginTop: 14 }}><span className="comment">{'// response time'}</span></div>
            <div><span className="k">email</span> = <span className="v">"&lt; 1 business day"</span></div>
            <div><span className="k">discovery_call</span> = <span className="v">"60 min"</span></div>
            <div style={{ marginTop: 14 }}><span className="comment">{'// languages'}</span></div>
            <div><span className="k">spoken</span> = <span className="v">["en", "fr"]</span></div>
            <div><span className="k">written</span> = <span className="v">["bash", "hcl", "yaml", "go"]</span></div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Services, Experience, Process, Stack, Pricing, Testimonials, FAQ, Contact });