// APO Box v3: modern consumer-tech, single-file

const { useState, useEffect } = React;

/* ─────────── Brand atoms ─────────── */
function Logo() {
  return (
    <a href="#top" style={{
      display: "inline-flex", alignItems: "center",
      textDecoration: "none", flexShrink: 0,
    }}>
      <img src="assets/apobox-logo.png" alt="APO Box" style={{ height: 44, width: "auto", display: "block" }} />
    </a>
  );
}

function Btn({ children, variant = "dark", size = "md", as = "button", href, ...props }) {
  const sizes = {
    sm: { padding: "9px 14px", fontSize: 13.5 },
    md: { padding: "13px 20px", fontSize: 14 },
    lg: { padding: "16px 26px", fontSize: 15 },
  };
  const variants = {
    dark:  { background: "var(--ink)", color: "#fff", border: "1px solid var(--ink)" },
    gold:  { background: "var(--gold)", color: "var(--ink)", border: "1px solid var(--ink)" },
    ghost: { background: "transparent", color: "var(--ink)", border: "1px solid var(--ink)" },
    link:  { background: "transparent", color: "var(--ink)", border: "1px solid transparent" },
  };
  const Tag = as;
  return (
    <Tag href={href} {...props} style={{
      ...sizes[size], ...variants[variant],
      fontFamily: "inherit", fontWeight: 600,
      letterSpacing: "-0.005em",
      cursor: "pointer", borderRadius: 999,
      display: "inline-flex", alignItems: "center", gap: 10,
      whiteSpace: "nowrap",
      textDecoration: "none",
      transition: "transform .15s ease, background .15s, opacity .15s",
      ...props.style,
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = "translateY(1px)"}
    onMouseUp={(e) => e.currentTarget.style.transform = ""}
    onMouseLeave={(e) => e.currentTarget.style.transform = ""}
    >{children}</Tag>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7h10m0 0L7.5 2.5M12 7l-4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ─────────── Header ─────────── */
function Header({ onSignup }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["How it works", "#how"],
    ["Pricing", "#pricing"],
    ["For business", "#business"],
    ["FAQ", "#faq"],
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: scrolled ? "color-mix(in oklab, var(--bg) 88%, transparent)" : "transparent",
      backdropFilter: scrolled ? "saturate(150%) blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(150%) blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
      transition: "background .2s, border-color .2s",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "16px 28px",
        display: "flex", alignItems: "center", gap: 16, justifyContent: "space-between",
      }}>
        <Logo />
        <nav style={{
          display: "flex", gap: 26, alignItems: "center",
          overflowX: "auto", flex: "0 1 auto", minWidth: 0,
          scrollbarWidth: "none",
        }} className="apo-nav">
          {links.map(([l, h]) => (
            <a key={h} href={h} style={{
              fontSize: 14, color: "var(--ink-2)",
              textDecoration: "none", whiteSpace: "nowrap",
            }}
            onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"}
            onMouseLeave={e => e.currentTarget.style.color = "var(--ink-2)"}
            >{l}</a>
          ))}
          <a href="https://support.apobox.com" target="_blank" rel="noopener" style={{
            fontSize: 14, color: "var(--ink-2)", textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 4, whiteSpace: "nowrap",
          }}>
            Support
            <svg width="10" height="10" viewBox="0 0 10 10" style={{ opacity: .55 }}>
              <path d="M3 1h6v6M9 1L1 9" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
            </svg>
          </a>
        </nav>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexShrink: 0 }}>
          <Btn variant="link" size="sm" as="a" href="https://account.apobox.com/account">Sign in</Btn>
          <Btn variant="dark" size="sm" onClick={onSignup}>Get started <Arrow /></Btn>
        </div>
      </div>
      <style>{`.apo-nav::-webkit-scrollbar{display:none}`}</style>
    </header>
  );
}

/* ─────────── Hero ─────────── */
function Hero({ onSignup }) {
  return (
    <section id="top" style={{
      maxWidth: 1320, margin: "0 auto", padding: "48px 28px 80px",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 36 }}>
        <span className="eyebrow">Sign up free · address in 30 seconds</span>
      </div>

      <h1 style={{
        fontFamily: "Inter, sans-serif", fontWeight: 700,
        fontSize: "clamp(54px, 8.4vw, 132px)",
        lineHeight: 0.94, letterSpacing: "-0.04em",
        margin: 0, textWrap: "balance",
        color: "var(--ink)",
      }}>
        Your U.S. address,<br/>
        <span className="editorial" style={{ fontWeight: 400, fontStyle: "italic", color: "var(--ink)" }}>
          in
        </span>{" "}
        30 seconds.
      </h1>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(min(360px, 100%), 1fr))",
        gap: 56, alignItems: "end",
        marginTop: 48,
      }}>
        <div>
          <p style={{
            fontSize: 19, lineHeight: 1.5, color: "var(--ink-2)",
            maxWidth: 520, margin: "0 0 32px",
            textWrap: "pretty",
          }}>
            A real U.S. forwarding address that ships your packages to any
            APO, FPO, or DPO overseas. Built for U.S. military and diplomats
            serving abroad. No monthly fee. Doing this since 2006.
          </p>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <Btn variant="dark" size="lg" onClick={onSignup}>
              Get my address. It's free <Arrow />
            </Btn>
            <Btn variant="ghost" size="lg" onClick={() => document.getElementById("how").scrollIntoView({ behavior: "smooth" })}>
              How it works
            </Btn>
          </div>
          <div style={{
            display: "flex", gap: 24, alignItems: "center",
            marginTop: 28, color: "var(--ink-3)", fontSize: 13.5,
            flexWrap: "wrap",
          }}>
            <Check>30-second signup</Check>
            <Check>No monthly fee</Check>
            <Check>Pay per package</Check>
          </div>
        </div>

        {/* Visual: package illustration block */}
        <HeroVisual />
      </div>
    </section>
  );
}

function Check({ children }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M3 7l3 3 5-6" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      {children}
    </span>
  );
}

function HeroVisual() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 4), 2200);
    return () => clearInterval(id);
  }, []);
  const events = [
    { time: "09:42", label: "Package arrived from Best Buy", state: "done" },
    { time: "10:18", label: "Inspected & repacked for APO", state: "done" },
    { time: "11:55", label: "Customs form CN-22 attached", state: "done" },
    { time: "13:30", label: "Out the door, USPS Priority", state: "done" },
  ];
  return (
    <div style={{ position: "relative", minHeight: 380 }}>
      <div style={{
        background: "linear-gradient(150deg, var(--gold-2) 0%, var(--gold) 55%, #D9A035 100%)",
        borderRadius: 32, padding: 32,
        boxShadow: "0 30px 60px -30px rgba(0,0,0,.25)",
        position: "relative", overflow: "hidden",
        minHeight: 380,
      }}>
        <div style={{
          position: "absolute", top: -80, right: -80, width: 260, height: 260,
          border: "1.5px dashed rgba(20,17,13,.22)", borderRadius: "50%",
        }} />
        <div style={{
          position: "absolute", top: -50, right: -50, width: 200, height: 200,
          border: "1.5px solid rgba(20,17,13,.16)", borderRadius: "50%",
        }} />

        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          marginBottom: 22,
        }}>
          <div>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              fontSize: 11, fontWeight: 600, color: "var(--ink)",
              opacity: 0.65, letterSpacing: "0.04em", textTransform: "uppercase",
            }}>Order #SC-08412 · Sample</div>
            <div style={{
              fontFamily: "Inter, sans-serif", fontWeight: 700,
              fontSize: 26, letterSpacing: "-0.02em", color: "var(--ink)",
              marginTop: 2,
            }}>Easy ordering to your APO/FPO/DPO</div>
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontSize: 12, fontWeight: 600, color: "var(--ink)",
            background: "var(--paper)", padding: "6px 10px", borderRadius: 999,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--gold)", boxShadow: "0 0 0 3px rgba(233,180,65,.25)" }} />
            In transit
          </div>
        </div>

        <div style={{
          background: "var(--paper)",
          borderRadius: 18, padding: 18,
          border: "1px solid rgba(20,17,13,.08)",
          position: "relative", zIndex: 1,
        }}>
          <div style={{ display: "grid", gap: 0 }}>
            {events.map((e, i) => {
              const reached = i <= tick;
              const isCurrent = i === tick;
              return (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "60px 18px 1fr",
                  gap: 12, alignItems: "center",
                  padding: "10px 0",
                  borderBottom: i < events.length - 1 ? "1px dashed var(--rule)" : "none",
                  transition: "opacity .35s",
                  opacity: reached ? 1 : 0.35,
                }}>
                  <span style={{
                    fontFamily: "ui-monospace, monospace", fontSize: 12,
                    color: "var(--ink-2)", letterSpacing: "-0.005em",
                  }}>{e.time}</span>
                  <span style={{
                    width: 12, height: 12, borderRadius: 999,
                    background: reached ? "var(--ink)" : "var(--rule)",
                    boxShadow: isCurrent ? "0 0 0 4px rgba(20,17,13,.12)" : "none",
                    transition: "all .35s",
                    justifySelf: "center",
                  }} />
                  <span style={{
                    fontSize: 13.5, color: "var(--ink)",
                    fontWeight: isCurrent ? 600 : 500,
                    letterSpacing: "-0.005em",
                  }}>{e.label}</span>
                </div>
              );
            })}
          </div>
        </div>

      </div>

      <div style={{
        position: "absolute", left: -16, top: -14,
        background: "var(--ink)", color: "var(--gold)",
        padding: "8px 14px", borderRadius: 999,
        fontSize: 12, fontWeight: 600,
        transform: "rotate(-6deg)",
        boxShadow: "0 8px 24px -8px rgba(0,0,0,.4)",
      }}>
        Mon–Fri · same-day on 96%+
      </div>
    </div>
  );
}

