"use client";

import { useEffect } from "react";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Check,
  X,
  Shield,
  Timer,
  DollarSign,
  AlertTriangle,
  ChevronDown,
  TrendingDown,
  Wrench,
  Zap,
} from "lucide-react";

// ─── Design tokens ────────────────────────────────────────────────────────────
const C = {
  bg:       "#0B0B0B",
  surface:  "#141414",
  surface2: "#1C1C1C",
  border:   "#252525",
  text:     "#F0F0F0",
  muted:    "#7A7A7A",
  green:    "#00E87C",
  greenDim: "rgba(0,232,124,0.10)",
  red:      "#FF4040",
  redDim:   "rgba(255,64,64,0.10)",
  yellow:   "#F5C400",
};

// ─── Nav ──────────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav
      style={{
        background: C.bg,
        borderBottom: `1px solid ${C.border}`,
        position: "sticky",
        top: 0,
        zIndex: 50,
      }}
    >
      <div
        style={{
          maxWidth: "1100px",
          margin: "0 auto",
          padding: "0 24px",
          height: "60px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <span
          style={{
            fontFamily: "'Syne', system-ui",
            fontWeight: 800,
            fontSize: "1rem",
            color: C.text,
            letterSpacing: "-0.01em",
          }}
        >
          The Modern Migration
        </span>
        <a
          href="#pricing"
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: "6px",
            background: C.green,
            color: C.bg,
            fontWeight: 700,
            fontSize: "0.8rem",
            padding: "8px 16px",
            borderRadius: "6px",
            textDecoration: "none",
          }}
        >
          See Pricing →
        </a>
      </div>
    </nav>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section
      style={{
        background: C.bg,
        minHeight: "92vh",
        display: "flex",
        alignItems: "center",
        position: "relative",
        overflow: "hidden",
        padding: "80px 24px",
      }}
    >
      {/* Grid background */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: `linear-gradient(${C.border} 1px, transparent 1px), linear-gradient(90deg, ${C.border} 1px, transparent 1px)`,
          backgroundSize: "60px 60px",
          opacity: 0.6,
          pointerEvents: "none",
        }}
      />
      {/* Green glow */}
      <div
        style={{
          position: "absolute",
          bottom: "-150px",
          right: "-50px",
          width: "700px",
          height: "700px",
          background: `radial-gradient(circle, ${C.green}14 0%, transparent 65%)`,
          pointerEvents: "none",
        }}
      />

      <div style={{ maxWidth: "1100px", margin: "0 auto", position: "relative", zIndex: 1 }}>
        {/* Badge */}
        <motion.div
          initial={{ opacity: 0, y: -12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: "8px",
            background: C.greenDim,
            border: `1px solid ${C.green}45`,
            borderRadius: "100px",
            padding: "6px 16px",
            marginBottom: "32px",
          }}
        >
          <span
            style={{
              width: "7px",
              height: "7px",
              borderRadius: "50%",
              background: C.green,
              display: "block",
              boxShadow: `0 0 8px ${C.green}`,
            }}
          />
          <span
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              letterSpacing: "0.12em",
              textTransform: "uppercase",
              color: C.green,
            }}
          >
            Now accepting new clients
          </span>
        </motion.div>

        {/* Headline */}
        <motion.h1
          initial={{ opacity: 0, y: 28 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.1 }}
          style={{
            fontFamily: "'Syne', system-ui",
            fontWeight: 800,
            fontSize: "clamp(2.6rem, 5.5vw, 5rem)",
            lineHeight: 1.04,
            color: C.text,
            marginBottom: "24px",
            maxWidth: "860px",
            letterSpacing: "-0.03em",
          }}
        >
          Your{" "}
          <span style={{ position: "relative", display: "inline-block" }}>
            <span style={{ color: C.muted }}>WordPress</span>
            <motion.span
              initial={{ scaleX: 0 }}
              animate={{ scaleX: 1 }}
              transition={{ duration: 0.45, delay: 0.9, ease: "easeInOut" }}
              style={{
                position: "absolute",
                top: "52%",
                left: "-2px",
                right: "-2px",
                height: "3px",
                background: C.red,
                transformOrigin: "left",
                borderRadius: "2px",
              }}
            />
          </span>{" "}
          site is costing
          <br />
          you customers.{" "}
          <em style={{ color: C.green, fontStyle: "italic" }}>Fix it in 10 days.</em>
        </motion.h1>

        {/* Subhead */}
        <motion.p
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          style={{
            fontSize: "clamp(1rem, 1.8vw, 1.2rem)",
            color: C.muted,
            maxWidth: "580px",
            lineHeight: 1.75,
            marginBottom: "40px",
          }}
        >
          We migrate small business websites off WordPress onto a modern stack
          that loads instantly, costs $0/month to host, and never breaks from
          plugin updates again.
        </motion.p>

        {/* CTAs */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.45 }}
          style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}
        >
          <a
            href="#pricing"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "8px",
              background: C.green,
              color: C.bg,
              padding: "14px 28px",
              borderRadius: "8px",
              fontWeight: 700,
              fontSize: "0.95rem",
              textDecoration: "none",
              boxShadow: `0 0 28px ${C.green}30`,
            }}
          >
            See Pricing <ArrowRight size={16} />
          </a>
          <a
            href="#how-it-works"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "8px",
              border: `1px solid ${C.border}`,
              color: C.text,
              padding: "14px 28px",
              borderRadius: "8px",
              fontWeight: 600,
              fontSize: "0.95rem",
              textDecoration: "none",
            }}
          >
            How It Works
          </a>
        </motion.div>

        {/* Stats row */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.65 }}
          style={{
            display: "flex",
            gap: "48px",
            marginTop: "64px",
            paddingTop: "40px",
            borderTop: `1px solid ${C.border}`,
            flexWrap: "wrap",
          }}
        >
          {[
            { val: "10", pre: "", suf: "", lbl: "Day turnaround" },
            { val: "0", pre: "$", suf: "", lbl: "Monthly hosting" },
            { val: "15", pre: "", suf: "x", lbl: "Faster on average" },
            { val: "100", pre: "", suf: "%", lbl: "Satisfaction guarantee" },
          ].map((s) => (
            <div key={s.lbl}>
              <div
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 800,
                  fontSize: "2.2rem",
                  color: C.green,
                  letterSpacing: "-0.02em",
                }}
              >
                {s.pre}{s.val}{s.suf}
              </div>
              <div style={{ fontSize: "0.78rem", color: C.muted, marginTop: "2px" }}>{s.lbl}</div>
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}

