/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- tiny lucide-style icon helper (uses lucide UMD) ----------
// lucide UMD exposes lucide.icons[Name] as an array of node tuples:
//   [tagName, attrs] or [tagName, attrs, children]
// We render those directly as SVG children.
function renderIconChildren(nodes) {
  if (!Array.isArray(nodes)) return null;
  return nodes.map((node, i) => {
    if (!Array.isArray(node)) return null;
    const [tag, attrs, children] = node;
    return React.createElement(
      tag,
      { ...(attrs || {}), key: i },
      Array.isArray(children) ? renderIconChildren(children) : undefined
    );
  });
}

function Icon({ name, size = 16, strokeWidth = 1.75, className = '' }) {
  const camel = name.
  split('-').
  map((p) => p[0].toUpperCase() + p.slice(1)).
  join('');
  const data = window.lucide && window.lucide.icons && window.lucide.icons[camel] || null;
  // lucide.icons[name] may itself be wrapped in an object `{ ..., default: [...] }`
  // depending on version; normalize.
  let nodes = data;
  if (data && !Array.isArray(data)) {
    if (Array.isArray(data.default)) nodes = data.default;else
    if (Array.isArray(data[2])) nodes = data[2]; // [tag, attrs, children] shape
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={`inline-block shrink-0 ${className}`}
      aria-hidden="true">
      
      {renderIconChildren(nodes)}
    </svg>);

}

// ---------- Wireframe primitives ----------
function Bar({ w = '100%', h = 10, className = '', tone = 'zinc' }) {
  const colorMap = {
    zinc: 'bg-zinc-300',
    'zinc-dark': 'bg-zinc-700',
    light: 'bg-zinc-200',
    dim: 'bg-zinc-400'
  };
  return (
    <div
      className={`rounded-sm ${colorMap[tone]} ${className}`}
      style={{ width: w, height: h }} />);


}

function TextLines({ lines = 3, lastShort = true, tone = 'zinc', className = '' }) {
  return (
    <div className={`space-y-2 ${className}`}>
      {Array.from({ length: lines }).map((_, i) => {
        const isLast = i === lines - 1;
        return (
          <Bar
            key={i}
            h={8}
            w={isLast && lastShort ? '60%' : '100%'}
            tone={tone === 'dark' ? 'zinc-dark' : 'light'} />);


      })}
    </div>);

}

/** Image / mockup placeholder: dashed border, hatch fill, label, "X" diagonals */
function ImgPH({ label = 'image', aspect = '16 / 9', height, className = '', diag = false, tone = 'light' }) {
  const style = height ? { height } : { aspectRatio: aspect };
  const isDark = tone === 'dark';
  return (
    <div
      className={`relative w-full rounded-md border border-dashed ${
      isDark ? 'border-zinc-500 ph-hatch-dark bg-zinc-900' : 'border-zinc-400 ph-hatch bg-zinc-50'} ${
      className}`}
      style={style}>
      
      {diag &&
      <svg className="absolute inset-0 h-full w-full" preserveAspectRatio="none" viewBox="0 0 100 100">
          <line x1="0" y1="0" x2="100" y2="100" stroke={isDark ? 'rgba(255,255,255,.18)' : 'rgba(24,24,27,.18)'} strokeWidth=".4" vectorEffect="non-scaling-stroke" />
          <line x1="100" y1="0" x2="0" y2="100" stroke={isDark ? 'rgba(255,255,255,.18)' : 'rgba(24,24,27,.18)'} strokeWidth=".4" vectorEffect="non-scaling-stroke" />
        </svg>
      }
      <div className="absolute inset-0 grid place-items-center">
        <span className={`annot text-xs ${isDark ? 'text-zinc-300' : 'text-zinc-500'}`}>{label}</span>
      </div>
    </div>);

}

/** Map of common CTA labels to canonical site routes. Used as fallback when no
 *  explicit href is provided. Lower-cased on lookup. */