/* ─────────── Logos / proof ─────────── */
function ProofRow() {
  return (
    <div style={{
      maxWidth: 1320, margin: "0 auto", padding: "24px 28px 56px",
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, flexWrap: "wrap",
        paddingTop: 24, paddingBottom: 24,
        borderTop: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
      }}>
        <span style={{ fontSize: 13, color: "var(--ink-3)" }}>
          Trusted by service members and Fortune 500 retailers since 2006 ·
        </span>
        <div style={{ display: "flex", gap: 36, alignItems: "center", flexWrap: "wrap" }}>
          {["USPS", "BBB A+", "DOD", "Sony", "Toshiba", "Apple"].map(b => (
            <span key={b} style={{
              fontSize: 14, fontWeight: 600, letterSpacing: "0.04em",
              color: "var(--ink-3)",
              fontFamily: '"Inter", sans-serif',
            }}>{b}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─────────── How it works (box travel line) ─────────── */
function HowItWorks() {
  const steps = [
    { n: "01", title: "Get your address",  body: "Sign up free. We issue you a unique U.S. forwarding address.", icon: "address" },
    { n: "02", title: "Shop anywhere",      body: "Use it at checkout: Amazon, Best Buy, anywhere stateside.", icon: "cart" },
    { n: "03", title: "We ship it out",     body: "Most weekday packages go out the same day they arrive.", icon: "box" },
    { n: "04", title: "Lands at your APO",  body: "USPS and the Military Postal Service handle the overseas leg.", icon: "globe" },
  ];
  return (
    <section id="how" style={{
      maxWidth: 1320, margin: "0 auto", padding: "56px 28px 96px",
    }}>
      <div style={{ marginBottom: 56, maxWidth: 760 }}>
        <span className="eyebrow">How it works</span>
        <h2 style={{
          fontFamily: "Inter, sans-serif", fontWeight: 700,
          fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.0,
          letterSpacing: "-0.035em", margin: "16px 0 0",
          textWrap: "balance",
        }}>
          From checkout to your <span className="editorial" style={{ fontWeight: 400 }}>APO.</span>
        </h2>
      </div>

      <div style={{ position: "relative" }}>
        {/* Travel line behind everything */}
        <div className="apo-travel-line" style={{
          position: "absolute",
          left: "8%", right: "8%",
          top: 36,
          height: 2,
          background: `repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px)`,
          opacity: 0.5,
          zIndex: 0,
        }} />

        {/* Animated box riding the line */}
        <div className="apo-box-traveler" aria-hidden="true" style={{
          position: "absolute",
          top: 16,
          width: 44, height: 44,
          zIndex: 1,
        }}>
          <BoxIcon />
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))",
          gap: 32,
          position: "relative",
          zIndex: 2,
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display: "flex", flexDirection: "column",
              alignItems: "flex-start",
            }}>
              {/* Node circle on the line */}
              <div style={{
                width: 72, height: 72,
                borderRadius: "50%",
                background: "var(--bg)",
                border: "1.5px solid var(--ink)",
                display: "grid", placeItems: "center",
                marginBottom: 20,
                color: "var(--ink)",
                position: "relative",
                boxShadow: "0 0 0 8px var(--bg)",
              }}>
                <StepIcon kind={s.icon} />
                <span style={{
                  position: "absolute",
                  top: -8, right: -8,
                  background: "var(--ink)", color: "var(--gold)",
                  width: 26, height: 26, borderRadius: "50%",
                  display: "grid", placeItems: "center",
                  fontFamily: "ui-monospace, monospace",
                  fontSize: 11, fontWeight: 600,
                }}>{s.n}</span>
              </div>
              <h3 style={{
                margin: "0 0 8px",
                fontSize: 19, fontWeight: 600,
                letterSpacing: "-0.015em",
                color: "var(--ink)",
              }}>{s.title}</h3>
              <p style={{
                margin: 0, fontSize: 14.5, lineHeight: 1.55,
                color: "var(--ink-2)", maxWidth: 260,
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: 56, paddingTop: 24,
        borderTop: "1px solid var(--rule)",
        fontSize: 13, color: "var(--ink-3)",
        fontFamily: "ui-monospace, monospace",
      }}>
        Mon–Fri shipping · Most packages go out the same day they arrive
      </div>

      <style>{`
        @keyframes apoBoxRide {
          0%   { left: 25%; transform: translateY(0) rotate(-2deg); }
          33%  { left: 50%; transform: translateY(-3px) rotate(1deg); }
          66%  { left: 75%; transform: translateY(0) rotate(-1deg); }
          100% { left: 92%; transform: translateY(-2px) rotate(2deg); }
        }
        .apo-box-traveler {
          animation: apoBoxRide 7s cubic-bezier(.65,.05,.35,1) infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          .apo-box-traveler { animation: none; left: 50%; }
        }
      `}</style>
    </section>
  );
}

function BoxIcon() {
  return (
    <svg viewBox="0 0 44 44" width="44" height="44" style={{
      filter: "drop-shadow(0 6px 12px rgba(0,0,0,.18))",
    }}>
      <g transform="translate(2 4)">
        <path d="M20 0 L40 8 L40 30 L20 38 L0 30 L0 8 Z" fill="var(--gold)" stroke="var(--ink)" strokeWidth="1.5" strokeLinejoin="round"/>
        <path d="M0 8 L20 16 L40 8" fill="none" stroke="var(--ink)" strokeWidth="1.5" strokeLinejoin="round"/>
        <path d="M20 16 L20 38" stroke="var(--ink)" strokeWidth="1.5" />
        <path d="M14 4.5 L34 12.5" stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="2 2" opacity=".7"/>
      </g>
    </svg>
  );
}

function StepIcon({ kind }) {
  const stroke = "var(--ink)";
  const sw = 1.6;
  const props = { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "address") {
    // Shipping label
    return (
      <svg {...props}>
        <rect x="4" y="6" width="24" height="20" rx="2" fill="var(--gold)" />
        <path d="M8 11 H24" />
        <path d="M8 15 H20" />
        <path d="M8 19 H22" />
        <rect x="20" y="18" width="6" height="5" rx="1" fill="var(--ink)" stroke="none" />
        <path d="M21 19 V22 M22 19 V22 M23 19 V22 M24 19 V22 M25 19 V22" stroke="var(--gold)" strokeWidth="0.6" />
      </svg>
    );
  }
  if (kind === "cart") {
    // Shopping bag with star tag
    return (
      <svg {...props}>
        <path d="M7 11 L7 25 a2 2 0 0 0 2 2 h14 a2 2 0 0 0 2 -2 L25 11 Z" fill="var(--gold)" />
        <path d="M11 11 V8 a5 5 0 0 1 10 0 V11" />
        <path d="M12 16 L20 16" />
      </svg>
    );
  }
  if (kind === "box") {
    // Stylized package on motion lines
    return (
      <svg {...props}>
        <path d="M16 5 L26 9 L26 19 L16 23 L6 19 L6 9 Z" fill="var(--gold)" />
        <path d="M6 9 L16 13 L26 9" />
        <path d="M16 13 L16 23" />
        <path d="M3 26 L11 26" />
        <path d="M5 29 L13 29" />
      </svg>
    );
  }
  if (kind === "globe") {
    // Globe with destination pin
    return (
      <svg {...props}>
        <circle cx="14" cy="16" r="9" fill="var(--gold)" />
        <path d="M5 16 H23" />
        <path d="M14 7 C18 11 18 21 14 25 C10 21 10 11 14 7" />
        <path d="M24 8 a3 3 0 1 1 -6 0 a3 3 0 0 1 6 0 Z M21 11 V14" stroke={stroke} fill="var(--ink)" />
      </svg>
    );
  }
  return null;
}

/* ─────────── Big stat strip ─────────── */
function StatStrip() {
  return (
    <section style={{
      background: "var(--ink)", color: "var(--bg)",
      padding: "96px 0",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 28px" }}>
        <h2 style={{
          fontFamily: "Inter, sans-serif", fontWeight: 700,
          fontSize: "clamp(48px, 7vw, 112px)",
          lineHeight: 0.96, letterSpacing: "-0.04em",
          margin: 0, maxWidth: 1100, textWrap: "balance",
          color: "var(--bg)",
        }}>
          We've forwarded packages to <span style={{ color: "var(--gold)" }}>180+</span> bases and embassies, for <span className="editorial" style={{ fontWeight: 400, color: "var(--gold)" }}>twenty&nbsp;years</span>.
        </h2>
        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))",
          gap: 32,
          paddingTop: 40,
          borderTop: "1px solid color-mix(in oklab, var(--bg) 18%, transparent)",
        }}>
          {[
            ["180+", "Bases & embassies served worldwide"],
            ["2006", "Year we opened our doors"],
            ["A+", "Better Business Bureau rating"],
          ].map(([v, l], i) => (
            <div key={i}>
              <div style={{
                fontFamily: "Inter, sans-serif", fontWeight: 600,
                fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em",
                color: "var(--bg)", marginBottom: 12,
              }}>{v}</div>
              <div style={{
                fontSize: 13.5, lineHeight: 1.5,
                color: "color-mix(in oklab, var(--bg) 65%, transparent)",
                maxWidth: 240,
              }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Pricing ─────────── */
function Pricing() {
  return (
    <section id="pricing" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 28px" }}>
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <span className="eyebrow">Pricing</span>
        <h2 style={{
          fontFamily: "Inter, sans-serif", fontWeight: 700,
          fontSize: "clamp(40px, 5vw, 72px)",
          lineHeight: 1.0, letterSpacing: "-0.035em",
          margin: "16px 0 0", textWrap: "balance",
        }}>
          Two prices. <span className="editorial" style={{ fontWeight: 400 }}>That's it.</span>
        </h2>
        <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, marginTop: 16, maxWidth: 560 }}>
          You pay USPS postage at cost, plus our flat handling fee. No subscription, no per-item charges.
        </p>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(min(320px, 100%), 1fr))",
        gap: 16,
      }}>
        <PriceCard tag="Small" price="$10.95" note="Per package, 1 lb or less"
          details={["Customs paperwork included", "USPS Priority handoff"]} />
        <PriceCard tag="Standard" price="$12.95" note="Per package, over 1 lb"
          details={["Up to 130″ length+girth", "Customs paperwork included"]} />
        <PriceCard tag="Business" price="Let's talk" note="Volume + pick & pack"
          details={["For retailers and brands", "Custom integrations"]} />
      </div>

      <ExtraFees />
    </section>
  );
}