// ─── Pain Points ──────────────────────────────────────────────────────────────
const painPoints = [
  { Icon: Timer, title: "Painfully Slow", body: "Your site takes 4–8 seconds to load. 53% of visitors leave if a page takes over 3 seconds. You're losing money every day." },
  { Icon: Shield, title: "Security Nightmares", body: "WordPress powers 40% of the web — which makes it the #1 target for hackers. Outdated plugins are open doors." },
  { Icon: DollarSign, title: "Expensive Hosting", body: "You're paying $30–$150/month for hosting that still can't keep your site fast. Modern sites host for free. Literally $0." },
  { Icon: AlertTriangle, title: "Plugin Roulette", body: "Every update is a gamble. One plugin conflict and your site goes white. You shouldn't need 30 plugins to run a business site." },
  { Icon: TrendingDown, title: "Tanking Your SEO", body: "Google ranks fast sites higher. Your bloated WordPress install is dragging your rankings down while competitors pass you." },
  { Icon: Wrench, title: "Constant Maintenance", body: "Core updates, theme updates, plugin patches, backups, security scans — you started a business, not an IT department." },
];

function PainPoints() {
  return (
    <section style={{ background: C.surface, padding: "96px 24px" }}>
      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ textAlign: "center", marginBottom: "56px" }}
        >
          <span
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: C.red,
            }}
          >
            Sound familiar?
          </span>
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              marginTop: "12px",
              lineHeight: 1.1,
              letterSpacing: "-0.025em",
            }}
          >
            WordPress was built for 2010.
            <br />
            Your customers live in 2026.
          </h2>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: "1px",
            background: C.border,
            borderRadius: "16px",
            overflow: "hidden",
          }}
        >
          {painPoints.map(({ Icon, title, body }, i) => (
            <motion.div
              key={title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.07 }}
              style={{ background: C.surface, padding: "32px 28px" }}
            >
              <div
                style={{
                  width: "44px",
                  height: "44px",
                  background: C.redDim,
                  border: `1px solid ${C.red}30`,
                  borderRadius: "10px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: "16px",
                }}
              >
                <Icon size={20} color={C.red} />
              </div>
              <h3
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 700,
                  fontSize: "1rem",
                  color: C.text,
                  marginBottom: "10px",
                }}
              >
                {title}
              </h3>
              <p style={{ fontSize: "0.875rem", color: C.muted, lineHeight: 1.72 }}>
                {body}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Comparison ───────────────────────────────────────────────────────────────