const CTA_ROUTES = {
  'view plans': 'plans.html',
  'view pricing': 'plans.html',
  'compare pricing': 'plans.html',
  'get swapps': 'get-swapps.html',
  'get started with swapps': 'get-swapps.html',
  'get this plan': 'plans.html',
  'see plans': 'plans.html',
  'see pricing': 'plans.html',
  'see platform plans': 'plans.html',
  'compare all plans': 'plans.html',
  'start now': 'plans.html',
  'talk to us': 'about-us.html#contact',
  'talk to swapps': 'about-us.html#contact',
  'contact us': 'about-us.html#contact',
  'contact support': 'about-us.html#contact',
  'open contact form': 'about-us.html#contact',
  'work with swapps': 'about-us.html#contact',
  'read service scope & terms': 'service-scope.html',
  'browse articles': 'resources.html',
  'visit support center': 'resources.html#support',
  'open a ticket': 'resources.html#support',
  'read full faq': 'resources.html#faq',
  'read case study': 'case-studies.html',
  'view our portfolio': 'case-studies.html',
  'see all open roles': 'about-us.html#careers',
  'see open roles': 'about-us.html#careers',
  'life at swapps': 'about-us.html#careers',
  'see what we do': 'services.html',
  'login': '#login'
};

/** Pill-shape button placeholder. Renders as <a> when href is provided (or
 *  inferred from the label). */
function BtnPH({ label, variant = 'primary', size = 'md', className = '', icon, href }) {
  const resolvedHref = href ?? (label ? CTA_ROUTES[String(label).toLowerCase()] : undefined);
  href = resolvedHref;
  const base = 'inline-flex items-center justify-center gap-2 rounded-full font-medium select-none';
  const sizes = {
    sm: 'px-3 py-1.5 text-xs',
    md: 'px-4 py-2 text-sm',
    lg: 'px-5 py-2.5 text-sm'
  };
  const variants = {
    primary: 'bg-zinc-900 text-zinc-50 hover:bg-zinc-800',
    secondary: 'border border-zinc-900 text-zinc-900 bg-transparent hover:bg-zinc-100',
    ghost: 'text-zinc-700 hover:text-zinc-900',
    light: 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300',
    dark: 'bg-zinc-100 text-zinc-900 hover:bg-white'
  };
  const cls = `${base} ${sizes[size]} ${variants[variant]} ${className}`;
  const content =
  <React.Fragment>
      {icon && <Icon name={icon} size={14} />}
      {label}
      {variant === 'primary' && <Icon name="arrow-right" size={14} />}
    </React.Fragment>;

  if (href) {
    return <a href={href} className={cls}>{content}</a>;
  }
  return <span className={cls}>{content}</span>;
}

/** Eyebrow label */
function Eyebrow({ children, dark = false, className = '' }) {
  return (
    <div
      className={`inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] ${
      dark ? 'text-zinc-400' : 'text-zinc-500'} ${
      className}`}>
      
      <span className={`h-px w-6 ${dark ? 'bg-zinc-500' : 'bg-zinc-400'}`} />
      {children}
    </div>);

}

/** Emphasized phrase inside a heading. Stands in for the accent-colored words
 *  used on the live site; rendered here as a marker-style highlight so it reads
 *  the same way in the wireframe's grayscale (and adapts under the palette tweak). */
function Highlight({ children, dark = false }) {
  return (
    <span
      className={`box-decoration-clone rounded px-1.5 ${
      dark ? 'bg-zinc-700 text-zinc-50' : 'bg-zinc-200 text-zinc-900'}`}>
      {children}
    </span>);

}

/** Section wrapper — full-bleed band + centered content */
function Section({ children, tone = 'paper', className = '', id }) {
  const tones = {
    paper: 'bg-white text-zinc-900',
    cloud: 'bg-zinc-100 text-zinc-900',
    mist: 'bg-zinc-200 text-zinc-900',
    ink: 'bg-zinc-900 text-zinc-100'
  };
  return (
    <section id={id} className={`${tones[tone]} ${className}`}>
      <div className="mx-auto w-full max-w-[1180px] px-10 py-20" style={{ padding: "40px" }}>{children}</div>
    </section>);

}

/** Two-up section header: eyebrow + headline + supporting copy */
function SectionHeader({ eyebrow, title, sub, align = 'left', dark = false, className = '' }) {
  const isCenter = align === 'center';
  return (
    <div className={`${isCenter ? 'mx-auto max-w-3xl text-center' : 'max-w-3xl'} ${className}`}>
      {eyebrow && <Eyebrow dark={dark} className="mb-4">{eyebrow}</Eyebrow>}
      <h2
        className={`font-semibold tracking-tight ${dark ? 'text-zinc-50' : 'text-zinc-900'} text-3xl md:text-[34px] leading-[1.15]`}>
        
        {title}
      </h2>
      {sub &&
      <p className={`mt-4 text-[15px] leading-relaxed ${dark ? 'text-zinc-400' : 'text-zinc-600'}`}>{sub}</p>
      }
    </div>);

}