function ExtraFees() {
  const fees = [
    ["Inspection", "$5.00", "Lithium-battery / restricted-item check"],
    ["Insurance", "from $1.65", "Per $50 of declared value, tiered up from there"],
    ["Storage", "$1 / day", "After the 30-day grace period"],
    ["Return to sender", "$10.00", "When you'd rather not forward a package"],
    ["Misaddressed", "$5.00", "If a package needs re-routing on arrival"],
    ["Ship to U.S.", "$10.00", "Domestic forwarding instead of overseas"],
  ];
  return (
    <div style={{
      marginTop: 32,
      padding: 32,
      background: "var(--bg-2)",
      borderRadius: 24,
      border: "1px solid var(--rule)",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between",
        alignItems: "baseline", flexWrap: "wrap",
        gap: 12, marginBottom: 16,
      }}>
        <div>
          <span className="eyebrow">Add-ons</span>
          <h3 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: 24, letterSpacing: "-0.02em",
            margin: "8px 0 0",
          }}>Other fees, only when they apply.</h3>
        </div>
        <span style={{ fontSize: 13, color: "var(--ink-3)" }}>
          Customs paperwork is already included above.
        </span>
      </div>
      <div>
        {fees.map(([name, price, desc], i) => (
          <div key={name} style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            gap: 24,
            padding: "16px 0",
            borderTop: i === 0 ? "none" : "1px solid var(--rule)",
          }}>
            <div>
              <div style={{ fontSize: 15.5, fontWeight: 600, letterSpacing: "-0.005em" }}>{name}</div>
              <div style={{ fontSize: 13.5, color: "var(--ink-2)", marginTop: 2 }}>{desc}</div>
            </div>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              fontSize: 14.5, color: "var(--ink)",
              whiteSpace: "nowrap", fontWeight: 600,
            }}>{price}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PriceCard({ tag, price, note, details }) {
  return (
    <div style={{
      padding: 32,
      background: "var(--paper)",
      color: "var(--ink)",
      border: "1px solid var(--rule)",
      borderRadius: 24,
    }}>
      <div style={{ fontSize: 13, fontWeight: 500, opacity: 0.7 }}>{tag}</div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontWeight: 700,
        fontSize: 64, lineHeight: 1, letterSpacing: "-0.035em",
        margin: "12px 0 6px",
      }}>{price}</div>
      <div style={{ fontSize: 13.5, opacity: 0.7, marginBottom: 24 }}>{note}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {details.map((d) => (
          <li key={d} style={{
            fontSize: 14, lineHeight: 1.5,
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7l3 3 5-6" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {d}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ─────────── Business band ─────────── */
function BusinessBand() {
  return (
    <section id="business" style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 96px" }}>
      <div style={{
        background: "var(--gold)", borderRadius: 32,
        padding: "56px 48px",
        position: "relative", overflow: "hidden",
        border: "1px solid var(--ink)",
      }}>
        <div style={{
          position: "absolute", top: -120, right: -120, width: 360, height: 360,
          background: "radial-gradient(circle, rgba(20,17,13,.12), transparent 70%)",
        }} />
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(380px, 100%), 1fr))",
          gap: 48, alignItems: "end", position: "relative",
        }}>
          <div>
            <span style={{
              fontSize: 12, fontWeight: 600, letterSpacing: "0.04em",
              color: "var(--ink)", opacity: 0.7,
            }}>FOR BRANDS & RETAILERS</span>
            <h2 style={{
              fontFamily: "Inter, sans-serif", fontWeight: 700,
              fontSize: "clamp(40px, 5.4vw, 80px)",
              lineHeight: 0.96, letterSpacing: "-0.04em",
              margin: "16px 0 16px", color: "var(--ink)", textWrap: "balance",
            }}>
              Make your store <span className="editorial" style={{ fontWeight: 400 }}>APO-friendly</span> in a week.
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: "var(--ink)",
              maxWidth: 560, opacity: 0.8,
            }}>
              We work with retailers who want to serve the 1.1M U.S. military and
              government families overseas, without taking on the customs and
              consolidation work themselves.
            </p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", flexWrap: "wrap", gap: 12 }}>
            <Btn variant="dark" size="lg" as="a" href="/contact">
              Talk to our team <Arrow />
            </Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── FAQ ─────────── */
function FAQ() {
  const items = [
    { q: "Why do some retailers refuse APO/FPO addresses?",
      a: "Most have bulk shipping contracts with FedEx or UPS, which can't deliver to military post offices. Others don't handle the customs paperwork. We solve both. They ship to a normal U.S. address, and we take it from there." },
    { q: "How long does forwarding take?",
      a: "On weekdays, 96%+ of packages we receive ship the same day. We operate Monday–Friday, so packages arriving on weekends go out the next business day. Once a package is with USPS, transit times to APO/FPO/DPO can vary, but we move fast on our end." },
    { q: "Are there package size limits?",
      a: "Yes. USPS APO/FPO regulations cap regular packages at 108″ length+girth, and oversize packages at up to 130″. We'll repack anything close to the limit. If something's truly oversize, we'll let you know before charging anything." },
    { q: "What about restricted items?",
      a: "Standard USPS APO/FPO restrictions apply (no aerosols, no large lithium batteries, etc). When something can't ship, we'll hold it and contact you with options." },
    { q: "Is this only for active military?",
      a: "Nope. Anyone with a valid APO, FPO, or DPO address can use us: diplomats, contractors, spouses, family. If you have the address, we can ship to it." },
    { q: "Do you do business / e-commerce integrations?",
      a: "Yes. We work with retailers who want to be APO-friendly out of the box. Pick & pack services available; get in touch." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 28px" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))",
        gap: 56, alignItems: "start",
      }}>
        <div>
          <span className="eyebrow">Questions</span>
          <h2 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(36px, 4.4vw, 60px)",
            lineHeight: 1.0, letterSpacing: "-0.035em",
            margin: "16px 0 0", textWrap: "balance",
          }}>
            The ones <span className="editorial" style={{ fontWeight: 400 }}>everyone</span> asks first.
          </h2>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: "1px solid var(--rule)",
                borderBottom: i === items.length - 1 ? "1px solid var(--rule)" : "none",
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left",
                    background: "transparent", border: "none",
                    padding: "20px 0", cursor: "pointer",
                    display: "flex", alignItems: "center", gap: 16,
                    color: "var(--ink)", fontFamily: "inherit",
                  }}
                >
                  <span style={{ fontSize: 17, fontWeight: 600, flex: 1, letterSpacing: "-0.005em" }}>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen ? "var(--ink)" : "var(--bg-2)",
                    color: isOpen ? "var(--gold)" : "var(--ink)",
                    display: "grid", placeItems: "center",
                    fontSize: 18, fontWeight: 500,
                    transition: "all .25s",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                  }}>+</span>
                </button>
                <div style={{
                  display: "grid",
                  gridTemplateRows: isOpen ? "1fr" : "0fr",
                  transition: "grid-template-rows .3s ease",
                }}>
                  <div style={{ overflow: "hidden" }}>
                    <p style={{
                      margin: 0, padding: "0 0 22px 0",
                      fontSize: 15.5, lineHeight: 1.65, color: "var(--ink-2)",
                      maxWidth: 640,
                    }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Big CTA ─────────── */
function FinalCTA({ onSignup }) {
  return (
    <section style={{ maxWidth: 1320, margin: "0 auto", padding: "0 28px 96px" }}>
      <div style={{
        background: "var(--ink)", color: "var(--bg)",
        borderRadius: 32, padding: "72px 48px",
        textAlign: "center",
        position: "relative", overflow: "hidden",
      }}>
        <h2 style={{
          fontFamily: "Inter, sans-serif", fontWeight: 700,
          fontSize: "clamp(48px, 7vw, 112px)",
          lineHeight: 0.95, letterSpacing: "-0.04em",
          margin: "0 auto 24px", maxWidth: 1100, textWrap: "balance",
          color: "var(--bg)",
        }}>
          Get a U.S. address in <span className="editorial" style={{ fontWeight: 400, color: "var(--gold)" }}>30 seconds.</span>
        </h2>
        <p style={{
          fontSize: 18, lineHeight: 1.55,
          color: "color-mix(in oklab, var(--bg) 70%, transparent)",
          maxWidth: 560, margin: "0 auto 36px",
        }}>
          Sign up free. No monthly fee. Just the address you've been missing.
        </p>
        <Btn variant="gold" size="lg" onClick={onSignup}>
          Get my address <Arrow />
        </Btn>
      </div>
    </section>
  );
}

/* ─────────── Footer ─────────── */
function Footer() {
  return (
    <footer style={{ padding: "48px 28px 36px", borderTop: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))",
          gap: 40, marginBottom: 40,
        }}>
          <div>
            <Logo />
            <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 16, maxWidth: 320, lineHeight: 1.55 }}>
              A U.S. forwarding address for service overseas. Shipping for military
              and government families since 2006.
            </p>
          </div>
          {[
            ["Product", [["How it works", "#how"], ["Pricing", "#pricing"], ["FAQ", "#faq"]]],
            ["Business", [["Retailers", "/pick-and-pack"], ["Pick & pack", "/pick-and-pack"], ["Volume rates", "/pick-and-pack"], ["Contact", "/contact"]]],
            ["Help", [["Help desk ↗", "https://support.apobox.com", true], ["Track a package", "#"], ["Sign in", "https://account.apobox.com/account"]]],
          ].map(([title, links]) => (
            <div key={title}>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.04em", marginBottom: 14, textTransform: "uppercase" }}>{title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
                {links.map(([l, h, ext]) => (
                  <li key={l}>
                    <a href={h} target={ext ? "_blank" : undefined} rel={ext ? "noopener" : undefined}
                      style={{ color: "var(--ink-2)", textDecoration: "none", fontSize: 14 }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 24, borderTop: "1px solid var(--rule)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap",
          gap: 16, fontSize: 13, color: "var(--ink-3)",
        }}>
          <span>© 2026 APO Box, Inc. · Since 2006</span>
          <span style={{ display: "inline-flex", gap: 20 }}>
            <a href="/privacy-policy" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="/terms-of-service" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────── Signup modal ─────────── */
const ZONE_BY_REGION = { AA: 7, AE: 9, AP: 11 };

async function apiPost(path, attributes, type) {
  const resp = await fetch(path, {
    method: "POST",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/vnd.api+json",
      "Accept": "application/vnd.api+json",
    },
    body: JSON.stringify({ data: { type, attributes } }),
  });
  let body = null;
  try { body = await resp.json(); } catch (_) {}
  if (!resp.ok) {
    const title = body?.errors?.[0]?.title || "Something went wrong. Please try again.";
    const err = new Error(title);
    err.status = resp.status;
    throw err;
  }
  return body;
}

function SignupModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [showSignIn, setShowSignIn] = useState(false);
  const [data, setData] = useState({
    customers_firstname: "",
    customers_lastname: "",
    customers_email_address: "",
    customers_password: "",
    password_confirm: "",
    entry_street_address: "",
    entry_suburb: "",
    entry_city: "APO",
    region: "AE",
    entry_postcode: "",
    entry_basename: "",
    terms_of_service: false,
  });
  const [customer, setCustomer] = useState(null);
  const update = (k) => (v) => setData((d) => ({ ...d, [k]: v }));

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape" && !busy) onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, busy, onClose]);

  if (!open) return null;

  const submitStep1 = async () => {
    if (!data.customers_firstname.trim()) return setError("First name is required.");
    if (!data.customers_lastname.trim()) return setError("Last name is required.");
    if (!/\S+@\S+\.\S+/.test(data.customers_email_address)) return setError("Enter a valid email address.");
    if (data.customers_password.length < 6) return setError("Password must be at least 6 characters.");
    if (data.customers_password !== data.password_confirm) return setError("Passwords don't match.");
    setError(""); setShowSignIn(false); setBusy(true);
    try {
      const resp = await apiPost("/api/customers", {
        customers_firstname: data.customers_firstname,
        customers_lastname: data.customers_lastname,
        customers_email_address: data.customers_email_address,
        customers_password: data.customers_password,
        password_confirm: data.password_confirm,
      }, "customers");
      setCustomer(resp.data);
      setStep(1);
    } catch (e) {
      if (/already exists/i.test(e.message)) {
        setError("This email address already has an account.");
        setShowSignIn(true);
      } else {
        setError(e.message);
      }
    } finally { setBusy(false); }
  };

  const submitStep2 = async () => {
    if (!data.entry_street_address.trim()) return setError("Street address is required.");
    if (data.entry_postcode.trim().length < 5) return setError("ZIP code must be at least 5 digits.");
    if (!data.terms_of_service) return setError("Please accept the Terms of Service.");
    setError(""); setBusy(true);
    try {
      await apiPost("/api/addresses", {
        customers_id: customer.id,
        entry_firstname: data.customers_firstname,
        entry_lastname: data.customers_lastname,
        entry_street_address: data.entry_street_address,
        entry_suburb: data.entry_suburb,
        entry_city: data.entry_city,
        entry_zone_id: ZONE_BY_REGION[data.region],
        entry_postcode: data.entry_postcode,
        entry_basename: data.entry_basename,
        terms_of_service: "on",
      }, "shipping_addresses");
      setStep(2);
    } catch (e) {
      setError(e.message);
    } finally { setBusy(false); }
  };

  return (
    <div onClick={busy ? null : onClose} style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "color-mix(in oklab, black 55%, transparent)",
      display: "grid", placeItems: "center",
      animation: "fadeIn .2s ease",
      padding: 24,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(560px, 100%)",
        background: "var(--paper)", borderRadius: 24,
        animation: "popIn .25s cubic-bezier(.2,.8,.2,1)",
        boxShadow: "0 60px 120px -40px rgba(0,0,0,.45)",
        overflow: "hidden",
      }}>
        <div style={{
          padding: "20px 24px",
          borderBottom: "1px solid var(--rule)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-3)" }}>
            Step {step + 1} of 3
          </span>
          <button onClick={onClose} disabled={busy} style={{
            background: "transparent", border: "none",
            cursor: busy ? "not-allowed" : "pointer",
            color: "var(--ink-3)", fontSize: 20, padding: 4, opacity: busy ? 0.4 : 1,
          }}>×</button>
        </div>

        <div style={{ display: "flex", height: 3 }}>
          {[0, 1, 2].map((i) => (
            <div key={i} style={{ flex: 1, background: i <= step ? "var(--gold)" : "var(--rule)", transition: "background .3s" }} />
          ))}
        </div>

        <div style={{ padding: "32px 32px 8px" }}>
          {step === 0 && (
            <>
              <h2 style={{ fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 32, margin: "0 0 8px", letterSpacing: "-0.02em" }}>
                Get your address.
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, marginBottom: 24 }}>
                Free signup. We'll set up your account, then ask for your APO address.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
                <Inp label="First name" value={data.customers_firstname} onChange={update("customers_firstname")} />
                <Inp label="Last name" value={data.customers_lastname} onChange={update("customers_lastname")} />
              </div>
              <Inp label="Email" type="email" value={data.customers_email_address} onChange={update("customers_email_address")} />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12 }}>
                <Inp label="Password" type="password" value={data.customers_password} onChange={update("customers_password")} />
                <Inp label="Confirm password" type="password" value={data.password_confirm} onChange={update("password_confirm")} />
              </div>
            </>
          )}
          {step === 1 && (
            <>
              <h2 style={{ fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 32, margin: "0 0 8px", letterSpacing: "-0.02em" }}>
                Your APO address.
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, marginBottom: 24 }}>
                We'll forward packages to this address. Must be a real APO, FPO, or DPO.
              </p>
              <Inp label="Street address" value={data.entry_street_address} onChange={update("entry_street_address")} />
              <div style={{ marginTop: 12 }}>
                <Inp label="Address line 2 (optional)" value={data.entry_suburb} onChange={update("entry_suburb")} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 16, marginBottom: 16 }}>
                <SegPick label="City" options={["APO", "FPO", "DPO"]} value={data.entry_city} onChange={update("entry_city")} />
                <SegPick label="Region" options={["AE", "AP", "AA"]} value={data.region} onChange={update("region")} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12 }}>
                <Inp label="ZIP" value={data.entry_postcode} onChange={update("entry_postcode")} />
                <Inp label="Base / ship name" value={data.entry_basename} onChange={update("entry_basename")} />
              </div>
              <label style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 18, fontSize: 13.5, color: "var(--ink-2)", cursor: "pointer" }}>
                <input type="checkbox" checked={data.terms_of_service}
                  onChange={(e) => update("terms_of_service")(e.target.checked)}
                  style={{ width: 16, height: 16, accentColor: "var(--ink)" }} />
                I accept the <a href="/terms-of-service" target="_blank" rel="noopener" style={{ color: "var(--ink)", textDecorationThickness: 1 }}>Terms of Service</a>
              </label>
            </>
          )}
          {step === 2 && (
            <>
              <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--gold)", color: "var(--ink)", display: "grid", placeItems: "center", marginBottom: 20 }}>
                <svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <h2 style={{ fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 32, margin: "0 0 8px", letterSpacing: "-0.02em" }}>
                You're all set, {data.customers_firstname || "soldier"}.
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, marginBottom: 20 }}>
                Use this U.S. forwarding address at any retailer. We sent the details to <strong style={{ color: "var(--ink)" }}>{data.customers_email_address}</strong>.
              </p>
              <div style={{ background: "var(--bg-2)", borderRadius: 12, padding: 18, fontFamily: "ui-monospace, monospace", fontSize: 13.5, lineHeight: 1.7, color: "var(--ink)" }}>
                <div>{(data.customers_firstname + " " + data.customers_lastname).toUpperCase().trim()}</div>
                <div>Attn: {customer?.id}</div>
                <div>1911 Western Ave</div>
                <div>Plymouth, IN 46563</div>
                <div>United States</div>
              </div>
            </>
          )}
        </div>

        {error && (
          <div style={{ margin: "0 32px", padding: "10px 14px", background: "color-mix(in oklab, var(--warm) 12%, transparent)", color: "var(--warm)", borderRadius: 10, fontSize: 13.5, fontWeight: 500 }}>
            {error}
            {showSignIn && (
              <> <a href="https://account.apobox.com/account" style={{ color: "var(--ink)", fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 2 }}>Sign in →</a></>
            )}
          </div>
        )}

        <div style={{ padding: "20px 24px 24px", marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--rule)" }}>
          {step === 1 ? (
            <button onClick={() => !busy && setStep(0)} disabled={busy} style={{ background: "transparent", border: "none", cursor: busy ? "not-allowed" : "pointer", color: "var(--ink-2)", fontSize: 14, fontFamily: "inherit", opacity: busy ? 0.4 : 1 }}>← Back</button>
          ) : <span />}
          {step === 0 && (
            <Btn variant="dark" disabled={busy} onClick={submitStep1} style={{ opacity: busy ? 0.5 : 1 }}>
              {busy ? "Creating..." : <>Continue <Arrow /></>}
            </Btn>
          )}
          {step === 1 && (
            <Btn variant="dark" disabled={busy} onClick={submitStep2} style={{ opacity: busy ? 0.5 : 1 }}>
              {busy ? "Saving..." : <>Get my address <Arrow /></>}
            </Btn>
          )}
          {step === 2 && (
            <Btn variant="dark" as="a" href="https://account.apobox.com/account">Take me to my dashboard</Btn>
          )}
        </div>
      </div>
      <style>{`
        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes popIn { from { transform: translateY(12px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
      `}</style>
    </div>
  );
}

