/* global React, UmIcon, PSLabel, PageNav, PageFooter, PageCTA, BackLink, PMDS_AI_IMPLEMENTATION, PricingTiers */

/* ===========================================================
   AI IMPLEMENTATION — Detail / sales page for done-for-you service
   ============================================================ */

const AI_IMPL_INCLUDED = [
  { ico: "◇", t: "Claude Code installation", d: "Full CLI install + Anthropic account configured. We verify it from the terminal." },
  { ico: "◐", t: "VS Code + Claude extension", d: "Editor installed, extension activated, sidebar signed in, defaults tuned." },
  { ico: "▣", t: "Infrastructure pack deploy", d: "Scripts, skills, hooks, .env, SETUP_GUIDE.pdf — all extracted to the right places." },
  { ico: "◭", t: "Telegram bot creation", d: "Talk to @BotFather, generate token, paste into .env, verify /start." },
  { ico: "◫", t: "Google Sheets API", d: "OAuth credentials, authorize_sheets.py run, token.json saved, connection verified." },
  { ico: "✓", t: "End-to-end testing", d: "diagnostic.py, /test-scraper, /test-sheets — every system green before handoff." },
  { ico: "▶", t: "30-min walkthrough", d: "Live screen-share. We show every command and answer questions in real time." },
  { ico: "✉", t: "7 days email support", d: "Stuck on something post-handoff? We're a message away. No ticket queue." },
];

const AI_IMPL_TIMELINE = [
  {
    day: "Day 1",
    hours: "Morning",
    title: "Initial Setup",
    duration: "3–4 hours",
    body: "We install Claude Code + VS Code, create your Telegram bot with BotFather, set up Google Sheets API credentials, and wire up every environment variable in your .env. Your private infrastructure pack is deployed to your Desktop.",
  },
  {
    day: "Day 1–2",
    hours: "Through next morning",
    title: "Testing & Optimization",
    duration: "Async",
    body: "We run comprehensive tests on every automation feature, fix any auth issues, optimize performance, and reproduce a few real lead-flow scenarios end-to-end. Nothing handed over until everything's green.",
  },
  {
    day: "Day 2",
    hours: "Booked slot",
    title: "Handoff & Training",
    duration: "30 minutes",
    body: "We walk you through your live automation, demo every command (/help, /test-scraper, /test-sheets, lead capture flow), and answer questions. You leave the call running the system.",
  },
  {
    day: "Days 3–9",
    hours: "Email",
    title: "Support Period",
    duration: "7 days",
    body: "7 days of email support for any questions, adjustments, or new connections you want to add. After that, you can re-up for a custom maintenance plan.",
  },
];

const AI_IMPL_REQUIRED = [
  "Admin access to your computer (Mac or Windows)",
  "A Google account for the Sheets API setup",
  "Telegram app installed on your phone",
  "Stable internet for the initial setup call",
  "1–2 hours blocked off for our kickoff call",
];

const AI_IMPL_REASONS = [
  { ico: "⏱", t: "Save 4–6 hours of fiddly setup",  d: "Done in 1–2 days while you focus on revenue work, not auth flows." },
  { ico: "⚠", t: "Avoid breaking configs",          d: "Technical setup has dozens of moving parts. One wrong config breaks everything." },
  { ico: "✦", t: "Built by the same operator",      d: "I built this exact system before. No first-time setup quirks." },
  { ico: "✓", t: "Tested before handoff",           d: "Every integration is verified live. You inherit a working system." },
];