/** Wireframe card */
function Card({ children, className = '', tone = 'paper', interactive = false }) {
  const tones = {
    paper: 'bg-white border-zinc-200',
    cloud: 'bg-zinc-50 border-zinc-200',
    ink: 'bg-zinc-900 border-zinc-800 text-zinc-100',
    dashed: 'bg-white border-zinc-300 border-dashed'
  };
  return (
    <div
      className={`rounded-xl border ${tones[tone]} p-6 ${interactive ? 'transition hover:border-zinc-400' : ''} ${className}`}>
      
      {children}
    </div>);

}

/** Tiny "feature" icon tile (gray box with lucide glyph) */
function IconTile({ name, dark = false, size = 36 }) {
  return (
    <div
      className={`grid place-items-center rounded-md ${
      dark ? 'bg-zinc-800 text-zinc-300' : 'bg-zinc-100 text-zinc-700'}`
      }
      style={{ width: size, height: size }}>
      
      <Icon name={name} size={Math.round(size * 0.5)} strokeWidth={1.6} />
    </div>);

}

/** Plan card */
function PlanCard({ name, price, period = '/mo', originalPrice, discountLabel, bestFor, promise, featured = false, cta = 'Get Swapps' }) {
  return (
    <div
      className={`flex flex-col rounded-xl border p-6 ${
      featured ? 'border-zinc-900 bg-zinc-900 text-zinc-100' : 'border-zinc-200 bg-white'}`
      }>
      
      <div className="flex items-center justify-between">
        <h3 className={`text-lg font-semibold ${featured ? 'text-zinc-50' : 'text-zinc-900'}`}>{name}</h3>
        {featured &&
        <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-zinc-900">
            popular
          </span>
        }
      </div>
      {originalPrice &&
      <div className="mt-4 flex items-center gap-2">
          <span className={`text-sm line-through ${featured ? 'text-zinc-500' : 'text-zinc-400'}`}>
            {originalPrice}{period}
          </span>
          {discountLabel &&
          <span className="rounded-full bg-zinc-900 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-zinc-50 ring-1 ring-zinc-700">
              {discountLabel}
            </span>
          }
        </div>
      }
      <div className={`${originalPrice ? 'mt-1' : 'mt-4'} flex items-baseline gap-1`}>
        <span className={`text-3xl font-semibold ${featured ? 'text-zinc-50' : 'text-zinc-900'}`}>{price}</span>
        {period && <span className={`text-sm ${featured ? 'text-zinc-400' : 'text-zinc-500'}`}>{period}</span>}
      </div>
      <div className="mt-5">
        <div className={`text-[11px] uppercase tracking-wider ${featured ? 'text-zinc-500' : 'text-zinc-500'}`}>Best for</div>
        <div className={`mt-1 text-sm ${featured ? 'text-zinc-200' : 'text-zinc-800'}`}>{bestFor}</div>
      </div>
      <div className="mt-4">
        <div className={`text-[11px] uppercase tracking-wider ${featured ? 'text-zinc-500' : 'text-zinc-500'}`}>Promise</div>
        <div className={`mt-1 text-sm ${featured ? 'text-zinc-300' : 'text-zinc-700'}`}>{promise}</div>
      </div>
      <div className={`my-6 h-px ${featured ? 'bg-zinc-800' : 'bg-zinc-200'}`} />
      <div className="mt-auto">
        <BtnPH label={cta} variant={featured ? 'dark' : 'primary'} className="w-full" />
      </div>
    </div>);

}

/** Feature card (icon + title + copy) */
function FeatureCard({ icon, title, copy, dark = false }) {
  return (
    <div
      className={`flex h-full flex-col rounded-xl border p-6 ${
      dark ? 'border-zinc-800 bg-zinc-900 text-zinc-100' : 'border-zinc-200 bg-white'}`
      }>
      
      <IconTile name={icon} dark={dark} />
      <h4 className={`mt-4 text-base font-semibold ${dark ? 'text-zinc-50' : 'text-zinc-900'}`}>{title}</h4>
      <p className={`mt-2 text-sm leading-relaxed ${dark ? 'text-zinc-400' : 'text-zinc-600'}`}>{copy}</p>
    </div>);

}