function Inp({ label, type = "text", value, onChange }) {
  return (
    <label style={{ display: "grid", gap: 6 }}>
      <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>{label}</span>
      <input
        type={type} value={value} onChange={(e) => onChange(e.target.value)}
        style={{
          padding: "12px 14px",
          border: "1px solid var(--rule)",
          background: "var(--paper)",
          fontFamily: "inherit", fontSize: 14.5, color: "var(--ink)",
          outline: "none", borderRadius: 12,
          transition: "border-color .15s, box-shadow .15s",
        }}
        onFocus={(e) => { e.target.style.borderColor = "var(--ink)"; e.target.style.boxShadow = "0 0 0 3px rgba(20,17,13,.08)"; }}
        onBlur={(e) => { e.target.style.borderColor = "var(--rule)"; e.target.style.boxShadow = "none"; }}
      />
    </label>
  );
}

function SegPick({ label, options, value, onChange }) {
  return (
    <div style={{ display: "grid", gap: 6 }}>
      <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>{label}</span>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 6, padding: 4, background: "var(--bg-2)", borderRadius: 12 }}>
        {options.map((o) => (
          <button key={o} type="button" onClick={() => onChange(o)} style={{
            border: "none",
            background: o === value ? "var(--ink)" : "transparent",
            color: o === value ? "#fff" : "var(--ink-2)",
            padding: "10px 8px", fontFamily: "inherit", fontSize: 13.5,
            fontWeight: 600, cursor: "pointer", borderRadius: 8,
            transition: "background .15s, color .15s",
          }}>{o}</button>
        ))}
      </div>
    </div>
  );
}

