/* sections.jsx — section components for AI Ops Sprint landing */

function StatusPill({ children }) {
  return (
    <span className="tcsp-status">
      <span className="tcsp-pulse"></span>
      {children}
    </span>
  );
}

function HeroTerminal() {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const timers = [
      setTimeout(() => setStep(1), 600),
      setTimeout(() => setStep(2), 1400),
      setTimeout(() => setStep(3), 2400),
      setTimeout(() => setStep(4), 3400),
    ];
    return () => timers.forEach(clearTimeout);
  }, []);
  return (
    <div className="tcsp-hero-terminal" aria-hidden="true">
      <div className="tcsp-term-bar">
        <span className="tcsp-term-dot r"></span>
        <span className="tcsp-term-dot y"></span>
        <span className="tcsp-term-dot g"></span>
        <span className="tcsp-term-title">sprint — day 4 — production deploy</span>
      </div>
      <div className="tcsp-term-body">
        <span className="tcsp-term-line"><span className="tcsp-term-prompt">$</span>npm run deploy --client=acme</span>
        {step >= 1 && (
          <span className="tcsp-term-line tcsp-term-out">
            <span className="tcsp-term-comment">› deploying</span>{" "}
            <span className="tcsp-term-key">jira-classifier</span>{" "}
            <span className="tcsp-term-comment">to acme/prod…</span>
          </span>
        )}
        {step >= 2 && (
          <span className="tcsp-term-line tcsp-term-out">
            <span className="tcsp-term-comment">› routing accuracy on holdout:</span>{" "}
            <span className="tcsp-term-num">94.2%</span>
          </span>
        )}
        {step >= 3 && (
          <span className="tcsp-term-line tcsp-term-out">
            <span className="tcsp-term-comment">› est. analyst hours saved / qtr:</span>{" "}
            <span className="tcsp-term-num">312</span>
          </span>
        )}
        {step >= 4 && (
          <span className="tcsp-term-line">
            <span className="tcsp-term-prompt">✓</span>
            <span style={{ color: "#10b981" }}>shipped — handoff doc at </span>
            <span className="tcsp-term-str">/docs/sprint-day-4.md</span>
          </span>
        )}
        <span className="tcsp-term-line">
          <span className="tcsp-term-prompt">$</span>
          <span className="tcsp-term-cursor"></span>
        </span>
      </div>
    </div>
  );
}