/** CTA block (used at section ends and final CTAs) */
function CTABlock({
  eyebrow,
  title,
  sub,
  primary = { label: 'View plans' },
  secondary = { label: 'Talk to us' },
  dark = true,
  align = 'center'
}) {
  return (
    <div
      className={`rounded-2xl ${dark ? 'bg-zinc-900 text-zinc-50' : 'bg-zinc-100 text-zinc-900'} p-10 md:p-14 ${
      align === 'center' ? 'text-center' : ''}`
      }>
      
      {eyebrow && <Eyebrow dark={dark} className="mb-4 justify-center">{eyebrow}</Eyebrow>}
      <h3 className={`mx-auto max-w-2xl text-3xl font-semibold tracking-tight leading-tight ${dark ? 'text-zinc-50' : 'text-zinc-900'}`}>
        {title}
      </h3>
      {sub &&
      <p className={`mx-auto mt-3 max-w-xl text-[15px] ${dark ? 'text-zinc-400' : 'text-zinc-600'}`}>{sub}</p>
      }
      <div className={`mt-7 flex flex-wrap items-center gap-3 ${align === 'center' ? 'justify-center' : ''}`}>
        <BtnPH label={primary.label} variant={dark ? 'dark' : 'primary'} size="lg" />
        {secondary &&
        <BtnPH label={secondary.label} variant={dark ? 'ghost' : 'secondary'} size="lg" />
        }
      </div>
    </div>);

}

// ---------- Global header ----------
const NAV_LINKS = [
{ label: 'Plans', href: 'plans.html' },
{ label: 'Services', href: 'services.html' },
{ label: 'Case Studies', href: 'case-studies.html' },
{ label: 'Resources', href: 'resources.html' },
{ label: 'About Us', href: 'about-us.html' }];


function currentPageFile() {
  if (typeof window === 'undefined') return 'index.html';
  // Last non-empty path segment, e.g. "/pricing" -> "pricing", "/" -> "".
  const last = (window.location.pathname.split('/').filter(Boolean).pop() || '').toLowerCase();
  if (!last) return 'index.html';
  // Hosts like Cloudflare Pages serve "clean" URLs and drop the ".html"
  // extension (/pricing instead of /pricing.html). Re-add it so the nav
  // active-state matching below works the same locally and when deployed.
  return last.endsWith('.html') ? last : `${last}.html`;
}

// Group sibling pages under the same nav highlight: the legacy /pricing/ URL
// still maps to the canonical Plans nav item.
const NAV_ALIASES = {
  'pricing.html': 'plans.html'
};

function Header() {
  let here = currentPageFile();
  if (NAV_ALIASES[here]) here = NAV_ALIASES[here];
  return (
    <header className="sticky top-0 z-30 border-b border-zinc-200 bg-white/85 backdrop-blur">
      <div className="mx-auto flex h-16 w-full max-w-[1180px] items-center justify-between px-10">
        <a href="index.html" className="flex items-center gap-2">
          <div className="grid h-7 w-7 place-items-center rounded-md border border-zinc-300 bg-zinc-100">
            <Icon name="hexagon" size={14} />
          </div>
          <span className="text-[15px] font-semibold tracking-tight">swapps</span>
          <span className="annot ml-2 hidden text-[11px] md:inline">[logo]</span>
        </a>
        <nav className="hidden items-center gap-7 md:flex">
          {NAV_LINKS.map((n) => {
            const active = here === n.href.toLowerCase();
            return (
              <a
                key={n.href}
                href={n.href}
                aria-current={active ? 'page' : undefined}
                className={`text-sm transition ${
                active ?
                'text-zinc-900 font-medium underline underline-offset-[6px] decoration-zinc-900' :
                'text-zinc-700 hover:text-zinc-900'}`
                }>
                
                {n.label}
              </a>);

          })}
        </nav>
        <div className="flex items-center gap-2">
          <BtnPH label="Get Swapps" variant="primary" size="sm" href="get-swapps.html" />
          <BtnPH label="Login" variant="ghost" size="sm" href="login.html" />
        </div>
      </div>
    </header>);

}