const beforeList = [
  "4–8 second load times",
  "$30–$150/mo hosting",
  "Constant plugin updates",
  "Vulnerable to attacks",
  "Breaks randomly",
  "Poor mobile scores",
  "Needs ongoing maintenance",
];
const afterList = [
  "Under 1 second load times",
  "$0/mo hosting",
  "No plugins needed",
  "Virtually unhackable",
  "Nothing to break",
  "Perfect mobile scores",
  "Set it and forget it",
];

function Comparison() {
  return (
    <section style={{ background: C.bg, padding: "96px 24px" }}>
      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ textAlign: "center", marginBottom: "56px" }}
        >
          <span
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: C.muted,
            }}
          >
            The difference
          </span>
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              marginTop: "12px",
              letterSpacing: "-0.025em",
            }}
          >
            Old stack vs. your new reality
          </h2>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "2px",
            background: C.border,
            borderRadius: "16px",
            overflow: "hidden",
          }}
        >
          {/* Before */}
          <motion.div
            initial={{ opacity: 0, x: -24 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            style={{ background: C.surface, padding: "40px" }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                marginBottom: "28px",
                paddingBottom: "20px",
                borderBottom: `1px solid ${C.border}`,
              }}
            >
              <X size={16} color={C.red} />
              <span
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 700,
                  fontSize: "1rem",
                  color: C.muted,
                }}
              >
                Your WordPress Site
              </span>
            </div>
            {beforeList.map((item, i) => (
              <div
                key={i}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "12px",
                  padding: "11px 0",
                  borderBottom: `1px solid ${C.border}`,
                }}
              >
                <div
                  style={{
                    width: "18px",
                    height: "18px",
                    borderRadius: "50%",
                    background: C.redDim,
                    border: `1px solid ${C.red}35`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                  }}
                >
                  <X size={9} color={C.red} />
                </div>
                <span style={{ fontSize: "0.875rem", color: C.muted }}>{item}</span>
              </div>
            ))}
          </motion.div>

          {/* After */}
          <motion.div
            initial={{ opacity: 0, x: 24 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
            style={{
              background: C.surface,
              padding: "40px",
              position: "relative",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                position: "absolute",
                top: 0,
                right: 0,
                width: "240px",
                height: "240px",
                background: `radial-gradient(circle at top right, ${C.green}10, transparent 65%)`,
                pointerEvents: "none",
              }}
            />
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                marginBottom: "28px",
                paddingBottom: "20px",
                borderBottom: `1px solid ${C.border}`,
                position: "relative",
              }}
            >
              <Check size={16} color={C.green} />
              <span
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 700,
                  fontSize: "1rem",
                  color: C.text,
                }}
              >
                After Migration
              </span>
            </div>
            {afterList.map((item, i) => (
              <div
                key={i}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "12px",
                  padding: "11px 0",
                  borderBottom: `1px solid ${C.border}`,
                  position: "relative",
                }}
              >
                <div
                  style={{
                    width: "18px",
                    height: "18px",
                    borderRadius: "50%",
                    background: C.greenDim,
                    border: `1px solid ${C.green}45`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                  }}
                >
                  <Check size={9} color={C.green} />
                </div>
                <span style={{ fontSize: "0.875rem", color: C.text }}>{item}</span>
              </div>
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}

