// services-page.jsx — services detail page, outcome-first, no pricing
const { useState: useStateSP } = React;

function ServicesPage({ setPage }) {
  const isMobile = useIsMobile(640);
  const sectors = ['All', 'Admin tax', 'Revenue capture', 'Risk', 'Knowledge', 'Enablement', 'Ongoing', 'Custom'];
  const [active, setActive] = useStateSP('All');

  const services = [
    { s: 'Admin tax', icon: 'compass', title: 'AI readiness audit and workflow discovery',
      problem: 'You know there is waste in your operation, but you cannot point to where it is biggest or where AI would actually help.',
      outcome: 'A ranked, written plan of where AI delivers the most hours back or the most revenue captured, with a clear 30 to 90 day first engagement.' },
    { s: 'Admin tax', icon: 'cog', title: 'AI workflow automation',
      problem: 'Your team has the same recurring work every week. Pulling data from one system into another, routing approvals, sending status updates, triggering follow-ups.',
      outcome: 'Automated workflows that run on a schedule or trigger, end to end. Skilled workers get their hours back for the work only they can do.' },
    { s: 'Admin tax', icon: 'flow', title: 'AI integration foundation',
      problem: 'Every AI use case depends on whether it can read from and write to the tools your team already runs. Without proper integration, even the best AI ends up as another silo.',
      outcome: 'We build the integration layer that connects AI to your CRM, ERP, field service software, and back office systems. Done once, used by every AI service we ship after.' },
    { s: 'Admin tax', icon: 'filter', title: 'Data cleaning and formatting AI',
      problem: 'Whenever messy data arrives, somebody has to clean it up by hand. Each batch is a fresh hour or two of tedious, error-prone work.',
      outcome: 'A custom cleanup tool you feed messy files into. The AI applies your specific rules and exports results in whatever format you need. Hours of manual work in minutes.' },
    { s: 'Revenue capture', icon: 'chat', title: 'AI phone agents',
      problem: 'Inbound calls after hours, on weekends, or during peak times go to voicemail. Those are leads that never come back.',
      outcome: '24/7 call coverage that qualifies, books, and routes. Missed leads become scheduled jobs, without adding headcount.' },
    { s: 'Revenue capture', icon: 'target', title: 'Sales opportunity analyzer',
      problem: 'Your business is sitting on years of job history. Reps are working cold lists while warm prospects sit forgotten in the backlog of past work.',
      outcome: 'Upload a job activity export. Out comes a ranked, territory-organized prospect list with suggested service angles.' },
    { s: 'Revenue capture', icon: 'spark', title: 'Email and communication automation',
      problem: 'Your people open Monday to hundreds of unread emails and spend the morning triaging instead of doing revenue-generating work.',
      outcome: 'Drafts, triage, summarization, and follow up across Microsoft 365 and Gmail. Inbox becomes a task queue, not a second job.' },
    { s: 'Risk', icon: 'shield', title: 'Contract and document review AI',
      problem: 'Costly clauses slip into contracts because no one has time to read every line. One bad indemnity costs more than the deal.',
      outcome: 'Every incoming contract gets flagged for risky terms before it reaches your desk. Auto-renews, caps, payment terms, indemnity.' },
    { s: 'Risk', icon: 'compare', title: 'Contract comparison and revision tracking',
      problem: 'Counterparties send a final draft that quietly differs from what you agreed to. Manual side-by-side review takes hours.',
      outcome: 'Upload two versions of a contract. Get a clean diff back: scope changes, dollar changes, date changes, and modal verb shifts that quietly raise your obligation.' },
    { s: 'Risk', icon: 'eye', title: 'Phishing and scam advisor AI',
      problem: 'Most employees are not trained to spot the latest schemes, and a single click on a fake invoice or wire-transfer email can cost six figures.',
      outcome: 'An AI advisor your team can ask before clicking, replying, or transferring. Forward a suspicious email or screenshot, get a clear read in seconds.' },
    { s: 'Knowledge', icon: 'brain', title: 'Research assistant AI',
      problem: 'Real research takes days. Reading hundreds of sources, taking notes, comparing claims, and building a sourced report is a full week of work.',
      outcome: 'Pose a question. Get back a thorough research report with every claim cited and linked to its source. Hundreds of sources reviewed in minutes.' },
    { s: 'Knowledge', icon: 'folders', title: 'Internal knowledge AI',
      problem: 'Your policies, procedures, and institutional memory live across SharePoint, Google Drive, network shares, and email. Nobody can find the right answer fast enough.',
      outcome: 'Plain-English search across every internal document with source citations. New hires ramp faster. Veterans stop getting interrupted.' },
    { s: 'Knowledge', icon: 'help', title: 'Software expert AI',
      problem: 'Knowledge of how to actually use your software lives in scattered help pages and senior staff who get interrupted constantly.',
      outcome: 'A custom AI expert on the specific software your team relies on. Your team gets accurate answers in seconds without interrupting senior staff.' },
    { s: 'Enablement', icon: 'mic', title: 'AI briefings and Q&A',
      problem: 'Your leadership and team are hearing about AI everywhere but do not know what it actually means for your business.',
      outcome: 'A live briefing tailored to your business, your industry, and your team. Real examples, honest demos, and open Q&A.' },
    { s: 'Enablement', icon: 'cap', title: 'Hands-on AI training',
      problem: 'Most employees have tried ChatGPT once or twice and given up. AI tools sit unused while the same admin work piles up.',
      outcome: 'A practical workshop that teaches your team how to actually use AI day to day. They leave able to use AI confidently, and able to spot when it is wrong.' },
    { s: 'Ongoing', icon: 'orbit', title: 'Ongoing managed AI retainer',
      problem: 'You launched an AI tool. Now nobody owns it. It drifts, breaks, or quietly gets abandoned.',
      outcome: 'Monthly tuning, monitoring, and expansion. Quarterly reviews tied to measured outcomes. Month to month, never locked in.' },
    { s: 'Custom', icon: 'puzzle', title: 'Custom-built AI for your specific need',
      problem: 'There is a workflow specific to your business that doesn’t fit any of the categories above. You have lived with it for years because no off-the-shelf tool handles it the way you actually work.',
      outcome: 'A purpose-built AI tool designed for your exact problem. Same paid Discovery, then fixed-fee build. If we can map the workflow, we can build the tool.' },
  ];

  const filtered = active === 'All' ? services : services.filter(s => s.s === active);

  return (
    <div className="page-fade">
      <section className="services-top" style={{ position: 'relative', paddingTop: isMobile ? 100 : 160, paddingBottom: 40, overflow: 'hidden' }}>
        <div className="grid-bg"/>
        <div className="section" style={{ paddingTop: 20, paddingBottom: 40, position: 'relative' }}>
          <Reveal>
            <div className="tag" style={{ marginBottom: 28 }}>
              <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: 3 }}/>
              Services · seventeen offerings · all outcome based
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{
              fontSize: 'clamp(36px, 6vw, 84px)', fontWeight: 500,
              letterSpacing: '-0.035em', lineHeight: 0.98, margin: 0,
              maxWidth: 1100, textWrap: 'balance',
            }}>
              Every service ties to a<br/>
              <span style={{ color: 'var(--accent)' }}>problem you already feel.</span>
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ marginTop: 28, fontSize: isMobile ? 15 : 19, color: 'var(--ink-dim)', maxWidth: 640, lineHeight: 1.5 }}>
              We describe each service by the problem it solves and the outcome it delivers,
              not feature lists. If the problem sounds like yours, the service is probably right.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 20, paddingBottom: 40 }}>
        <Reveal>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32 }}>
            {sectors.map(s => (
              <button key={s} onClick={() => setActive(s)} style={{
                padding: isMobile ? '8px 14px' : '10px 18px', borderRadius: 999,
                background: active === s ? 'var(--ink)' : 'transparent',
                color: active === s ? 'var(--bg)' : 'var(--ink-dim)',
                border: '1px solid', borderColor: active === s ? 'var(--ink)' : 'var(--bg-line)',
                fontFamily: 'var(--font-sans)', fontSize: isMobile ? 12 : 13, cursor: 'pointer',
                transition: 'all 0.2s', minHeight: 44,
              }}>
                {s} <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, opacity: 0.6, marginLeft: 4 }}>
                  {s === 'All' ? services.length : services.filter(x => x.s === s).length}
                </span>
              </button>
            ))}
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 16,
        }}>
          {filtered.map((s, i) => (
            <Reveal key={s.title} delay={i * 40}>
              <Spotlight style={{
                padding: isMobile ? 20 : 28, border: '1px solid var(--bg-line)',
                borderRadius: 14, background: 'var(--bg-panel)', height: '100%',
                display: 'flex', flexDirection: 'column', gap: 16,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <ServiceIcon kind={s.icon}/>
                  <span className="tag" style={{ fontSize: 10 }}>{s.s}</span>
                </div>
                <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
                  {s.title}
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--warn)', marginBottom: 6 }}>THE PROBLEM</div>
                  <div style={{ color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.5 }}>{s.problem}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 6 }}>THE OUTCOME</div>
                  <div style={{ color: 'var(--ink)', fontSize: 14, lineHeight: 1.5 }}>{s.outcome}</div>
                </div>
                <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--bg-line)', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <button className="btn btn-ghost" style={{ fontSize: 12, padding: '8px 14px' }} onClick={() => setPage('contact')}>
                    Request a demo
                  </button>
                  <a className="btn btn-ghost" style={{ fontSize: 12, padding: '8px 14px' }} href="mailto:hello@timegainai.com">
                    Email us
                  </a>
                </div>
              </Spotlight>
            </Reveal>
          ))}
        </div>
      </section>

      <PriorWorkSection/>

      <CTABand setPage={setPage}/>
    </div>
  );
}

