/* global React */
(() => {
  const {
    Section,
    SectionHeader,
    Eyebrow,
    Card,
    BtnPH,
    ImgPH,
    IconTile,
    CTABlock,
    Icon,
    Bar,
    PageShell
  } = window;

  // ============================================================
  // HOME — content refresh on top of the legacy homepage structure.
  // Reference: /legacy.html. Section order, spacing, and components
  // preserved; only copy, CTAs, and links updated for the new
  // Swapps Platform positioning.
  // ============================================================

  // ---------- 1. HERO (dark) ----------
  function HomeHero() {
    return (
      <Section tone="ink" className="!pt-20 !pb-24">
      <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_1fr]">
        <div>
          <h1 className="text-[42px] font-semibold leading-[1.08] tracking-tight text-zinc-50 md:text-[56px]" style={{ fontSize: "39px" }}>
            Keep your{' '}
            <span className="relative inline-block">
              <span className="relative z-10">digital products</span>
              <span className="absolute inset-x-0 bottom-1 -z-0 h-2.5 bg-zinc-700" />
            </span>{' '}
            running with AI-assisted support and expert engineers.
          </h1>
          <p className="mt-6 max-w-xl text-[16px] leading-relaxed text-zinc-400">
            Swapps helps companies operate, support, and improve websites, apps, and digital products{' '}
            <span className="font-medium text-zinc-200">without hiring a full internal technical team.</span>
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <BtnPH label="View Plans" variant="dark" size="lg" />
            <BtnPH
              label="Talk to us"
              variant="ghost"
              size="lg"
              className="!text-zinc-300 hover:!text-zinc-100"
            />
          </div>
        </div>

        {/* Right-side product placeholder (preserved from legacy) */}
        <div className="relative">
          <div className="relative mx-auto aspect-[5/4] w-full max-w-md rounded-xl border border-zinc-700 ph-hatch-dark p-5">
            <div className="flex items-center gap-1.5">
              <span className="h-2 w-2 rounded-full bg-zinc-600" />
              <span className="h-2 w-2 rounded-full bg-zinc-600" />
              <span className="h-2 w-2 rounded-full bg-zinc-600" />
            </div>
            <div className="mt-4 space-y-3">
              <Bar h={10} w="70%" tone="zinc-dark" />
              <Bar h={6} w="90%" tone="zinc-dark" />
              <Bar h={6} w="60%" tone="zinc-dark" />
              <div className="mt-4 grid grid-cols-2 gap-2">
                <div className="aspect-square rounded-md border border-zinc-700 ph-hatch-dark grid place-items-center">
                  <Icon name="bar-chart-3" size={22} className="text-zinc-400" />
                </div>
                <div className="aspect-square rounded-md border border-zinc-700 ph-hatch-dark grid place-items-center">
                  <Icon name="pie-chart" size={22} className="text-zinc-400" />
                </div>
              </div>
            </div>
            <Icon name="mouse-pointer-2" size={26} className="absolute bottom-6 left-10 text-zinc-200" />
            <span className="absolute -top-3 -right-3 grid h-9 w-9 place-items-center rounded-full border border-zinc-700 bg-zinc-800">
              <Icon name="check" size={14} className="text-zinc-200" />
            </span>
          </div>
        </div>
      </div>

      {/* TRUSTED BY strip */}
      <div className="mt-16">
        <div className="text-center text-[12px] tracking-[0.04em] text-zinc-500">Trusted by

          </div>
        <div className="mt-6 grid grid-cols-3 items-center gap-6 border-t border-zinc-800 pt-8 sm:grid-cols-6">
          {['NCARB', 'M3 HEALTH', 'Tabby', 'Zuckerman Law', 'Kazemi', '4-H'].map((l) =>
            <div
              key={l}
              className="flex h-14 items-center justify-center rounded-md border border-dashed border-zinc-700 ph-hatch-dark px-3"
              aria-label={`${l} logo placeholder`}
            >
              <span className="annot text-[10px] text-zinc-400">{l}</span>
            </div>
            )}
        </div>
      </div>
    </Section>);

  }

  // ---------- 2. HOW SWAPPS HELPS (dark band, white cards) ----------
  function HomeHowSwappsHelps() {
    const services = [
    {
      icon: 'life-buoy',
      t: 'AI-Assisted Product Support',
      c: 'AI helps classify, diagnose, and document support requests while Swapps engineers review and resolve cases that need technical judgment.'
    },
    {
      icon: 'workflow',
      t: 'Product Operations Workflow',
      c: 'Centralize product context, support requests, connected tools, and operational follow-up so your team knows what is happening and what comes next.'
    },
    {
      icon: 'shield-check',
      t: 'Continuity & Stability',
      c: 'Keep your websites, apps, and digital products stable with recurring support, minor adjustments, monitoring, and clear escalation paths.'
    }];

    return (
      <Section tone="paper" className="!py-16">
      <div className="rounded-3xl bg-zinc-900 px-8 py-16 text-zinc-100 md:px-14">
        {/* Main statement */}
        <div className="mx-auto max-w-3xl pl-5 border-l-2 border-zinc-500 text-center text-zinc-300">
          <p className="text-[17px] leading-relaxed md:text-[18px]">
            We help teams reduce technical friction, keep products stable, and get expert support when it matters.
          </p>
        </div>

        <h2 className="mt-12 text-center text-[34px] font-semibold tracking-tight text-zinc-50 md:text-[42px]">
          How Swapps helps
        </h2>

        <div className="mt-12 grid gap-5 md:grid-cols-3">
          {services.map((s) =>
            <div key={s.t} className="flex h-full flex-col rounded-2xl bg-white p-7 text-zinc-900">
              <div className="aspect-[16/10] w-full rounded-lg border border-dashed border-zinc-300 ph-hatch grid place-items-center">
                <Icon name={s.icon} size={36} className="text-zinc-500" />
              </div>
              <h3 className="mt-5 text-center text-[17px] font-semibold">{s.t}</h3>
              <p className="mt-3 text-center text-sm leading-relaxed text-zinc-600">{s.c}</p>
            </div>
            )}
        </div>

        <div className="mt-12 flex justify-center">
          <BtnPH label="Compare pricing" variant="dark" size="lg" href="plans.html" />
        </div>
      </div>
    </Section>);

  }

  // ---------- 3. TECHNICAL CONTINUITY (light band, bullets + illustration) ----------
  function HomeContinuity() {
    const bullets = [
    'Recurring support for websites, apps, portals, and digital products.',
    'AI-assisted diagnosis to speed up support requests.',
    'Human engineering review when issues need technical judgment.',
    'Clear scope between support, minor adjustments, and new projects.',
    'Pricing tiers that grow with your product complexity.'];

    return (
      <Section tone="cloud" className="!py-20">
      <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_1fr]">
        <div>
          <h2 className="text-[36px] font-semibold leading-[1.1] tracking-tight md:text-[44px]">
            Give your team technical continuity
          </h2>
          <ul className="mt-8 grid gap-x-8 gap-y-4 sm:grid-cols-2">
            {bullets.map((b) =>
              <li key={b} className="flex items-start gap-3 text-[14px] leading-relaxed text-zinc-700">
                <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-zinc-700" />
                <span>{b}</span>
              </li>
              )}
          </ul>
          <div className="mt-8">
            <BtnPH label="Get Swapps" variant="primary" size="lg" />
          </div>
        </div>

        <div>
          <ImgPH label="continuity illustration · placeholder" aspect="4 / 3" diag />
        </div>
      </div>
    </Section>);

  }

  // ---------- 4. CONNECTED TOOLS (dark band) ----------
  function HomeConnectedTools() {
    const groups = [
    { title: 'Code & repositories',     icon: 'git-branch',       items: ['GitHub', 'GitLab', 'Bitbucket'] },
    { title: 'CMS & websites',          icon: 'layout-template',  items: ['WordPress', 'Drupal', 'Webflow', 'Static sites'] },
    { title: 'Frameworks & apps',       icon: 'boxes',            items: ['React', 'Next.js', 'Django', 'Node.js', 'Laravel'] },
    { title: 'Hosting & infrastructure', icon: 'server',          items: ['Vercel', 'Netlify', 'Pantheon', 'AWS', 'Cloudflare'] },
    { title: 'Support & operations',    icon: 'life-buoy',        items: ['Tickets', 'Email', 'Monitoring', 'Documentation'] },
    { title: 'AI-assisted workflows',   icon: 'sparkles',         items: ['Diagnosis', 'Summaries', 'Triage', 'Support context'] }];

    return (
      <Section tone="ink" className="!py-20">
      <div className="mx-auto max-w-3xl text-center">
        <h2 className="text-[36px] font-semibold tracking-tight text-zinc-50 md:text-[44px]">
          Connected to the tools your product already uses
        </h2>
        <p className="mt-4 text-[15px] leading-relaxed text-zinc-400">
          Swapps works with the technologies, CMSs, repositories, hosting providers, and tools your digital product already depends on. Instead of forcing everything into a new system, Swapps Platform keeps context, support, and operations connected around your existing stack.
        </p>
      </div>

      <div className="mt-14 grid gap-10 md:grid-cols-2 lg:grid-cols-3">
        {groups.map((g) =>
          <div key={g.title}>
            <div className="text-[15px] font-semibold text-zinc-100">{g.title}</div>
            <ul className="mt-5 space-y-3">
              {g.items.map((it) =>
              <li
                key={it}
                className="flex items-center gap-3 rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 text-[13px] text-zinc-200">
                
                  <span className="grid h-6 w-6 place-items-center rounded border border-zinc-700 ph-hatch-dark">
                    <Icon name={g.icon} size={12} className="text-zinc-400" />
                  </span>
                  {it}
                </li>
              )}
            </ul>
          </div>
          )}
      </div>
    </Section>);

  }

  // ---------- 5. THE WORK WE DO (3 case study cards) ----------
  function HomeTheWork() {
    const cases = [
    {
      title: 'NCARB Architectural Registration',
      copy: 'Provided dedicated development support to upgrade and transform their legacy website, enabling automated workflows and supporting their nationwide operations growth.',
      cta: 'View NCARB case study'
    },
    {
      title: 'Bulletin of the Atomic Scientists',
      copy: 'Delivered comprehensive development support to migrate and rebuild their content management system, converting their website into an advanced subscription system for their publications.',
      cta: 'View Bulletin case study'
    },
    {
      title: 'M3 Health Digital Platform',
      copy: 'Provided ongoing development support and infrastructure scaling to build a robust healthcare platform, automating critical workflows and supporting rapid user growth.',
      cta: 'View M3 Health case study'
    }];

    return (
      <Section tone="paper" className="!py-20">
      <div className="flex items-end justify-between gap-6">
        <h2 className="text-[36px] font-semibold tracking-tight md:text-[44px]">The work we do</h2>
        <BtnPH label="View our portfolio" variant="secondary" size="md" href="case-studies.html" />
      </div>

      <div className="mt-12 grid gap-6 md:grid-cols-3">
        {cases.map((c) =>
          <div
            key={c.title}
            className="flex h-full flex-col rounded-2xl border border-zinc-200 bg-white p-5">
            
            <ImgPH label="case study screenshot" aspect="16 / 10" diag />
            <h3 className="mt-5 text-center text-[16px] font-semibold leading-snug">{c.title}</h3>
            <p className="mt-3 text-center text-sm leading-relaxed text-zinc-600">{c.copy}</p>
            <div className="mt-6 flex justify-center">
              <BtnPH label={c.cta} variant="secondary" size="md" href="case-studies.html" />
            </div>
          </div>
          )}
      </div>
    </Section>);

  }

  // ============================================================
  // PAGE
  // ============================================================
  function HomePage() {
    return (
      <PageShell>
      <HomeHero />
      <HomeHowSwappsHelps />
      <HomeContinuity />
      <HomeConnectedTools />
      <HomeTheWork />
    </PageShell>);

  }

  window.HomePage = HomePage;
})();