/* ─────────── Terms of Service page ─────────── */
const TOS_PARAGRAPHS = [
  `Norsac LLC, DBA APO Box is the sole owner "APO Box Addresses and APOBox Member Accounts." The "APO Box Addresses and APO Box Member Accounts" are being made available to "Members," as well as the sale of related services that APOBox offers to its Members. The Services are provided to you, as a "Member," under the terms of this Mail and Parcel Service Agreement and any amendments thereto and any operating rules or policies that may be published from time to time by APOBox (the "Parcel Service Agreement" or "PSA").`,
  `BY COMPLETING THE NEW ACCOUNT INFORMATION AT THE APOBox WEBSITE AND CHECKING THE BOX INDICATING THAT YOU HAVE READ AND AGREE TO APOBox's TERMS OF USE, YOU ARE AGREEING TO BE BOUND BY THE MAIL AND PARCEL SERVICE AGREEMENT.`,
  `By having ANY mail or parcel or package sent to the Member's "APOBox Address," the Member appoints APOBox as agent for receipt of any mail or parcel or package addressed to the Member or Member's authorized users listed in the Member's account profile, including signing for parcels upon receipt. APOBox is authorized to forward subject mail or parcel or package to the Member's designated APO/FPO address or Emergency Shipping Address as indicated in Member's account profile, as the Member selects in account preferences. The Member will be charged ALL applicable mailing or shipping charges incurred when forwarding any mail or parcel or package via the USPS, UPS, Federal Express, DHL, or any other carrier. Member may elect to purchase insurance at the rates published on the APOBox website for any mail or parcel or package forwarded on behalf of the Member. In addition to the shipping charges or postage and any insurance purchased, the Member will be charged a "service charge" for processing subject mail or parcel or package forwarded on the Member's behalf.`,
  `Member agrees to assume full responsibility to ensure that the person to whom forwarded mail or parcel or package is addressed at any APO or FPO address (APO/FPO address holder) is eligible to receive subject mail or parcel or package at the APO/FPO address indicated in Member's account profile. Member agrees to assume full responsibility to ensure the accuracy, completeness and legitimacy of the APO/FPO address and APO/FPO address holder. Member agrees to hold harmless APOBox for forwarding any mail or parcel or package to persons not eligible to receive subject mail or parcel or package at the APO/FPO address indicated in Member's account profile.`,
  `APOBox may change the MAIL AND PARCEL SERVICE AGREEMENT from time to time. The Member will be notified of any such changes via an e-mail sent to the address in the Member's account profile at the time of the change to the PSA. By maintaining an account with APOBox, the Member agrees to be bound by any modifications to the Mail and Parcel Service Agreement.`,
  `The Member will create a password and receive a "APOBox Address and APOBox Member Account" designation during the new account registration process. The Member is responsible for maintaining the confidentiality of the password and is fully responsible for all activities that occur under the Member's Account password. The Member agrees to immediately notify APOBox of any unauthorized use of the Member's password, "APOBox Address and APOBox Member Account" or any other breach of security.`,
  `The Member hereby subscribes for services provided on behalf of the Member by APOBox. An up-to-date list detailing available services and fees will be maintained on the APOBox website.`,
  `Charges for postage, shipping, any insurance and APOBox service charge are due and payable when mail or parcel or package is forwarded for the Member. NO MAIL OR PARCEL OR PACKAGE WILL BE FORWARDED UNTIL PAYMENT IN FULL HAS BEEN MADE. The Member agrees to furnish accurate, up-to-date, complete and nonfraudulent account funding (such as credit card) and billing information and authorizes APOBox to maintain such information in Member's account profile. The Member agrees that all payments will be made using the account funding information in the Member's account profile at the time mail or parcel or package is forwarded on behalf of the Member. The Member can update or change the account funding information in their account profile, and the Member authorizes APOBox to charge the credit card on file or debit Member's account balance when mail or parcel or package is forwarded on behalf of the Member with no further authorization. The Member acknowledges and agrees that APOBox may return any received mail or parcel or package to the sender in the event Member's credit card cannot be charged or account debited for payment(s) due for the forwarding of said mail or parcel or package on behalf of Member. The Member may be billed for any charges incurred in returning said mail or parcel or package.`,
  `In the event that a Member's credit card on file cannot be properly charged or Member's account balance contains insufficient funds at the time mail or parcel or package is processed for forwarding, Member agrees that a $2.00 service charge will be levied. If after three days (grace period), the credit card on file cannot still be charged or the Member's account has insufficient funds, subject mail or parcel or package will accrue a storage fee of $2.00 per day, which must be paid before APOBox will forward subject mail or parcel or package on behalf of Member.`,
  `With a valid APOBox address appearing, a mail or parcel or package will be accepted for delivery for only the Member and up to four (4) additional persons authorized by the Member. The Member's account profile at the time mail or parcel or package is received will be used to determine authorized users. In the event that a person's name other than that of Member or Member's authorized users appears on mail or parcel or packages along with Member's APOBox address, APOBox will refuse to accept delivery of subject mail or parcel or package and have subject mail or parcel or package returned to the sender. The Member may be responsible for any postage, shipping, any insurance fees, APOBox service charge and any other fees associated with such return.`,
  `Member acknowledges and agrees that any mail or parcel or package received at Member's APOBox address and forwarded as indicated in Member's account profile on behalf of Member's authorized users as indicated in Member's account profile at the time subject package was forwarded was done so on the behalf of the Member. Member acknowledges and agrees that any such mail or parcel or package as described above is deemed Member's mail or parcel or package and agrees to assume full payment responsibility for any subject parcel and package forwarded as described above.`,
  `In event that any mail or parcel or package is returned to APOBox after APOBox has forwarded subject mail or parcel or package on behalf of Member to Member's designated APO/FPO address as indicated in Member's account profile, APOBox will forward subject mail or parcel or package to Member's designated Emergency Shipping Address as indicated in Member's account profile. At that time, if Member's credit card cannot be charged for payment(s) due for forwarding of subject mail or parcel or package on behalf of Member, Member acknowledges and agrees that subject mail or parcel or package will accrue a storage fee of $2.00 per day, which must be paid before APOBox will release subject mail or parcel or package to Member. Member further acknowledges and agrees to make special arrangements with APOBox to have said mail or parcel or package released to Member.`,
  `In event that a mail or parcel or package is returned to APOBox after APOBox has forwarded subject mail or parcel or package on behalf of Member to Member's designated Emergency Shipping Address as indicated in Member's account profile at the time of forwarding, Member acknowledges and agrees that subject mail or parcel or package will accrue a storage fee of $2.00 per day, which must be paid before APOBox will release subject mail or parcel or package to Member. Member further acknowledges and agrees to make special arrangements with APOBox to have said mail or parcel or package released to Member.`,
  `In the event mail or parcel or package cannot be forwarded to a Member's designated APO/FPO address on record, due to, but not limited to, mail or parcel or package exceeding any USPS mailing restriction or being found damaged upon receipt, a $2.00 per day storage fee will apply until alternate shipping arrangements can be made at the direction of the Member.`,
  `APOBox may refuse to accept on behalf of the Member "postage due" and/or COD items unless special financial arrangements and prepayment are made and agreed to by APOBox in its sole discretion IN ADVANCE of delivery of such items.`,
  `The Member acknowledges and agrees that any mail or parcel or package shall be deemed forwarded to Member upon tender to the USPS, UPS, Federal Express, DHL, or other carrier. The Member expressly relieves and excuses APOBox from any further responsibilities with respect to forwarded mail or parcel or package. The Member agrees that use of the assigned "APOBox Address and APOBox Member Account" shall be for the purpose of forwarding any mail or parcel or package properly addressed and delivered to Member's APOBox address and for procuring other services as may be purchased from APOBox and shall not use or permit the assigned "APOBox Address and APOBox Member Account" to be used for any other purpose.`,
  `The Member agrees that Member will not use the "APOBox Address and APOBox Member Account" or any APOBox services for any unlawful, illegitimate or fraudulent purposes or for any purpose prohibited by United States postal regulations. The Member further agrees that any use of the "APOBox Address and APOBox Member Account" shall be in conformity with all applicable federal, state and local laws. APOBox also reserves the right to immediately terminate any service upon suspicion of fraud or illegal activities. APOBox will cooperate aggressively with all local, state and federal agencies and will release information about the Member to such agencies and all postal inspectors upon request. The Member also acknowledges and agrees to hold APOBox harmless for any mail or parcel or package seized as part of any investigation being conducted by any law enforcement personnel. The Member agrees that APOBox, as required to determine suitability for mail or parcel or package forwarding and/or determining the correct Member, may open and inspect the contents of any mail or parcel or package received at any APOBox facility.`,
  `It is the Member's sole responsibility to ensure that no packages are sent to their APOBox address that contain any items that violate U.S. Postal Service restrictions for mailing. APOBox will refuse to accept delivery of any package found to contain items that violate U.S. Postal Service restrictions for mailing. In no event shall APOBox be liable for any shipping costs, damages or loss of any mail or parcel or package of which APOBox has refused to accept delivery. APOBox will not keep a record of any packages that are refused at delivery and will not be held liable for any notification to Member of said refusal.`,
  `The address for the "APOBox Address" shall be provided upon completion of the APOBox Member Account registration process. The Member agrees to use such address in exact format without modification when having mail or parcel or packaged delivered to any APOBox facility. Member agrees to ensure that the authorized users adhere to exact address format without modification. Member further acknowledges and agrees that any mail or parcel or package delivered to any APOBox facility without Member's APOBox address in its exact format may be refused and returned to the sender. Member may be responsible for any postage, shipping, any insurance fees, APOBox service charge and any other fees associated with such return.`,
  `In no event shall APOBox be liable for any damages or loss of any mail or parcel or package delivered to any address that is not the Member's APOBox address.`,
  `The term of this Agreement and any new Agreements shall be the period the Member is in good standing with APOBox or as long as the Member or Member's authorized users continue(s) to have any mail or parcel or package sent to Member's "APOBox Address." Renewals of this Agreement for additional terms shall be at the sole discretion of APOBox.`,
  `The Member agrees that APOBox may terminate or cancel this Agreement at any time by providing the Member thirty (30) days written, e-mail or other electronic notice. However, in the event a Member or Member's Authorized users uses, or is suspected by APOBox of using, the "APOBox Address and APOBox Member Account" for unlawful, illegitimate, or fraudulent purposes, APOBox has the right to terminate this Agreement immediately. The actions of any person authorized by the Member to use the "APOBox Address and APOBox Member Account" will be attributed to the Member.`,
  `Upon termination of this Agreement for any reason, APOBox will refuse or return to the sender any mail or parcel or package delivered to the Member's "APOBox Address." The Member may be billed for any charges incurred in returning said mail or parcel or package.`,
  `The Member agrees to protect, defend, indemnify and hold harmless APOBox, from and against any and all claims, liabilities, judgments, penalties, losses, costs, damages and expenses (including attorneys fees and all related costs at all trial and appellate levels, if any, whether or not litigation is instituted) suffered or incurred by APOBox, including, without limitation, any claim for personal injury or property damage, arising from: (a) the Member's use of the "APOBox Address and APOBox Member Account" (b) the failure of the U.S. Postal Service or any commercial courier service to deliver, or to deliver on time, any mail or parcel or package; (c) damage to or loss of any mail or parcel or package or damage to the "APOBox Address" contents by any cause whatsoever; and (d) any violation by Member of applicable federal, state or local laws. The indemnified parties under this Section shall include APOBox and its affiliates, subsidiaries, parents, shareholders, successors, assigns, representatives, officers, directors, agents and employees.`,
  `IN NO EVENT SHALL APOBox BE LIABLE FOR ANY DAMAGE TO OR LOSS OF ANY MAIL OR PARCEL OR PACKAGE OCCURRING DURING SHIPMENT TO THE MEMBER. THE MEMBER ACKNOWLEDGES AND AGREES THAT THE MEMBER IS FULLY RESPONSIBLE FOR ANY AND ALL CUSTOMS AND/OR NATIONALIZATION FEES, TAXES, OR OTHER CHARGES OF WHATEVER NATURE RELATING TO THE SHIPMENT OF ANY MAIL OR PARCEL OR PACKAGE TO THE MEMBER.`,
  `THE MEMBER EXPRESSLY AGREES THAT USE OF THE "APOBox ADDRESS AND APOBox MEMBER ACCOUNT" IS AT MEMBER'S SOLE RISK. ANY SERVICES PROVIDED BY APOBox TO ITS MEMBERS IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS. APOBox MAKES NO WARRANTY THAT THESE SERVICES WILL MEET THE USER'S REQUIREMENTS, THAT THE MAIL OR PARCEL OR PACKAGE DELIVERY SERVICE WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR FREE. THE MEMBER UNDERSTANDS AND AGREES THAT ANY MATERIAL AND/OR DATA DOWNLOADED OR OTHERWISE OBTAINED THROUGH THE USE OF OR FROM APOBox'S WEBSITE IS DONE AT MEMBER'S OWN DISCRETION AND RISK AND THAT MEMBER WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE RESULTING TO MEMBER'S COMPUTER SYSTEM OR LOSS OF DATA THAT RESULTS FROM THE DOWNLOAD OF SUCH MATERIAL AND/OR DATA. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF CERTAIN WARRANTIES, SO SOME OF THE ABOVE EXCLUSIONS MAY NOT APPLY TO YOU.`,
  `THE MEMBER HEREIN AGREES THAT THE TOTAL AMOUNT OF LIABILITY OF APOBox, IF ANY, FOR ANY AND ALL CLAIMS ARISING OUT OF OR RELATED TO THIS AGREEMENT SHALL NOT EXCEED THE APOBox SERVICE CHARGE CHARGED TO THE MEMBER BY APOBox REGARDLESS OF THE NATURE OF THE CLAIM.`,
  `Any written notice to the Member required or permitted hereunder shall be deemed delivered twenty-four (24) hours after posting of such notice to the Member's e-mail address as indicated in Member's account profile.`,
  `This Agreement shall be construed and interpreted in accordance with the laws of Iowa without regard to the conflicts of laws provisions thereof, and the parties consent and stipulate to venue in the state and federal courts in and for Iowa as to any and all litigation arising hereunder.`,
  `If any section or any portion of any section of this Agreement shall be construed to be illegal, invalid or unenforceable, such provision or portion thereof shall be deemed stricken and deleted from this Agreement, but all other sections of this Agreement and the remaining portion of any section which is construed to be illegal, invalid or unenforceable in part shall continue in full force and effect.`,
  `A failure of either party to enforce at any time any term, provision, or condition of this Agreement, or to exercise any right or option herein, shall in no way operate as a waiver thereof.`,
];