function Hero({ variant, onBook, fromLinkedIn }) {
  return (
    <section className="tcsp-hero">
      <div className="tc-container">
        <div className="tcsp-hero-eyebrows">
          <span className="tcsp-eyebrow">AI Ops Sprint · 5 days</span>
          {variant === "status" && (
            <StatusPill>Accepting 2 clients · Q3 2026</StatusPill>
          )}
        </div>
        <h1>
          5 days. 3 production automations.<br />
          <span className="tcsp-h1-accent">Working software,</span> not slide decks.
        </h1>
        <p className="tcsp-hero-sub">
          For B2B SaaS ops teams and fund managers drowning in copy-paste. By Friday afternoon, three of your highest-leverage workflows ship to production — built, tested, deployed, documented. <strong>EUR 15K starting price. Two clients per quarter.</strong>
        </p>
        <div className="tcsp-hero-cta">
          <button className="tcsp-btn tcsp-btn-primary tcsp-btn-lg" onClick={onBook}>
            Book a 20-min assessment
            <span className="tcsp-btn-arrow">→</span>
          </button>
          {fromLinkedIn ? (
            <span className="tcsp-linkedin-hint">
              <span className="tcsp-arrow">↳</span> Came from LinkedIn — DM "SPRINT" got you here.
            </span>
          ) : (
            <a href="#receipts" className="tcsp-btn tcsp-btn-ghost tcsp-btn-lg">See three real receipts</a>
          )}
        </div>
        {variant === "terminal" && <HeroTerminal />}
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section className="tcsp-section">
      <div className="tc-container">
        <div className="tcsp-section-eyebrow">01 · The pattern</div>
        <h2>You've already paid for the strategy. You don't need another deck.</h2>
        <div className="tcsp-problem-grid">
          <div className="tcsp-problem-list">
            <div className="tcsp-problem-item">
              <p>You hired Big Four. You got back a <span className="tcsp-em">120-page strategy deck</span> with a maturity model and a roadmap. It is now on a shelf.</p>
            </div>
            <div className="tcsp-problem-item">
              <p>You stood up an internal automation working group. Nine months later the roadmap is the same and <span className="tcsp-em">nothing has shipped to production.</span></p>
            </div>
            <div className="tcsp-problem-item">
              <p>It's Monday morning. Your ops team is back to copy-pasting Jira tickets, classifying invoices by hand, and rebuilding the same LP report in Excel. Again.</p>
            </div>
          </div>
          <div className="tcsp-problem-list">
            <div className="tcsp-problem-item">
              <p style={{ color: "var(--tc-fg)", fontWeight: 500 }}>
                The Sprint is the opposite of all of that. One developer. Five days. Three things that work on Friday and are still working in November.
              </p>
            </div>
            <div className="tcsp-problem-item">
              <p>No discovery phase that becomes the project. No transformation programme. No "phase two" that never comes. Working software or you don't pay the second invoice.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatYouGet() {
  const items = [
    {
      day: "Day 1 — Monday",
      title: "Workflow audit + automation candidates",
      body: "Half-day on-site or remote. We walk every team that uses a keyboard. By end of day you have a ranked list of automation candidates with hours-saved estimates and a confidence score. We pick the top 3 together.",
    },
    {
      day: "Days 2–3 — Tuesday + Wednesday",
      title: "Three automations built and pushed to staging",
      body: "I write the code. Real code, in your repos, on a feature branch you own. Tests included. By Wednesday EOD, all three are running in your staging environment with sample data.",
    },
    {
      day: "Day 4 — Thursday",
      title: "Production deploy + handoff documentation",
      body: "Promote to prod with your engineer in the room. Cut handoff docs covering deploy, rollback, observability, and where to look when it breaks. Point of contact named for the support window.",
    },
    {
      day: "Day 5 — Friday",
      title: "Team training + 30-day support window opens",
      body: "90-minute training session for the team that will own each automation. The 30-day support window starts at 5pm Friday — bug fixes and tweaks land within 24 hours, no change orders.",
    },
  ];
  return (
    <section className="tcsp-section">
      <div className="tc-container">
        <div className="tcsp-section-eyebrow">02 · What ships</div>
        <h2>One week. Mapped to the calendar, not a Gantt chart.</h2>
        <p className="tcsp-section-lead">
          The Sprint is the same five days every time. No statement of work negotiation, no PMO. Here's exactly what happens.
        </p>
        <div className="tcsp-timeline">
          {items.map((it, i) => (
            <div key={i} className={"tcsp-tl-item" + (i === 1 ? " tcsp-tl-current" : "")}>
              <div className="tcsp-tl-day">{it.day}</div>
              <div className="tcsp-tl-title">{it.title}</div>
              <div className="tcsp-tl-body">{it.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Receipts() {
  return (
    <section
      id="receipts"
      className="tcsp-receipts is-visible"
    >
      <div className="tc-container">
        <div className="tcsp-receipts-eyebrow">Receipts · Last 18 months</div>
        <h2>Three numbers. No logos. The brevity is the credibility.</h2>
        <p className="tcsp-receipts-sub">
          Sprint clients are under standard mutual NDAs that cover client names. So no vanity logo wall here — just the line items.
        </p>
        <div className="tcsp-receipts-grid">
          <div className="tcsp-receipt">
            <div className="tcsp-receipt-num">€33<span className="tcsp-receipt-unit">K/yr</span></div>
            <div className="tcsp-receipt-label">Annual saved</div>
            <p className="tcsp-receipt-context">Document classification at a Madrid-based VC fund. Replaced two analysts' worth of LP-doc tagging with a small classifier shipped in three days.</p>
          </div>
          <div className="tcsp-receipt">
            <div className="tcsp-receipt-num">€100<span className="tcsp-receipt-unit">K+</span></div>
            <div className="tcsp-receipt-label">One-time saved</div>
            <p className="tcsp-receipt-context">Jira automation for a 180-person SaaS ops team. Replaced manual triage of 40K tickets/year. Live for 11 months, no incidents.</p>
          </div>
          <div className="tcsp-receipt">
            <div className="tcsp-receipt-num">72<span className="tcsp-receipt-unit">%</span></div>
            <div className="tcsp-receipt-label">IT cost cut</div>
            <p className="tcsp-receipt-context">SaaS audit + consolidation for a Series-B portfolio company. 31 tools down to 12. Cancelled before the renewal cliff.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Fit() {
  return (
    <section className="tcsp-section">
      <div className="tc-container">
        <div className="tcsp-section-eyebrow">03 · Fit check</div>
        <h2>The "no" column is the real trust-builder.</h2>
        <p className="tcsp-section-lead">
          The Sprint is built for a specific shape of company. Read both columns before you book. If you're on the right, please don't waste your half-hour.
        </p>
        <div className="tcsp-fit-grid">
          <div className="tcsp-fit-col tcsp-fit-yes">
            <div className="tcsp-fit-head">
              <span className="tcsp-fit-mark">✓</span>
              <span className="tcsp-fit-label">Yes — you're the customer</span>
            </div>
            <ul className="tcsp-fit-list">
              <li>50–500 person B2B SaaS with an in-house engineering team</li>
              <li>Ops teams drowning in copy-paste between Jira, Slack, Notion, Salesforce</li>
              <li>Fund managers with LP/IR friction — document classification, reporting, dealflow ingestion</li>
              <li>Anyone who hired Big Four and got a PDF</li>
              <li>You can name 3 workflows that should already be automated</li>
            </ul>
          </div>
          <div className="tcsp-fit-col tcsp-fit-no">
            <div className="tcsp-fit-head">
              <span className="tcsp-fit-mark">—</span>
              <span className="tcsp-fit-label">Probably not</span>
            </div>
            <ul className="tcsp-fit-list">
              <li>Pre-product-market-fit startups (you don't know your workflows yet)</li>
              <li>Agencies wanting to white-label the Sprint downstream</li>
              <li>Anyone shopping for a 6-month transformation programme</li>
              <li>Companies where IT and Ops haven't been in the same room in a year</li>
              <li>Procurement-led buyers who need 8 weeks for an MSA</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Booking({ onOpenModal, selectedDay, setSelectedDay, selectedTime, setSelectedTime }) {
  const days = [
    { name: "Mon", num: 4, slots: 3, dis: false },
    { name: "Tue", num: 5, slots: 1, dis: false },
    { name: "Wed", num: 6, slots: 0, dis: true },
    { name: "Thu", num: 7, slots: 4, dis: false },
  ];
  const times = ["09:30", "10:00", "11:30", "14:00", "15:30", "16:00"];
  const canBook = selectedDay !== null && selectedTime !== null;

  return (
    <section id="book" className="tcsp-booking">
      <div className="tc-container">
        <div className="tcsp-booking-grid">
          <div className="tcsp-booking-info">
            <div className="tcsp-booking-eyebrow">Pricing · Booking</div>
            <h2>Engagements start at €15K. Two clients this quarter.</h2>
            <p className="tcsp-booking-sub">
              Book a 20-minute free assessment. I'll review your current Jira / Slack / ops setup and tell you on the call whether the Sprint is a fit. No deck, no follow-up email sequence.
            </p>
            <div className="tcsp-booking-stats">
              <div className="tcsp-bs">
                <div className="tcsp-bs-num">€15K<span className="tcsp-bs-unit"> ↗</span></div>
                <div className="tcsp-bs-label">Starting price</div>
              </div>
              <div className="tcsp-bs">
                <div className="tcsp-bs-num">2<span className="tcsp-bs-unit"> / qtr</span></div>
                <div className="tcsp-bs-label">Capacity Q3 2026</div>
              </div>
            </div>
            <p className="tcsp-booking-foot">No multi-tier pricing. No "contact sales." 50% on signature, 50% on Friday handoff.</p>
          </div>

          <div className="tcsp-booking-card">
            <div className="tcsp-card-head">
              <span className="tcsp-card-title">cal.com/techconcepts/sprint</span>
              <a href="https://cal.com/techconcepts/sprint" target="_blank" rel="noopener noreferrer" className="tcsp-card-link">Open in cal.com →</a>
            </div>
            <div className="tcsp-cal-summary">
              <div className="tcsp-cal-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              </div>
              <div className="tcsp-cal-text">
                <h4>20-min Sprint assessment</h4>
                <p>Video call · CET timezone · Evgeny Goncharov</p>
              </div>
            </div>

            <div className="tcsp-cal-grid">
              {days.map((d) => (
                <button
                  key={d.num}
                  type="button"
                  className={
                    "tcsp-cal-day" +
                    (d.dis ? " is-disabled" : "") +
                    (selectedDay === d.num ? " is-selected" : "")
                  }
                  disabled={d.dis}
                  onClick={() => { setSelectedDay(d.num); setSelectedTime(null); }}
                >
                  <div className="tcsp-cal-day-name">{d.name} · May</div>
                  <div className="tcsp-cal-day-num">{d.num}</div>
                  <div className="tcsp-cal-day-slots">{d.dis ? "Booked" : `${d.slots} open`}</div>
                </button>
              ))}
            </div>

            <div className="tcsp-cal-times">
              {times.map((t) => (
                <button
                  key={t}
                  type="button"
                  className={"tcsp-cal-time" + (selectedTime === t ? " is-selected" : "")}
                  onClick={() => setSelectedTime(t)}
                  disabled={selectedDay === null}
                  style={selectedDay === null ? { opacity: 0.4, cursor: "not-allowed" } : {}}
                >
                  {t}
                </button>
              ))}
            </div>

            <button
              className="tcsp-card-cta"
              disabled={!canBook}
              onClick={() => onOpenModal({ day: selectedDay, time: selectedTime })}
            >
              {canBook ? `Continue · Mon May ${selectedDay} at ${selectedTime}` : "Pick a day and a time"}
              <span>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="tcsp-section">
      <div className="tc-container">
        <div className="tcsp-section-eyebrow">04 · Who runs this</div>
        <h2>One developer. Public GitHub. Public writing.</h2>
        <div className="tcsp-about-grid">
          <div className="tcsp-about-portrait">EG</div>
          <div className="tcsp-about-body">
            <p>
              I'm Evgeny Goncharov. I run TechConcepts out of Madrid. Before this I shipped infra at Yandex and ran an automation practice at EY. Now it's just me, fixed-price, full code ownership.rice, full code ownership.
            </p>
            <p>
              The Sprint sits on top of automation tools I run in production today: <strong>slack-jira-bot</strong> (issue triage from any channel), <strong>jira-classifier</strong> (the LLM router behind that €100K Jira number above), and <strong>fm_portal</strong> (LP-side document workflows for fund managers). All three are visible in my GitHub. So is most of the supporting code.
            </p>
            <p>
              I write monthly about what's actually shipping — not what's coming next. If the writing reads like the homepage, that's the point.
            </p>
            <div className="tcsp-about-links">
              <a href="https://www.linkedin.com/in/ai-jenya-go/" target="_blank" rel="noopener noreferrer">LinkedIn<span className="tcsp-arr">↗</span></a>
              <a href="https://techconcepts.org/blog" target="_blank" rel="noopener noreferrer">techconcepts.org/blog<span className="tcsp-arr">↗</span></a>
              <a href="https://github.com/jenyago" target="_blank" rel="noopener noreferrer">GitHub · jenyago<span className="tcsp-arr">↗</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniFooter() {
  return (
    <footer className="tcsp-footer">
      <div className="tc-container">
        <div className="tcsp-footer-row">
          <span className="tcsp-footer-brand">© 2026 Tech<b>Concepts</b> · Madrid</span>
          <div className="tcsp-footer-links">
            <a href="https://techconcepts.org/privacy">Privacy</a>
            <a href="https://techconcepts.org/terms">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Problem, WhatYouGet, Receipts, Fit, Booking, About, MiniFooter });