/* global React, PageNav, PageFooter, PSLabel, UmIcon, PMDS_AI_PACK */

function AIAutomationPackPage() {
  const R2 = (typeof window !== "undefined" && window.UM_ROOT) || "../../";
  const [openFaq, setOpenFaq] = React.useState(null);

  const faqs = [
    {
      q: "What if I get stuck during setup?",
      a: "The guide includes troubleshooting sections for common issues. You can also book a support call ($50/30min) if you need live help."
    },
    {
      q: "Do I need coding experience?",
      a: "You should be comfortable with: terminal/command line, following technical docs, and setting up API keys. Previous coding experience helps but isn't required."
    },
    {
      q: "What happens after I pay?",
      a: "You'll receive an email with: (1) Download link for the infrastructure pack, (2) Setup guide PDF, (3) Access credentials for the private repo."
    },
    {
      q: "Can I upgrade to Implementation Service later?",
      a: "Yes. If you start DIY and decide you want help, upgrade for $380 (full price $400 minus the $20 you already paid)."
    },
    {
      q: "Is this compatible with Windows/Mac/Linux?",
      a: "Yes, all three. The guide includes platform-specific instructions where needed. Most testers complete setup successfully on all platforms."
    },
    {
      q: "What's included in future updates?",
      a: "All updates to the infrastructure pack, new automation templates, and revised setup guides. You'll receive email notifications when updates are available."
    }
  ];

  return (
    <React.Fragment>
      <PageNav active="pricing"/>

      <section className="ai-impl-hero">
        <div className="um-container">
          <div className="ai-impl-badge">
            <span className="ai-impl-badge-icon">◇</span>
            <span>SELF-SERVE · DIY</span>
          </div>

          <h1 className="ai-impl-title">
            AI Automation <span className="accent">Pack</span>
          </h1>

          <p className="ai-impl-lede">
            Claude Code, VS Code, private infrastructure pack, Telegram bot, Google Sheets —
            pre-configured and ready to deploy. You install in an afternoon.
          </p>

          <div className="ai-impl-price-row">
            <div className="ai-impl-price-card">
              <div className="ai-impl-price-label">One-time payment</div>
              <div className="ai-impl-price-value">$19.99</div>
              <div className="ai-impl-price-note">Lifetime access · Instant download</div>
            </div>
          </div>

          <div className="ai-impl-ctas">
            <a className="um-btn-primary" href="order.html?service=ai-pack">
              Order now <UmIcon name="ico-arrow-right" size={14}/>
            </a>
            <a className="um-btn-ghost" href={`${R2}pages/book-appointment.html`}>
              Book a call
            </a>
            <p className="ai-impl-cta-note">
              Need done-for-you setup? Check out the
              <a href="ai-implementation.html" style={{color:"var(--accent)", marginLeft:4}}>
                Implementation Service →
              </a>
            </p>
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED */}
      <section className="um-container ai-impl-section">
        <PSLabel>What's included</PSLabel>
        <h2 className="ai-impl-section-title">
          Complete automation <span className="accent">stack.</span>
        </h2>
        <p className="ai-impl-section-lede">
          Six pre-configured components that work together. Download, follow the guide, deploy in an afternoon.
        </p>

        <div className="ai-impl-grid">
          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">01</div>
            <h3 className="ai-impl-item-title">Claude Code Setup</h3>
            <p className="ai-impl-item-desc">
              Latest Claude Code CLI pre-configured with your workspace. API keys, model selection,
              and context management set up correctly.
            </p>
          </div>

          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">02</div>
            <h3 className="ai-impl-item-title">VS Code + Extension</h3>
            <p className="ai-impl-item-desc">
              VS Code with Claude extension configured. Keybindings, settings, and
              workspace optimized for AI-assisted development.
            </p>
          </div>

          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">03</div>
            <h3 className="ai-impl-item-title">Infrastructure Pack</h3>
            <p className="ai-impl-item-desc">
              Private GitHub repo with pre-built scripts, skills, hooks, and automation templates.
              Fork it, customize it, deploy it.
            </p>
          </div>

          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">04</div>
            <h3 className="ai-impl-item-title">Telegram Bot</h3>
            <p className="ai-impl-item-desc">
              Complete Telegram bot codebase with task management, file handling, and command system.
              Create your bot with @BotFather and deploy.
            </p>
          </div>

          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">05</div>
            <h3 className="ai-impl-item-title">Google Sheets Connection</h3>
            <p className="ai-impl-item-desc">
              Scripts and templates for connecting your automation to Google Sheets.
              API credentials setup guide included.
            </p>
          </div>

          <div className="ai-impl-item">
            <div className="ai-impl-item-icon">06</div>
            <h3 className="ai-impl-item-title">Testing & Diagnostics</h3>
            <p className="ai-impl-item-desc">
              Final testing suite to verify everything works. Diagnostic tools for troubleshooting
              and health checks.
            </p>
          </div>
        </div>
      </section>

      {/* SETUP GUIDE */}
      <section className="um-container ai-impl-section" style={{
        background: "radial-gradient(ellipse at 50% 0%, rgba(0,163,255,0.04), transparent)",
        borderTop: "1px solid rgba(255,255,255,0.06)",
        borderBottom: "1px solid rgba(255,255,255,0.06)",
        padding: "80px 40px",
        borderRadius: "24px",
        marginBottom: "80px"
      }}>
        <PSLabel>How it works</PSLabel>
        <h2 className="ai-impl-section-title">
          Self-serve <span className="accent">installation.</span>
        </h2>
        <p className="ai-impl-section-lede">
          Follow the 6-step guide included in the pack. Each step has clear instructions,
          screenshots, and troubleshooting tips.
        </p>

        <div style={{display:"grid", gap:"24px", marginTop: "48px"}}>
          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">1</div>
            <div>
              <h3 className="ai-impl-timeline-title">Download & Review</h3>
              <p className="ai-impl-timeline-desc">
                Download the infrastructure pack from your secure link. Review the setup guide
                and check prerequisites (5 minutes).
              </p>
            </div>
          </div>

          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">2</div>
            <div>
              <h3 className="ai-impl-timeline-title">Install Claude Code + VS Code</h3>
              <p className="ai-impl-timeline-desc">
                Install Claude Code CLI and VS Code extension using the provided scripts.
                Configure API keys (15 minutes).
              </p>
            </div>
          </div>

          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">3</div>
            <div>
              <h3 className="ai-impl-timeline-title">Deploy Infrastructure</h3>
              <p className="ai-impl-timeline-desc">
                Fork the GitHub repo, customize settings, and deploy scripts to your workspace (30 minutes).
              </p>
            </div>
          </div>

          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">4</div>
            <div>
              <h3 className="ai-impl-timeline-title">Create Telegram Bot</h3>
              <p className="ai-impl-timeline-desc">
                Use @BotFather to create your bot, add the token, deploy the bot code (20 minutes).
              </p>
            </div>
          </div>

          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">5</div>
            <div>
              <h3 className="ai-impl-timeline-title">Connect Google Sheets</h3>
              <p className="ai-impl-timeline-desc">
                Set up Google Cloud project, enable APIs, configure credentials (25 minutes).
              </p>
            </div>
          </div>

          <div className="ai-impl-timeline-item">
            <div className="ai-impl-timeline-num">6</div>
            <div>
              <h3 className="ai-impl-timeline-title">Test & Verify</h3>
              <p className="ai-impl-timeline-desc">
                Run the diagnostic suite, test all integrations, verify everything works (15 minutes).
              </p>
            </div>
          </div>
        </div>

        <div className="ai-impl-time-box">
          <div className="ai-impl-time-label">Total setup time</div>
          <div className="ai-impl-time-value">~2 hours</div>
          <div className="ai-impl-time-note">Most complete it in an afternoon</div>
        </div>
      </section>

      {/* WHY CHOOSE DIY */}
      <section className="um-container ai-impl-section">
        <PSLabel>Why choose DIY?</PSLabel>
        <h2 className="ai-impl-section-title">
          Perfect for <span className="accent">builders.</span>
        </h2>

        <div className="ai-impl-why-grid">
          <div className="ai-impl-why-card">
            <div className="ai-impl-why-icon">⚡</div>
            <h3>Learn by doing</h3>
            <p>
              Understand every component. Build technical confidence. You'll know how to
              troubleshoot and customize later.
            </p>
          </div>

          <div className="ai-impl-why-card">
            <div className="ai-impl-why-icon">$</div>
            <h3>Lowest cost</h3>
            <p>
              $19.99 one-time payment vs $400 for done-for-you. If you're comfortable with
              tech, this is the most economical option.
            </p>
          </div>

          <div className="ai-impl-why-card">
            <div className="ai-impl-why-icon">∞</div>
            <h3>Lifetime access</h3>
            <p>
              Download once, use forever. All updates included. Reinstall on new machines
              anytime. No subscription, no recurring fees.
            </p>
          </div>

          <div className="ai-impl-why-card">
            <div className="ai-impl-why-icon">⚙</div>
            <h3>Full control</h3>
            <p>
              Fork the repo, modify the code, customize everything. No black boxes.
              You own the infrastructure completely.
            </p>
          </div>
        </div>
      </section>

      {/* NEED HELP INSTEAD */}
      <section className="um-container ai-impl-section" style={{marginBottom: "80px"}}>
        <div className="ai-impl-help-box">
          <PSLabel>Not a DIY person?</PSLabel>
          <h2 style={{fontSize:"clamp(28px, 3.5vw, 42px)", fontWeight:800,
                     letterSpacing:"-0.02em", margin:"14px 0 16px"}}>
            We'll install it <span className="accent">for you.</span>
          </h2>
          <p style={{fontSize:16, lineHeight:1.6, color:"var(--muted-grey)", marginBottom:28}}>
            Skip the technical setup. We install, test, and walk you through everything in 1–2 days.
            7 days of email support included.
          </p>
          <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
            <a className="um-btn-primary" href="ai-implementation.html">
              View Implementation Service <UmIcon name="ico-arrow-right" size={14}/>
            </a>
            <div style={{fontSize:13, color:"var(--dim-grey)", display:"flex", alignItems:"center"}}>
              <span style={{color:"var(--accent)", fontWeight:700, fontSize:20, marginRight:8}}>$400</span>
              one-time · 1-2 days delivery
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="um-container ai-impl-section">
        <PSLabel>Questions</PSLabel>
        <h2 className="ai-impl-section-title">
          Common <span className="accent">questions.</span>
        </h2>

        <div className="ai-impl-faq">
          {faqs.map((faq, idx) => {
            const isOpen = openFaq === idx;
            return (
              <div key={idx} className="ai-impl-faq-item"
                   onClick={() => setOpenFaq(isOpen ? null : idx)}
                   style={{cursor: 'pointer'}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <h3>{faq.q}</h3>
                  <span style={{fontSize:24, color:'var(--accent)', transition:'transform 0.3s',
                                transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'}}>
                    +
                  </span>
                </div>
                {isOpen && (
                  <p style={{marginTop:16, paddingTop:16, borderTop:'1px solid var(--border-grey)'}}>
                    {faq.a}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="um-container" style={{marginBottom: "120px"}}>
        <div className="ai-impl-final-cta">
          <h2 style={{fontSize:"clamp(32px, 4vw, 48px)", fontWeight:800,
                     letterSpacing:"-0.02em", marginBottom:16}}>
            Ready to build your <span className="accent">automation stack?</span>
          </h2>
          <p style={{fontSize:17, lineHeight:1.6, color:"var(--muted-grey)", marginBottom:32, maxWidth:600}}>
            Download the pack, follow the 6-step guide, deploy in an afternoon.
            Lifetime access · Instant download · $19.99 one-time.
          </p>
          <div style={{display:"flex", gap:16, flexWrap:"wrap", justifyContent:"center"}}>
            <a className="um-btn-primary" style={{padding:"18px 36px", fontSize:18}}
               href="order.html?service=ai-pack">
              Order AI Pack — $19.99 <UmIcon name="ico-arrow-right" size={16}/>
            </a>
            <a className="um-btn-ghost" href={`${R2}pages/book-appointment.html`}>
              Book a call first
            </a>
          </div>
        </div>
      </section>

      <PageFooter/>
    </React.Fragment>
  );
}

window.AIAutomationPackPage = AIAutomationPackPage;