function AIImplementationPage() {
  const R2 = (typeof window !== "undefined" && window.UM_ROOT) || "../../";

  return (
    <div className="ai-impl-shell">
      <PageNav active="services"/>

      {/* HERO */}
      <section className="ps-hero with-backlink">
        <div className="um-container">
          <BackLink href={`${R2}index.html`} label="Home"/>
          <PSLabel>AI Pack · Done-for-you</PSLabel>
          <h1 className="ps-hero-title">
            We install your <span className="accent">AI automation</span><br/>
            in 1–2 days.
          </h1>
          <p className="ps-hero-lede">
            Skip the technical setup entirely. Our team installs, configures, and tests every part of the AI Pack —
            Claude Code, VS Code, the infrastructure pack, your Telegram bot, and Google Sheets — then walks you through it.
          </p>

          {/* Hero price chip */}
          <div className="ai-impl-price-chip">
            <span className="lbl">One-time setup fee</span>
            <div className="row">
              <span className="num">${PMDS_AI_IMPLEMENTATION.tiers[0].price}</span>
              <span className="meta">Includes 30-min walkthrough · 7 days support</span>
            </div>
            <div className="ctas">
              <a className="um-btn-primary" href={`${R2}pages/order.html?service=ai-pack`}>
                Add to my order <UmIcon name="ico-arrow-right" size={14}/>
              </a>
              <a className="um-btn-ghost" href={`${R2}pages/book-appointment.html?service=ai-implementation`}>
                Book a kickoff call
              </a>
            </div>
          </div>

          <div className="ps-hero-stats">
            <div><div className="num">1–2 <span className="accent">days</span></div><div className="lbl">Turnaround</div></div>
            <div><div className="num">30 min</div><div className="lbl">Walkthrough</div></div>
            <div><div className="num">7 days</div><div className="lbl">Email support</div></div>
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED */}
      <section className="um-container" style={{paddingTop: 60}}>
        <div className="pw-section-head">
          <div>
            <PSLabel>What's included</PSLabel>
            <h2 style={{fontWeight:800, fontSize:"clamp(36px,4.5vw,56px)",
                        letterSpacing:"-0.02em", lineHeight:1.05, margin:"14px 0 0"}}>
              Every piece <span className="accent">installed.</span>
            </h2>
          </div>
          <p className="pw-section-aside">
            Eight discrete deliverables. Each verified end-to-end before handoff.
          </p>
        </div>

        <div className="ai-impl-grid">
          {AI_IMPL_INCLUDED.map((item, i) => (
            <div key={i} className="ai-impl-card">
              <div className="ai-impl-num">0{i+1}</div>
              <div className="ai-impl-ico">{item.ico}</div>
              <div className="ai-impl-t">{item.t}</div>
              <div className="ai-impl-d">{item.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TIMELINE — horizontal scroll */}
      <section className="ai-impl-timeline-section">
        <div className="um-container">
          <div className="pw-section-head">
            <div>
              <PSLabel>Implementation Timeline</PSLabel>
              <h2 style={{fontWeight:800, fontSize:"clamp(36px,4.5vw,56px)",
                          letterSpacing:"-0.02em", lineHeight:1.05, margin:"14px 0 0"}}>
                4 phases. <span className="accent">9 days total.</span>
              </h2>
            </div>
            <p className="pw-section-aside">From kickoff to inheriting a tested, running system.</p>
          </div>

          <div className="ai-impl-timeline">
            <div className="ai-impl-timeline-track"></div>
            {AI_IMPL_TIMELINE.map((p, i) => (
              <div key={i} className="ai-impl-phase">
                <div className="ai-impl-phase-dot">
                  <span className="dot-inner"></span>
                </div>
                <div className="ai-impl-phase-card">
                  <div className="ai-impl-phase-meta">
                    <span className="day">{p.day}</span>
                    <span className="hours">{p.hours}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <div className="dur">~{p.duration}</div>
                  <p>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY CHOOSE / REQUIREMENTS — two col */}
      <section className="um-container">
        <div className="ps-twocol">
          <div className="ps-block">
            <PSLabel>Why choose implementation</PSLabel>
            <h3>Four reasons it's <span className="accent">worth $400.</span></h3>
            <div className="ai-impl-reason-grid">
              {AI_IMPL_REASONS.map((r, i) => (
                <div key={i} className="ai-impl-reason">
                  <div className="ai-impl-reason-ico">{r.ico}</div>
                  <div className="ai-impl-reason-t">{r.t}</div>
                  <div className="ai-impl-reason-d">{r.d}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="ps-block">
            <PSLabel>Before your session</PSLabel>
            <h3>What you need <span className="accent">ready.</span></h3>
            <p>So we can hit the ground running on kickoff day.</p>
            <ul className="ps-list">
              {AI_IMPL_REQUIRED.map((d, i) => (
                <li key={i}><span className="marker"></span>{d}</li>
              ))}
            </ul>

            <div className="ai-impl-contact-card">
              <div className="ai-impl-contact-lbl">Prefer to talk first?</div>
              <a href="mailto:uche.madumere@uchemadumere.com" className="ai-impl-contact-row">
                <span className="k">Email</span>
                <span className="v">uche.madumere@uchemadumere.com</span>
              </a>
              <a href="tel:+14377723266" className="ai-impl-contact-row">
                <span className="k">Phone</span>
                <span className="v">+1 437 772 3266</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section className="ps-work-section" id="pricing">
        <div className="um-container">
          <div className="pw-section-head">
            <div>
              <PSLabel>Pricing</PSLabel>
              <h2 style={{fontWeight:800, fontSize:"clamp(36px,4.5vw,56px)",
                          letterSpacing:"-0.02em", lineHeight:1.05, margin:"14px 0 0"}}>
                One <span className="accent">flat fee.</span>
              </h2>
            </div>
            <p className="pw-section-aside">
              Includes the AI Pack ($19.99) value. Pair it with content or marketing service for a discount.
            </p>
          </div>
          <PricingTiers tiers={PMDS_AI_IMPLEMENTATION.tiers} serviceId="ai-implementation"/>
        </div>
      </section>

      <PageCTA headline="Skip the technical setup —" accent="let us install it."/>
      <PageFooter/>
    </div>
  );
}

window.AIImplementationPage = AIImplementationPage;