// ---------- Global footer ----------
function Footer() {
  const cols = [
  {
    title: 'Product',
    items: [
    ['Plans', 'plans.html'],
    ['Service Scope & Terms', 'service-scope.html'],
    ['Support Center', 'resources.html#support'],
    ['Resources', 'resources.html']]

  },
  {
    title: 'Services',
    items: [
    ['AI-Assisted Product Support', 'services.html'],
    ['Product Operations Workflow', 'services.html'],
    ['App Maintenance', 'services.html'],
    ['Infrastructure Support', 'services.html'],
    ['SEO / AIO', 'services.html'],
    ['Expert Dedicated Team', 'services.html']]

  },
  {
    title: 'Resources',
    items: [
    ['Blog', 'resources.html'],
    ['Support Center', 'resources.html#support'],
    ['Guides', 'resources.html'],
    ['FAQ', 'resources.html#faq']]

  },
  {
    title: 'About Swapps',
    items: [
    ['About Us', 'about-us.html'],
    ['Contact', 'about-us.html#contact'],
    ['Case Studies', 'case-studies.html'],
    ['Blog', 'resources.html'],
    ['Legacy homepage', 'legacy.html']]

  }];

  return (
    <footer className="bg-zinc-950 text-zinc-300">
      <div className="mx-auto w-full max-w-[1180px] px-10 py-16">
        <div className="grid gap-12 md:grid-cols-[1.4fr_repeat(4,1fr)]">
          <div>
            <div className="flex items-center gap-2">
              <div className="grid h-7 w-7 place-items-center rounded-md border border-zinc-700 bg-zinc-900">
                <Icon name="hexagon" size={14} className="text-zinc-300" />
              </div>
              <span className="text-[15px] font-semibold tracking-tight text-zinc-100">swapps</span>
            </div>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-zinc-500">
              Digital product continuity with AI-assisted support and expert engineers.
            </p>
            <div className="mt-6 flex items-center gap-3 text-zinc-500">
              <Icon name="linkedin" size={16} />
              <Icon name="github" size={16} />
              <Icon name="twitter" size={16} />
              <Icon name="youtube" size={16} />
            </div>
          </div>
          {cols.map((c) =>
          <div key={c.title}>
              <div className="text-[11px] uppercase tracking-[0.18em] text-zinc-500">{c.title}</div>
              <ul className="mt-4 space-y-2">
                {c.items.map(([label, href]) =>
              <li key={label}>
                    <a className="text-sm text-zinc-300 hover:text-white" href={href}>
                      {label}
                    </a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div className="mt-12 flex flex-wrap items-center justify-between gap-4 border-t border-zinc-800 pt-6 text-xs text-zinc-500">
          <span>© 2026 Swapps. Wireframe — not final visual design.</span>
          <span className="annot">grayscale · low-fi · v1</span>
        </div>
      </div>
    </footer>);

}

// ---------- Page shell ----------
// ── Wireframe status badge ──────────────────────────────────────────────────
// Visible top-center label flagging where each wireframe stands. Pages default
// to "live"; only the ones listed here are still "draft".
const PAGE_STATUS = {
  'resources.html': 'draft',
  'about-us.html': 'draft'
};

function pageStatus(file) {
  return PAGE_STATUS[file || currentPageFile()] || 'live';
}

/** Floating status tab pinned to the top-center of the viewport. Links to the
 *  wireframe index (sitemap.html). */
function PageStatus({ status }) {
  const s = status || pageStatus();
  const live = s === 'live';
  return (
    <a
      href="sitemap.html"
      title="View all wireframes & their status"
      className={`fixed left-1/2 top-0 z-[60] flex -translate-x-1/2 items-center gap-1.5 rounded-b-md border border-t-0 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] shadow-sm transition hover:py-1.5 ${
      live ? 'border-emerald-300 bg-emerald-50 text-emerald-700' : 'border-amber-300 bg-amber-50 text-amber-700'}`
      }>

      <span className={`h-1.5 w-1.5 rounded-full ${live ? 'bg-emerald-500' : 'bg-amber-500'}`} />
      {s}
    </a>);

}

function PageShell({ children }) {
  return (
    <div className="min-h-full bg-white">
      <PageStatus />
      <Header />
      <main>{children}</main>
      <Footer />
    </div>);

}

// expose to other scripts
Object.assign(window, {
  Icon,
  Bar,
  TextLines,
  ImgPH,
  BtnPH,
  Eyebrow,
  Highlight,
  PageStatus,
  pageStatus,
  Section,
  SectionHeader,
  Card,
  IconTile,
  PlanCard,
  FeatureCard,
  CTABlock,
  Header,
  Footer,
  PageShell
});