// ─── Speed ────────────────────────────────────────────────────────────────────
function SpeedBar({ pct, color, delay }: { pct: number; color: string; delay: number }) {
  return (
    <div
      style={{
        height: "12px",
        background: C.surface2,
        borderRadius: "100px",
        overflow: "hidden",
        width: "100%",
      }}
    >
      <motion.div
        initial={{ width: 0 }}
        whileInView={{ width: `${pct}%` }}
        viewport={{ once: true }}
        transition={{ duration: 0.9, delay, ease: "easeOut" }}
        style={{ height: "100%", background: color, borderRadius: "100px" }}
      />
    </div>
  );
}

function Speed() {
  const bars = [
    { label: "Typical WordPress Site", value: 6.2, max: 7, color: C.red, delay: 0.1 },
    { label: "After Migration", value: 0.4, max: 7, color: C.green, delay: 0.5 },
  ];

  return (
    <section style={{ background: C.surface, padding: "96px 24px" }}>
      <div style={{ maxWidth: "800px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ textAlign: "center", marginBottom: "56px" }}
        >
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              marginBottom: "8px",
              letterSpacing: "-0.025em",
            }}
          >
            See the speed difference
          </h2>
          <p style={{ color: C.muted }}>Average page load time comparison</p>
        </motion.div>

        <div style={{ display: "flex", flexDirection: "column", gap: "36px" }}>
          {bars.map((bar) => (
            <div key={bar.label}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  marginBottom: "12px",
                }}
              >
                <span style={{ fontSize: "0.9rem", color: C.muted }}>{bar.label}</span>
                <motion.span
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: bar.delay + 0.6 }}
                  style={{
                    fontFamily: "'Syne', system-ui",
                    fontWeight: 800,
                    fontSize: "1.6rem",
                    color: bar.color,
                    letterSpacing: "-0.02em",
                  }}
                >
                  {bar.value}s
                </motion.span>
              </div>
              <SpeedBar pct={(bar.value / bar.max) * 100} color={bar.color} delay={bar.delay} />
            </div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.8 }}
          style={{
            marginTop: "40px",
            background: C.greenDim,
            border: `1px solid ${C.green}28`,
            borderRadius: "12px",
            padding: "20px 24px",
            display: "flex",
            alignItems: "center",
            gap: "14px",
          }}
        >
          <Zap size={22} color={C.green} style={{ flexShrink: 0 }} />
          <span style={{ fontSize: "0.9rem", color: C.text, lineHeight: 1.6 }}>
            <strong style={{ color: C.green }}>15x faster</strong> — that's the difference
            between a visitor who converts and one who bounces.
          </span>
        </motion.div>
      </div>
    </section>
  );
}

// ─── What's Included ──────────────────────────────────────────────────────────
const included = [
  { num: "01", title: "Full Site Migration", body: "Every page, image, and piece of content moved to a modern framework. Your site looks the same (or better) — it just runs 10x faster." },
  { num: "02", title: "Free Hosting Setup", body: "We deploy your new site on enterprise-grade infrastructure that costs you $0/month. Cancel your old hosting and keep the savings." },
  { num: "03", title: "Simple Content Editing", body: "We connect a clean, easy-to-use content system so you can update text and images without touching code. No WordPress dashboard. No plugins." },
  { num: "04", title: "DNS, Domain & SSL", body: "We handle every technical detail — domain transfer, DNS records, SSL certificate. You don't lift a finger." },
  { num: "05", title: "30 Days of Support", body: "Questions after launch? We've got you covered for a full month. Plus a recorded walkthrough so you always have a reference." },
  { num: "06", title: "Done in 10 Business Days", body: "No 8-week timelines. No endless back-and-forth. We migrate your site in under two weeks — guaranteed." },
];