function ServiceIcon({ kind }) {
  const common = { width: 32, height: 32, viewBox: '0 0 32 32', fill: 'none', stroke: 'var(--accent)', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  return (
    <div style={{
      width: 44, height: 44, borderRadius: 10,
      background: 'var(--bg-elev)', border: '1px solid var(--bg-line)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <svg {...common}>
        {kind === 'flow' && <><circle cx="8" cy="16" r="3"/><circle cx="24" cy="16" r="3"/><path d="M11 16 L21 16"/><path d="M18 13 L21 16 L18 19"/></>}
        {kind === 'cog' && <><circle cx="16" cy="16" r="4"/><path d="M16 4 L16 8 M16 24 L16 28 M4 16 L8 16 M24 16 L28 16 M7 7 L10 10 M22 22 L25 25 M7 25 L10 22 M22 10 L25 7"/></>}
        {kind === 'chat' && <><path d="M6 10 L6 20 A2 2 0 0 0 8 22 L12 22 L14 26 L16 22 L24 22 A2 2 0 0 0 26 20 L26 10 A2 2 0 0 0 24 8 L8 8 A2 2 0 0 0 6 10 Z"/></>}
        {kind === 'spark' && <><path d="M16 4 L18 14 L28 16 L18 18 L16 28 L14 18 L4 16 L14 14 Z"/></>}
        {kind === 'shield' && <><path d="M16 4 L26 8 L26 16 C26 22 22 26 16 28 C10 26 6 22 6 16 L6 8 Z"/><path d="M12 16 L15 19 L20 14"/></>}
        {kind === 'brain' && <><path d="M12 8 A4 4 0 0 0 8 12 L8 20 A4 4 0 0 0 12 24 L12 8 Z"/><path d="M20 8 A4 4 0 0 1 24 12 L24 20 A4 4 0 0 1 20 24 L20 8 Z"/><path d="M12 16 L20 16"/></>}
        {kind === 'orbit' && <><circle cx="16" cy="16" r="3"/><ellipse cx="16" cy="16" rx="11" ry="4"/><ellipse cx="16" cy="16" rx="11" ry="4" transform="rotate(60 16 16)"/></>}
        {kind === 'compass' && <><circle cx="16" cy="16" r="11"/><path d="M12 20 L15 13 L22 10 L19 17 Z"/></>}
        {kind === 'target' && <><circle cx="16" cy="16" r="11"/><circle cx="16" cy="16" r="6"/><circle cx="16" cy="16" r="2" fill="var(--accent)"/></>}
        {kind === 'compare' && <><rect x="4" y="6" width="14" height="20" rx="1"/><rect x="14" y="3" width="14" height="20" rx="1"/></>}
        {kind === 'folders' && <><path d="M4 9 L4 25 A1 1 0 0 0 5 26 L27 26 A1 1 0 0 0 28 25 L28 12 A1 1 0 0 0 27 11 L17 11 L14 8 L5 8 A1 1 0 0 0 4 9 Z"/></>}
        {kind === 'eye' && <><path d="M2 16 C 6 9, 11 6, 16 6 C 21 6, 26 9, 30 16 C 26 23, 21 26, 16 26 C 11 26, 6 23, 2 16 Z"/><circle cx="16" cy="16" r="4"/></>}
        {kind === 'mic' && <><rect x="13" y="4" width="6" height="14" rx="3"/><path d="M9 14 C 9 18, 12 21, 16 21 C 20 21, 23 18, 23 14"/><line x1="16" y1="21" x2="16" y2="27"/><line x1="11" y1="27" x2="21" y2="27"/></>}
        {kind === 'cap' && <><path d="M2 12 L16 6 L30 12 L16 18 Z"/><path d="M8 15 L8 22 C 8 24, 12 25, 16 25 C 20 25, 24 24, 24 22 L 24 15"/></>}
        {kind === 'help' && <><rect x="4" y="4" width="24" height="24" rx="2"/><path d="M12 12 C 12 9, 14 8, 16 8 C 18 8, 20 9, 20 11 C 20 13, 18 14, 16 15 L 16 18"/><circle cx="16" cy="22" r="1"/></>}
        {kind === 'filter' && <><path d="M3 5 L29 5 L20 16 L20 26 L12 23 L12 16 Z"/></>}
        {kind === 'puzzle' && <><path d="M4 10 L11 10 L11 7 A2 2 0 0 1 15 7 L15 10 L21 10 L21 14 A2 2 0 0 0 25 14 L25 10 L28 10 L28 17 L25 17 A2 2 0 0 0 25 21 L28 21 L28 28 L21 28 L21 25 A2 2 0 0 0 17 25 L17 28 L4 28 L4 21 L7 21 A2 2 0 0 0 7 17 L4 17 Z"/></>}
      </svg>
    </div>
  );
}

window.ServicesPage = ServicesPage;

function PriorWorkSection() {
  const isMobile = useIsMobile(640);
  const projects = [
    { tag: 'Design Automation', industry: 'Engineering', title: 'Design Software Automation Library',
      desc: 'A structured Python script library for building automation tools inside a 3D design platform. 30+ planned scripts across three complexity tiers covering component sizing, placement, and exports.',
      callout: 'Eliminates hours of manual modeling. Gives the team a repeatable, maintainable automation framework.' },
    { tag: 'Sales Intelligence', industry: 'Operations', title: 'Sales Opportunity Analyzer',
      desc: 'Reads uploaded job activity reports (PDF) and identifies which accounts are worth prospecting. Ranks accounts by industry type, work complexity, and facility size, then groups them into three priority tiers by territory.',
      callout: 'Turns a raw activity dump into an actionable prospecting list a sales rep can use immediately.' },
    { tag: 'Legal AI', industry: 'Legal Operations', title: 'Contract Review Tool',
      desc: 'Analyzes business contracts against a customizable compliance checklist. Checks insurance requirements, arbitration clauses, company name accuracy, and legal red flags.',
      callout: 'Reduces review time significantly. Catches legal issues before they become financial exposure.' },
    { tag: 'Trade Compliance', industry: 'Import Operations', title: 'US HTS Import Classification Tool',
      desc: 'Classifies part numbers to full 10-digit US HTS codes, checks CBP rulings, and returns a complete duty analysis covering General rate, Section 232, Section 301, and Section 122 tariffs.',
      callout: 'Eliminates manual HTS research. Reduces compliance risk and accelerates import documentation.' },
    { tag: 'Field Operations', industry: 'Operations', title: 'Inspection Deficiency Organizer',
      desc: 'Reads inspection reports, filters failed units, and organizes deficiencies into a grouped summary by asset type.',
      callout: 'Turns a raw inspection report into an organized, actionable service list. Eliminates manual sorting.' },
    { tag: 'AI Chatbot', industry: 'Internal Tools', title: 'Internal Software Expert Assistant',
      desc: 'A custom AI chatbot for field and office staff answering software questions from internal reference documentation.',
      callout: 'Reduces documentation search time. Onboards new hires faster and keeps knowledge accessible 24/7.' },
    { tag: 'Regulatory Research', industry: 'Compliance', title: 'Regulatory Reference Tool',
      desc: 'Searches federal regulations and state-level amendments simultaneously. Flags state-specific overrides with cited section numbers.',
      callout: 'Eliminates manual cross-referencing across multiple regulatory documents. Speeds compliance decisions.' },
    { tag: 'AI Chatbot', industry: 'Internal Tools', title: 'Drafting Standards Expert Chatbot',
      desc: 'A custom AI chatbot for drafting staff built on internal reference documentation. Covers commands, 2D drafting, plotting, and company-specific drafting standards.',
      callout: 'Gives every drafter instant access to company standards without interrupting senior staff.' },
    { tag: 'Marketing Automation', industry: 'Marketing', title: 'Social Media Graphic Designer Bot',
      desc: 'A custom AI tool that acts as a dedicated graphic designer, producing finished, export-ready HTML social media graphics with locked brand standards.',
      callout: 'Removes the need for a designer for routine content. Anyone produces on-brand graphics in minutes.' },
  ];

  return (
    <section className="section" style={{ paddingTop: 60 }}>
      <Reveal>
        <div className="mono" style={{ color: 'var(--accent-2)', marginBottom: 18 }}>// PRIOR WORK</div>
      </Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 16 : 80,
        marginBottom: 40, alignItems: 'end',
      }}>
        <Reveal>
          <h2 style={{
            fontSize: 'clamp(28px, 4.5vw, 56px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0, textWrap: 'balance',
          }}>
            A Portfolio Built on Real Problems
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ color: 'var(--ink-dim)', fontSize: isMobile ? 15 : 17, lineHeight: 1.5, margin: 0, maxWidth: 480 }}>
            Examples of prior in-house AI work, built to solve specific business problems for
            real teams. Shown here as evidence of capability across industries and use cases.
          </p>
        </Reveal>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: 16,
      }}>
        {projects.map((p, i) => (
          <Reveal key={p.title} delay={(i % 3) * 60}>
            <Spotlight style={{
              padding: isMobile ? 18 : 24, border: '1px solid var(--bg-line)', borderRadius: 14,
              background: 'var(--bg-panel)', height: '100%',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <span className="mono" style={{ color: 'var(--accent)', fontSize: 10 }}>{p.tag}</span>
                <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 11 }}>{p.industry}</span>
              </div>
              <div style={{ fontSize: isMobile ? 16 : 19, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
                {p.title}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-dim)', lineHeight: 1.55 }}>
                {p.desc}
              </div>
              <div style={{
                marginTop: 'auto', padding: 12, borderRadius: 10,
                background: 'var(--bg-elev)', border: '1px solid var(--bg-line)',
              }}>
                <div className="mono" style={{ fontSize: 9, marginBottom: 6, color: 'var(--accent-2)' }}>OUTCOME</div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5 }}>{p.callout}</div>
              </div>
            </Spotlight>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.PriorWorkSection = PriorWorkSection;