function TermsPage() {
  return (
    <>
      <Header onSignup={() => { window.location.href = "/"; }} />
      <main>
        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "48px 28px 56px" }}>
          <span className="eyebrow">Legal</span>
          <h1 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(48px, 7vw, 96px)",
            lineHeight: 0.96, letterSpacing: "-0.04em",
            margin: "16px 0 12px", textWrap: "balance",
          }}>
            APOBox <span className="editorial" style={{ fontWeight: 400 }}>Service Agreement.</span>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 720, margin: 0 }}>
            The Mail and Parcel Service Agreement between you and Norsac LLC (DBA APO Box). These are
            the terms you accept when you create an account.
          </p>
        </section>

        <section style={{ maxWidth: 760, margin: "0 auto", padding: "0 28px 96px" }}>
          <ol style={{
            listStyle: "none", padding: 0, margin: 0,
            counterReset: "tos-counter",
          }}>
            {TOS_PARAGRAPHS.map((p, i) => (
              <li key={i} style={{
                paddingTop: 24, paddingBottom: 24,
                borderTop: i === 0 ? "1px solid var(--rule)" : "none",
                borderBottom: "1px solid var(--rule)",
                display: "grid",
                gridTemplateColumns: "44px 1fr",
                gap: 16,
                alignItems: "baseline",
              }}>
                <span style={{
                  fontFamily: "ui-monospace, SF Mono, monospace",
                  fontSize: 13, fontWeight: 600,
                  color: "var(--ink-3)",
                  letterSpacing: "0.02em",
                  paddingTop: 2,
                }}>{String(i + 1).padStart(2, "0")}</span>
                <p style={{
                  margin: 0,
                  fontSize: 15.5, lineHeight: 1.7,
                  color: "var(--ink)",
                  textWrap: "pretty",
                }}>{p}</p>
              </li>
            ))}
          </ol>
          <p style={{
            marginTop: 40, padding: "20px 24px",
            background: "var(--bg-2)", borderRadius: 16,
            fontSize: 13.5, lineHeight: 1.6, fontWeight: 600,
            letterSpacing: "0.01em",
            color: "var(--ink)",
          }}>
            USE OF THE APOBox WEB SITE CONSTITUTES ACCEPTANCE OF THE APOBox USER AGREEMENT AND PRIVACY POLICY.
          </p>
        </section>
      </main>
      <Footer />
    </>
  );
}