function Included() {
  return (
    <section id="how-it-works" style={{ background: C.bg, padding: "96px 24px" }}>
      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ marginBottom: "56px" }}
        >
          <span
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: C.muted,
            }}
          >
            What's included
          </span>
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              marginTop: "12px",
              letterSpacing: "-0.025em",
            }}
          >
            Everything handled.
            <br />
            Nothing for you to figure out.
          </h2>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
            gap: "1px",
            background: C.border,
            borderRadius: "16px",
            overflow: "hidden",
          }}
        >
          {included.map(({ num, title, body }, i) => (
            <motion.div
              key={num}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.08 }}
              style={{ background: C.bg, padding: "32px 28px" }}
            >
              <div
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 800,
                  fontSize: "2.8rem",
                  color: C.green,
                  opacity: 0.35,
                  lineHeight: 1,
                  marginBottom: "14px",
                }}
              >
                {num}
              </div>
              <h3
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 700,
                  fontSize: "1rem",
                  color: C.text,
                  marginBottom: "10px",
                }}
              >
                {title}
              </h3>
              <p style={{ fontSize: "0.85rem", color: C.muted, lineHeight: 1.72 }}>
                {body}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ──────────────────────────────────────────────────────────────────
const plans = [
  {
    name: "Stack Upgrade",
    price: "$1,997",
    note: "One-time payment",
    featured: false,
    badge: null as string | null,
    features: [
      "Full site migration (up to 10 pages)",
      "Same design, modern stack",
      "$0/mo hosting setup",
      "Simple CMS for content edits",
      "DNS, domain & SSL handled",
      "30 days post-launch support",
      "Video walkthrough",
    ],
    cta: "Get Started",
  },
  {
    name: "Migration + Refresh",
    price: "$3,497",
    note: "One-time payment",
    featured: true,
    badge: "Most Popular",
    features: [
      "Everything in Stack Upgrade",
      "Up to 20 pages",
      "Visual design refresh",
      "Mobile-first optimization",
      "SEO audit + meta setup",
      "Contact form & integrations",
      "60 days post-launch support",
    ],
    cta: "Get Started",
  },
  {
    name: "Full Transformation",
    price: "$5,997+",
    note: "Custom scope",
    featured: false,
    badge: null as string | null,
    features: [
      "Everything in Refresh",
      "Unlimited pages",
      "Complete redesign",
      "Custom functionality",
      "Advanced integrations",
      "90 days priority support",
      "Quarterly check-in call",
    ],
    cta: "Let's Talk",
  },
];