/* ─────────── Privacy Policy page ─────────── */
const PRIVACY_PARAGRAPHS = [
  `For each visitor to our Web page, our Web server automatically recognizes only the consumer's domain name, but not the e-mail address (where possible).`,
  `We collect aggregate information on what pages consumers access or visit, user-specific information on what pages consumers access or visit, information volunteered by the consumer, such as survey information and/or site registrations, name and address, telephone number, fax number, payment information (e.g., credit card number and billing address).`,
  `The information we collect is used for internal review and is then discarded, used to improve the content of our Web page, used to customize the content and/or layout of our page for each individual visitor, used to notify consumers about updates to our Web site, shared with agents or contractors who assist in providing support for our internal operations, used by us to contact consumers for marketing purposes, disclosed when legally required to do so, at the request of governmental authorities conducting an investigation, to verify or enforce compliance with the policies governing our Website and applicable laws or to protect against misuse or unauthorized use of our Website, to a successor entity in connection with a corporate merger, consolidation, sale of assets or other corporate change respecting the Website.`,
];

const PRIVACY_SECTIONS = [
  {
    title: "Cookies",
    body: `We use cookies to store visitors' preferences, record session information (such as items that consumers add to their shopping cart), record user-specific information on what pages users access or visit, and customize Web page content based on visitors' browser type or other information that the visitor sends.`,
  },
  {
    title: "Email contact",
    body: `If you do not want to receive e-mail from us in the future, please let us know by sending us e-mail at the address above, calling us at the telephone number above, or visiting your account at https://account.apobox.com/account.`,
  },
  {
    title: "Postal mail",
    body: `If you supply us with your postal address on-line you may receive periodic mailings from us with information on new products and services or upcoming events. If you do not wish to receive such mailings, please let us know by calling us at the number above, e-mailing us at the address above, writing to us at the address above, or visiting your account at https://account.apobox.com/account. Please provide us with your exact name and address, and we will be sure your name is removed from any list we share with other organizations.`,
  },
  {
    title: "Telephone contact",
    body: `Persons who supply us with their telephone numbers on-line will only receive telephone contact from us with information regarding orders they have placed on-line. To opt out, provide us with your name and phone number, and we will be sure your name is removed from any list we share with other organizations.`,
  },
  {
    title: "Ad servers",
    body: `We do not partner with or have special relationships with any ad server companies.`,
  },
  {
    title: "Changes to this policy",
    body: `From time to time, we may use customer information for new, unanticipated uses not previously disclosed in our privacy notice. If our information practices change at some time in the future we will post the policy changes to our Web site to notify you of these changes, and we will use these new purposes only with data collected from the time of the policy change forward. If you are concerned about how your information is used, you should check back at our Web site periodically.`,
  },
  {
    title: "Access to your information",
    body: `Upon request we provide site visitors with access to all information (including proprietary information) that we maintain about them, financial information (e.g., credit card account information), unique identifier information (e.g., customer number or password), transaction information (e.g., dates on which customers made purchases, amounts and types of purchases), contact information (e.g., name, address, phone number), and a description of information that we maintain about them. To request access, e-mail us at the address above, write to us at the address above, or visit https://support.apobox.com.`,
  },
  {
    title: "Correcting inaccuracies",
    body: `Upon request we offer visitors the ability to have inaccuracies corrected in contact information and financial information. You can correct this information yourself by visiting your account at https://account.apobox.com/account.`,
  },
  {
    title: "Security",
    body: `When we transfer and receive certain types of sensitive information such as financial or health information, we redirect visitors to a secure server. We have appropriate security measures in place in our physical facilities to protect against the loss, misuse or alteration of information that we have collected from you at our site, and all sensitive data is encrypted.`,
  },
  {
    title: "Concerns",
    body: `If you feel that this site is not following its stated information policy, you may contact us at the addresses or phone number above.`,
  },
];

function PrivacyPage() {
  return (
    <>
      <Header onSignup={() => { window.location.href = "/"; }} />
      <main>
        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "48px 28px 56px" }}>
          <span className="eyebrow">Legal</span>
          <h1 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(48px, 7vw, 96px)",
            lineHeight: 0.96, letterSpacing: "-0.04em",
            margin: "16px 0 12px", textWrap: "balance",
          }}>
            Privacy <span className="editorial" style={{ fontWeight: 400 }}>Policy.</span>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 720, margin: 0 }}>
            What we collect, how we use it, and how to reach us with questions.
          </p>
        </section>

        <section style={{ maxWidth: 760, margin: "0 auto", padding: "0 28px 96px" }}>
          <div style={{
            padding: "24px 28px",
            background: "var(--bg-2)",
            borderRadius: 16,
            marginBottom: 32,
            display: "grid",
            gap: 8,
            fontSize: 14.5, lineHeight: 1.6,
          }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 4 }}>Contact</div>
            <div>APOBox · Attn: Customer Service</div>
            <div>1911 Western Ave, Plymouth, IN 46563</div>
            <div>
              <span>info@apobox.com</span>
              {" · "}
              <a href="https://support.apobox.com" target="_blank" rel="noopener" style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 2 }}>support.apobox.com</a>
              {" · "}
              <a href="/contact" style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 2 }}>contact form</a>
            </div>
            <div>Phone (800) 409-6013 · Fax (888) 660-4747</div>
          </div>

          {PRIVACY_PARAGRAPHS.map((p, i) => (
            <p key={`p${i}`} style={{
              margin: "0 0 18px",
              fontSize: 15.5, lineHeight: 1.7,
              color: "var(--ink)",
              textWrap: "pretty",
            }}>{p}</p>
          ))}

          {PRIVACY_SECTIONS.map((s, i) => (
            <div key={s.title} style={{
              paddingTop: 28, paddingBottom: 4,
              borderTop: "1px solid var(--rule)",
              marginTop: i === 0 ? 28 : 0,
            }}>
              <h3 style={{
                fontFamily: "Inter, sans-serif", fontWeight: 700,
                fontSize: 18, letterSpacing: "-0.01em",
                margin: "0 0 10px",
                color: "var(--ink)",
              }}>{s.title}</h3>
              <p style={{
                margin: "0 0 24px",
                fontSize: 15.5, lineHeight: 1.7,
                color: "var(--ink)",
                textWrap: "pretty",
              }}>{s.body}</p>
            </div>
          ))}
        </section>
      </main>
      <Footer />
    </>
  );
}

/* ─────────── Contact page ─────────── */
function ContactPage() {
  const [data, setData] = useState({
    name: "", email: "", company: "", phone: "",
    subject: "General inquiry", message: "",
    website: "",
  });
  const set = (k) => (v) => setData((d) => ({ ...d, [k]: v }));
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    setStatus(null);
    try {
      const resp = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      const body = await resp.json().catch(() => ({}));
      if (!resp.ok || !body.ok) {
        setStatus({ error: body.error || "Couldn't send. Please try again." });
      } else {
        setStatus("sent");
        setData({ name: "", email: "", company: "", phone: "", subject: "General inquiry", message: "", website: "" });
      }
    } catch (_) {
      setStatus({ error: "Network error. Please try again." });
    } finally { setBusy(false); }
  };

  return (
    <>
      <Header onSignup={() => { window.location.href = "/"; }} />
      <main>
        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "48px 28px 32px" }}>
          <span className="eyebrow">Contact</span>
          <h1 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(48px, 7vw, 96px)",
            lineHeight: 0.96, letterSpacing: "-0.04em",
            margin: "16px 0 12px", textWrap: "balance",
          }}>
            Talk to <span className="editorial" style={{ fontWeight: 400 }}>us.</span>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 720, margin: 0 }}>
            Whether you're a service member with a question, a brand looking at fulfillment, or you just need help with a package, we read every one.
          </p>
        </section>

        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 96px" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(360px, 100%), 1fr))",
            gap: 48, alignItems: "start",
          }}>
            <aside style={{ display: "grid", gap: 16 }}>
              <ContactCard title="By mail">
                <div>APOBox</div>
                <div>Attn: Customer Service</div>
                <div>1911 Western Ave</div>
                <div>Plymouth, IN 46563</div>
              </ContactCard>
              <ContactCard title="By phone">
                <div>(800) 409-6013</div>
              </ContactCard>
              <ContactCard title="Help center">
                <a href="https://support.apobox.com" target="_blank" rel="noopener" style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 2 }}>support.apobox.com</a>
              </ContactCard>
            </aside>

            <form onSubmit={submit} style={{ display: "grid", gap: 14 }}>
              <label aria-hidden="true" style={{ position: "absolute", left: -10000, top: "auto", width: 1, height: 1, overflow: "hidden" }}>
                Leave this field empty
                <input type="text" tabIndex={-1} autoComplete="off" value={data.website} onChange={(e) => set("website")(e.target.value)} />
              </label>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Inp label="Your name" value={data.name} onChange={set("name")} />
                <Inp label="Email" type="email" value={data.email} onChange={set("email")} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Inp label="Company (optional)" value={data.company} onChange={set("company")} />
                <Inp label="Phone (optional)" type="tel" value={data.phone} onChange={set("phone")} />
              </div>
              <label style={{ display: "grid", gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>What's this about?</span>
                <select value={data.subject} onChange={(e) => set("subject")(e.target.value)} style={{
                  padding: "12px 14px",
                  border: "1px solid var(--rule)",
                  background: "var(--paper)",
                  fontFamily: "inherit", fontSize: 14.5, color: "var(--ink)",
                  outline: "none", borderRadius: 12,
                  appearance: "none", WebkitAppearance: "none",
                  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231A1814' d='M0 0h10L5 6z'/></svg>\")",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "right 14px center",
                  paddingRight: 36,
                }}>
                  <option>General inquiry</option>
                  <option>Pick and pack / fulfillment</option>
                  <option>APO Box account</option>
                  <option>Press</option>
                  <option>Other</option>
                </select>
              </label>
              <label style={{ display: "grid", gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Message</span>
                <textarea value={data.message} onChange={(e) => set("message")(e.target.value)} rows={6} style={{
                  padding: "12px 14px",
                  border: "1px solid var(--rule)",
                  background: "var(--paper)",
                  fontFamily: "inherit", fontSize: 14.5, color: "var(--ink)",
                  outline: "none", borderRadius: 12,
                  resize: "vertical", minHeight: 120,
                  lineHeight: 1.5,
                }} />
              </label>

              {status === "sent" && (
                <div style={{ padding: "12px 14px", background: "color-mix(in oklab, var(--moss) 14%, transparent)", color: "var(--moss)", borderRadius: 10, fontSize: 13.5, fontWeight: 500 }}>
                  Got it. We'll be in touch soon.
                </div>
              )}
              {status?.error && (
                <div style={{ padding: "10px 14px", background: "color-mix(in oklab, var(--warm) 12%, transparent)", color: "var(--warm)", borderRadius: 10, fontSize: 13.5, fontWeight: 500 }}>
                  {status.error}
                </div>
              )}

              <div style={{ marginTop: 8 }}>
                <Btn variant="dark" size="lg" type="submit" disabled={busy} style={{ opacity: busy ? 0.5 : 1 }}>
                  {busy ? "Sending..." : <>Send message <Arrow /></>}
                </Btn>
              </div>
            </form>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

function ContactCard({ title, children }) {
  return (
    <div style={{
      padding: "22px 26px",
      background: "var(--bg-2)",
      borderRadius: 16,
      fontSize: 14.5, lineHeight: 1.7,
    }}>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 8 }}>{title}</div>
      {children}
    </div>
  );
}

/* ─────────── Pick & Pack page ─────────── */
function PickPackPage() {
  return (
    <>
      <Header onSignup={() => { window.location.href = "/"; }} />
      <main>
        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "48px 28px 56px" }}>
          <span className="eyebrow">Pick &amp; pack</span>
          <h1 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(44px, 6.4vw, 88px)",
            lineHeight: 0.96, letterSpacing: "-0.04em",
            margin: "16px 0 20px", textWrap: "balance",
          }}>
            Global order fulfillment, <span className="editorial" style={{ fontWeight: 400 }}>focused</span> on the U.S. military and the 2A community.
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 720, margin: "0 0 32px" }}>
            Twenty years of pick, pack, and APO/FPO/DPO compliance, available to retailers and manufacturers who ship to the addresses other 3PLs won't touch.
          </p>
          <Btn variant="dark" size="lg" as="a" href="/contact">
            Talk to fulfillment <Arrow />
          </Btn>
        </section>

        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 56px" }}>
          <span className="eyebrow">Who it's for</span>
          <h2 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(36px, 4.4vw, 60px)",
            lineHeight: 1.0, letterSpacing: "-0.035em",
            margin: "16px 0 40px", textWrap: "balance",
          }}>
            Two specific kinds of <span className="editorial" style={{ fontWeight: 400 }}>customers.</span>
          </h2>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(360px, 100%), 1fr))",
            gap: 16,
          }}>
            {[
              {
                tag: "U.S. military, DOD & federal",
                body: "Brands selling to active-duty service members, dependents, and veterans stationed overseas. DOD vendors. Government contractors with deployment shipments.",
              },
              {
                tag: "2A community",
                body: "Firearms retailers, ammunition and accessory makers, optics, gear, and tactical brands shipping to service members and law enforcement worldwide.",
              },
            ].map(({ tag, body }) => (
              <div key={tag} style={{
                padding: 32,
                background: "var(--paper)",
                border: "1px solid var(--rule)",
                borderRadius: 24,
              }}>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 12 }}>{tag}</div>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--ink)" }}>{body}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 56px" }}>
          <span className="eyebrow">What we handle</span>
          <h2 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(36px, 4.4vw, 60px)",
            lineHeight: 1.0, letterSpacing: "-0.035em",
            margin: "16px 0 40px", textWrap: "balance",
          }}>
            The full <span className="editorial" style={{ fontWeight: 400 }}>stack.</span>
          </h2>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(260px, 100%), 1fr))",
            gap: 28,
            paddingTop: 28,
            borderTop: "1px solid var(--rule)",
          }}>
            {[
              ["Inventory holding", "Receive and store your stock at our Plymouth, Indiana warehouse."],
              ["Order integration", "API, CSV upload, or manual orders. Connect once, fulfill forever."],
              ["Pick & pack", "Accurate, fast, and packaged for APO/FPO/DPO compliance from the start."],
              ["Customs paperwork", "CN-22, CN-23, commercial invoices, declared values, all handled."],
              ["Restricted-item knowledge", "We know what ships via military mail and what doesn't, before you find out the hard way."],
              ["USPS handoff", "Monday–Friday Priority APO handoff. Tracking flows back to your system."],
              ["International returns", "If a package comes back, we receive it, log it, and route it per your rules."],
              ["Domestic shipping", "Same operation handles stateside orders if you want one fulfillment partner."],
            ].map(([t, b]) => (
              <div key={t}>
                <h3 style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, fontSize: 17, letterSpacing: "-0.01em", margin: "0 0 6px", color: "var(--ink)" }}>{t}</h3>
                <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)" }}>{b}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 56px" }}>
          <span className="eyebrow">How to start</span>
          <h2 style={{
            fontFamily: "Inter, sans-serif", fontWeight: 700,
            fontSize: "clamp(36px, 4.4vw, 60px)",
            lineHeight: 1.0, letterSpacing: "-0.035em",
            margin: "16px 0 32px", textWrap: "balance",
          }}>
            Four steps to <span className="editorial" style={{ fontWeight: 400 }}>global.</span>
          </h2>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, maxWidth: 760 }}>
            {[
              ["Tell us what you ship.", "Volume, destinations, anything that needs special handling. We'll tell you fast whether we're a fit."],
              ["Send your inventory.", "Standard freight to our Plymouth, Indiana warehouse. We log and shelf it."],
              ["Connect your orders.", "Shopify and major carts via API, or send orders by CSV or email."],
              ["We pick, pack, and ship.", "USPS Priority APO/FPO/DPO Monday–Friday. Tracking flows back to your store."],
            ].map(([t, b], i) => (
              <li key={t} style={{
                display: "grid",
                gridTemplateColumns: "44px 1fr",
                gap: 20,
                padding: "22px 0",
                borderTop: i === 0 ? "1px solid var(--rule)" : "none",
                borderBottom: "1px solid var(--rule)",
              }}>
                <span style={{ fontFamily: "ui-monospace, monospace", fontSize: 13, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.02em", paddingTop: 4 }}>{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h3 style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, fontSize: 19, letterSpacing: "-0.015em", margin: "0 0 6px", color: "var(--ink)" }}>{t}</h3>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>{b}</p>
                </div>
              </li>
            ))}
          </ol>
        </section>

        <section style={{ maxWidth: 1320, margin: "0 auto", padding: "32px 28px 96px" }}>
          <div style={{
            background: "var(--ink)", color: "var(--bg)",
            borderRadius: 32, padding: "56px 48px",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", top: -120, right: -120, width: 360, height: 360,
              background: "radial-gradient(circle, color-mix(in oklab, var(--gold) 20%, transparent), transparent 70%)",
            }} />
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(min(380px, 100%), 1fr))",
              gap: 48, alignItems: "end", position: "relative",
            }}>
              <div>
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", color: "var(--gold)" }}>TALK TO FULFILLMENT</span>
                <h2 style={{
                  fontFamily: "Inter, sans-serif", fontWeight: 700,
                  fontSize: "clamp(36px, 5vw, 64px)",
                  lineHeight: 0.98, letterSpacing: "-0.035em",
                  margin: "16px 0 20px", color: "var(--bg)",
                }}>
                  Tell us what you ship. We'll tell you if we can help.
                </h2>
                <div style={{ fontSize: 14.5, lineHeight: 1.8, color: "color-mix(in oklab, var(--bg) 75%, transparent)", display: "grid", gap: 2 }}>
                  <div>APOBox · 1911 Western Ave, Plymouth, IN 46563</div>
                  <div>(800) 409-6013</div>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "flex-end", flexWrap: "wrap", gap: 12 }}>
                <Btn variant="gold" size="lg" as="a" href="/contact">
                  Talk to fulfillment <Arrow />
                </Btn>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

/* ─────────── Root ─────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showProof": true,
  "darkStat": true
}/*EDITMODE-END*/;

function MarketingApp() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [signupOpen, setSignupOpen] = useState(false);
  const openSignup = () => setSignupOpen(true);
  return (
    <>
      <Header onSignup={openSignup} />
      <main>
        <Hero onSignup={openSignup} />
        {tweaks.showProof && <ProofRow />}
        <HowItWorks />
        {tweaks.darkStat && <StatStrip />}
        <Pricing />
        <BusinessBand />
        <FAQ />
        <FinalCTA onSignup={openSignup} />
      </main>
      <Footer />
      <SignupModal open={signupOpen} onClose={() => setSignupOpen(false)} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Page">
          <TweakToggle label="Logo proof row" value={tweaks.showProof} onChange={v => setTweak("showProof", v)} />
          <TweakToggle label="Dark stat block" value={tweaks.darkStat} onChange={v => setTweak("darkStat", v)} />
        </TweakSection>
        <TweakSection title="Actions">
          <TweakButton onClick={openSignup}>Open signup flow</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function App() {
  const path = window.location.pathname.replace(/\/$/, "");
  if (path === "/terms-of-service") return <TermsPage />;
  if (path === "/privacy-policy") return <PrivacyPage />;
  if (path === "/pick-and-pack") return <PickPackPage />;
  if (path === "/contact") return <ContactPage />;
  return <MarketingApp />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