function Pricing() {
  return (
    <section id="pricing" style={{ background: C.surface, padding: "96px 24px" }}>
      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ textAlign: "center", marginBottom: "56px" }}
        >
          <span
            style={{
              fontSize: "0.72rem",
              fontWeight: 700,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: C.muted,
            }}
          >
            Simple pricing
          </span>
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              marginTop: "12px",
              marginBottom: "10px",
              letterSpacing: "-0.025em",
            }}
          >
            Choose your path forward
          </h2>
          <p style={{ color: C.muted }}>One-time investment. No subscriptions. No hidden fees.</p>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: "20px",
            alignItems: "start",
          }}
        >
          {plans.map((plan, i) => (
            <motion.div
              key={plan.name}
              initial={{ opacity: 0, y: 28 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              style={{
                background: plan.featured ? C.bg : C.surface2,
                border: plan.featured
                  ? `2px solid ${C.green}`
                  : `1px solid ${C.border}`,
                borderRadius: "14px",
                padding: "36px",
                position: "relative",
                boxShadow: plan.featured ? `0 0 48px ${C.green}15` : "none",
              }}
            >
              {plan.badge && (
                <div
                  style={{
                    position: "absolute",
                    top: "-13px",
                    left: "50%",
                    transform: "translateX(-50%)",
                    background: C.yellow,
                    color: "#0B0B0B",
                    fontWeight: 700,
                    fontSize: "0.68rem",
                    letterSpacing: "0.1em",
                    textTransform: "uppercase",
                    padding: "4px 14px",
                    borderRadius: "100px",
                    whiteSpace: "nowrap",
                  }}
                >
                  ⭐ {plan.badge}
                </div>
              )}

              <h3
                style={{
                  fontFamily: "'Syne', system-ui",
                  fontWeight: 700,
                  fontSize: "0.95rem",
                  color: plan.featured ? C.green : C.muted,
                  marginBottom: "16px",
                  letterSpacing: "0.01em",
                }}
              >
                {plan.name}
              </h3>

              <div style={{ marginBottom: "4px" }}>
                <span
                  style={{
                    fontFamily: "'Syne', system-ui",
                    fontWeight: 800,
                    fontSize: "2.8rem",
                    color: C.text,
                    letterSpacing: "-0.03em",
                  }}
                >
                  {plan.price}
                </span>
              </div>
              <div style={{ fontSize: "0.78rem", color: C.muted, marginBottom: "28px" }}>
                {plan.note}
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "32px" }}>
                {plan.features.map((feat) => (
                  <div key={feat} style={{ display: "flex", alignItems: "flex-start", gap: "10px" }}>
                    <div
                      style={{
                        marginTop: "2px",
                        width: "16px",
                        height: "16px",
                        borderRadius: "50%",
                        background: C.greenDim,
                        border: `1px solid ${C.green}45`,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        flexShrink: 0,
                      }}
                    >
                      <Check size={9} color={C.green} />
                    </div>
                    <span style={{ fontSize: "0.85rem", color: C.text, lineHeight: 1.5 }}>
                      {feat}
                    </span>
                  </div>
                ))}
              </div>

              <button
                style={{
                  width: "100%",
                  padding: "13px",
                  background: plan.featured ? C.green : "transparent",
                  color: plan.featured ? C.bg : C.text,
                  border: plan.featured ? "none" : `1px solid ${C.border}`,
                  borderRadius: "8px",
                  fontWeight: 700,
                  fontSize: "0.9rem",
                  cursor: "pointer",
                  fontFamily: "inherit",
                  letterSpacing: "0.01em",
                }}
              >
                {plan.cta}
              </button>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Guarantee ────────────────────────────────────────────────────────────────
function Guarantee() {
  return (
    <section style={{ background: C.bg, padding: "80px 24px" }}>
      <div style={{ maxWidth: "800px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, scale: 0.97 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{
            border: `1px solid ${C.border}`,
            borderRadius: "16px",
            padding: "44px 48px",
            display: "flex",
            gap: "28px",
            alignItems: "flex-start",
          }}
        >
          <div
            style={{
              width: "52px",
              height: "52px",
              background: C.greenDim,
              border: `1px solid ${C.green}38`,
              borderRadius: "12px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <Shield size={24} color={C.green} />
          </div>
          <div>
            <h2
              style={{
                fontFamily: "'Syne', system-ui",
                fontWeight: 800,
                fontSize: "1.5rem",
                color: C.text,
                marginBottom: "12px",
                letterSpacing: "-0.02em",
              }}
            >
              The "No Risk" Guarantee
            </h2>
            <p style={{ color: C.muted, lineHeight: 1.78, fontSize: "0.95rem" }}>
              If your new site isn't noticeably faster, easier to manage, and cheaper to
              run within 30 days of launch — we'll roll you back to WordPress at no cost.
              We've never had to. But the option is yours.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const faqs = [
  {
    q: "Will my site look different after migration?",
    a: "Only if you want it to. The Stack Upgrade tier keeps your existing design exactly as-is — we just rebuild it on a faster foundation. The Refresh and Transformation tiers include design improvements.",
  },
  {
    q: "How can hosting actually be $0?",
    a: "Modern static and edge-deployed sites are incredibly efficient. Platforms like Vercel and Cloudflare offer generous free tiers that cover most small business sites. No catch — it's a fundamental shift in how websites are served.",
  },
  {
    q: "Can I still edit my content after migration?",
    a: "Absolutely. We set up a simple content management system that lets you update text and images through a clean interface. It's actually easier to use than the WordPress dashboard. No plugins, no updates, no complexity.",
  },
  {
    q: "What about my forms, email signups, and integrations?",
    a: "All handled. Contact forms, email integrations, analytics tracking — everything gets migrated or replaced with modern equivalents that work better and don't require plugins to function.",
  },
  {
    q: "What if something goes wrong?",
    a: "We keep your old WordPress site intact until you're completely satisfied with the new one. You're never without a working website. Plus our 30-day guarantee means you can always roll back.",
  },
  {
    q: "Why only 10 business days?",
    a: "We've built a streamlined migration system. Unlike agencies who quote months because they're juggling dozens of projects, we focus on a small number of migrations at a time and use modern tooling that dramatically speeds up the process.",
  },
];

function FAQ() {
  return (
    <section style={{ background: C.surface, padding: "96px 24px" }}>
      <div style={{ maxWidth: "760px", margin: "0 auto" }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          style={{ textAlign: "center", marginBottom: "48px" }}
        >
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(1.8rem, 3.5vw, 3rem)",
              color: C.text,
              letterSpacing: "-0.025em",
            }}
          >
            Common questions
          </h2>
        </motion.div>

        <div
          style={{
            border: `1px solid ${C.border}`,
            borderRadius: "14px",
            overflow: "hidden",
          }}
        >
          {faqs.map((faq, i) => (
            <motion.details
              key={i}
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.05 }}
              style={{
                background: C.surface,
                borderBottom: i < faqs.length - 1 ? `1px solid ${C.border}` : "none",
              }}
            >
              <summary
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  gap: "16px",
                  padding: "20px 24px",
                  cursor: "pointer",
                  listStyle: "none",
                  userSelect: "none",
                }}
              >
                <span style={{ fontWeight: 600, color: C.text, fontSize: "0.9rem" }}>
                  {faq.q}
                </span>
                <ChevronDown size={15} color={C.muted} style={{ flexShrink: 0 }} />
              </summary>
              <div
                style={{
                  padding: "0 24px 20px",
                  color: C.muted,
                  fontSize: "0.875rem",
                  lineHeight: 1.78,
                }}
              >
                {faq.a}
              </div>
            </motion.details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section style={{ background: C.bg, padding: "120px 24px" }}>
      <div style={{ maxWidth: "760px", margin: "0 auto", textAlign: "center" }}>
        <motion.div
          initial={{ opacity: 0, y: 28 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7 }}
        >
          <h2
            style={{
              fontFamily: "'Syne', system-ui",
              fontWeight: 800,
              fontSize: "clamp(2rem, 4.5vw, 4rem)",
              color: C.text,
              lineHeight: 1.06,
              marginBottom: "20px",
              letterSpacing: "-0.03em",
            }}
          >
            Your website should work{" "}
            <em style={{ color: C.green, fontStyle: "italic" }}>for you</em>,<br />
            not against you.
          </h2>
          <p
            style={{
              color: C.muted,
              fontSize: "1.05rem",
              maxWidth: "480px",
              margin: "0 auto 40px",
              lineHeight: 1.7,
            }}
          >
            Get a free speed audit and see exactly what's slowing you down.
          </p>
          <a
            href="#"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "10px",
              background: C.green,
              color: C.bg,
              padding: "16px 36px",
              borderRadius: "8px",
              fontWeight: 700,
              fontSize: "1rem",
              textDecoration: "none",
              boxShadow: `0 0 40px ${C.green}25`,
            }}
          >
            Get Your Free Site Audit <ArrowRight size={18} />
          </a>
        </motion.div>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer
      style={{
        background: C.surface,
        borderTop: `1px solid ${C.border}`,
        padding: "28px 24px",
      }}
    >
      <div
        style={{
          maxWidth: "1100px",
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: "12px",
        }}
      >
        <span
          style={{
            fontFamily: "'Syne', system-ui",
            fontWeight: 700,
            color: C.muted,
            fontSize: "0.85rem",
          }}
        >
          © 2026 The Modern Migration
        </span>
        <a
          href="mailto:[email protected]"
          style={{ color: C.muted, fontSize: "0.85rem", textDecoration: "none" }}
        >
          [email protected]
        </a>
      </div>
    </footer>
  );
}

// ─── Root ─────────────────────────────────────────────────────────────────────
export default function ModernMigration() {
  useEffect(() => {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href =
      "https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&display=swap";
    document.head.appendChild(link);
    document.body.style.background = C.bg;
    return () => {
      try {
        document.head.removeChild(link);
      } catch {}
      document.body.style.background = "";
    };
  }, []);

  return (
    <div
      style={{
        fontFamily: "'DM Sans', system-ui, sans-serif",
        WebkitFontSmoothing: "antialiased",
      }}
    >
      <Nav />
      <Hero />
      <PainPoints />
      <Comparison />
      <Speed />
      <Included />
      <Pricing />
      <Guarantee />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}