// pricing.jsx — full pricing page: packages, addons, comparison, guarantees, FAQ snippet

const { useState: useStateP, useMemo: useMemoP } = React;

function Pricing({ setRoute }) {
  const [billing, setBilling] = useStateP("once"); // for visual flourish only
  const mobile = useMobile();

  return (
    <main style={{ paddingTop: 88 }}>
      {/* ─── header ─── */}
      <section style={{ padding: "60px 0 var(--d-block)" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  Pricing</div>

          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "1.5fr 1fr",
            gap: mobile ? 20 : 64,
            alignItems: "flex-end",
            marginBottom: mobile ? 32 : 56
          }}>
            <h1 style={{ fontSize: "clamp(56px, 7.4vw, 136px)" }}>
              <span style={{ color: "var(--ink)" }}>Pay </span>
              <span className="serif spectrum">once.</span><br />
              <span style={{ color: "var(--ink)" }}>Yours </span>
              <span className="serif" style={{ color: "var(--ink-2)" }}>forever.</span>
            </h1>
            <p style={{
              color: "var(--ink-2)", fontSize: 19, lineHeight: 1.5,
              margin: 0, maxWidth: 440
            }}>Pick a package, get hand-keyed animation in days, walk away with the files.


            </p>
          </div>

          {/* package cards */}
          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
            gap: mobile ? 12 : 16
          }}>
            {VM_PACKAGES.map((p, i) =>
            <Reveal key={p.id} delay={i * 80}>
                <BigPackageCard p={p} onClick={() => setRoute("order")} />
              </Reveal>
            )}
          </div>

          {/* guarantee strip */}
          <Reveal delay={240}>
            <div style={{
              marginTop: 24,
              padding: "20px 28px",
              borderRadius: "var(--radius)",
              border: "1px solid var(--line)",
              display: "grid",
              gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
              gap: mobile ? 16 : 32,
              alignItems: "center"
            }}>
              <GuaranteeStrip icon="check" k="7-day money-back" v="Full refund if the first cut isn't right." />
              <GuaranteeStrip icon="hand" k="Hand-keyed" v="Built in After Effects, frame by frame." />
              <GuaranteeStrip icon="lock" k="Commercial rights" v="Use it anywhere — yours forever." />
              <GuaranteeStrip icon="bolt" k="Stripe secured" v="Pay safely. Receipt in your inbox." />
            </div>
          </Reveal>
        </div>
      </section>

      {/* ─── add-ons ─── */}
      <Addons setRoute={setRoute} />

      {/* ─── comparison table ─── */}
      <ComparisonTable />

      {/* ─── custom project ─── */}
      <CustomProject setRoute={setRoute} />

      {/* ─── pricing faq ─── */}
      <PricingFAQ />
    </main>);

}

/* ─── big package card (richer than home snapshot) ─── */

function BigPackageCard({ p, onClick }) {
  const [hover, setHover] = useStateP(false);
  const allFeatures = {
    starter: ["Custom animation (~5s)", "Custom colours & text", "MP4 export", "Commercial rights", "1 revision"],
    standard: ["Detailed animation (~8s)", "Music + sound design", "MP4 + transparent MOV", "Commercial rights", "1 revision"],
    pro: ["Cinematic animation (~10s)", "Custom sound design", "Perfect loop version", "All file formats", "2 revisions", "Priority queue"]
  };
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="glass"
      style={{
        padding: "36px 32px 28px",
        cursor: "pointer",
        transition: "transform 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        borderColor: p.popular ? "var(--line-2)" : hover ? "var(--line-2)" : "var(--line)",
        background: p.popular ? "linear-gradient(180deg, rgba(138,77,255,0.06), rgba(255,255,255,0.02))" : "var(--glass)",
        minHeight: 540,
        display: "flex", flexDirection: "column",
        position: "relative",
        overflow: "hidden"
      }}>
      
      {p.popular &&
      <div style={{
        position: "absolute", top: -1, right: -1,
        padding: "8px 14px",
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em",
        background: "linear-gradient(135deg, var(--p-cyan), var(--p-violet))",
        color: "white",
        borderBottomLeftRadius: 10
      }}>
          MOST PICKED
        </div>
      }

      <div className="eyebrow" style={{ marginBottom: 12 }}>{p.id.toUpperCase()}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 500,
        letterSpacing: "-0.03em", marginBottom: 16
      }}>
        {p.name}
      </div>

      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8 }}>
        <span style={{
          fontFamily: "var(--font-display)", fontSize: 88, fontWeight: 500,
          letterSpacing: "-0.045em", lineHeight: 0.9
        }}>
          ${p.price}
        </span>
        <span style={{ color: "var(--ink-3)", fontSize: 15 }}></span>
      </div>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.14em", marginBottom: 24 }}>
        DELIVERED IN {p.delivery.toUpperCase()} · {p.revisions} REVISION{p.revisions > 1 ? "S" : ""}
      </div>

      <div className="divider" style={{ marginBottom: 20 }} />

      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
        {allFeatures[p.id].map((it, i) =>
        <li key={i} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 4 }}>
              <path d="M3 7l3 3 5-6" stroke="var(--p-cyan)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {it}
          </li>
        )}
      </ul>

      <div style={{ flex: 1 }} />

      <button className={p.popular ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center", marginTop: 28 }}>
        Pick {p.name} <span className="arr">→</span>
      </button>
    </div>);

}

/* ─── guarantee strip icons ─── */

function GuaranteeStrip({ icon, k, v }) {
  const I = ({ kind }) => {
    if (kind === "check") return <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 9l3 3 7-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    if (kind === "hand") return <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M5 11V5a1 1 0 012 0v4M7 5V3a1 1 0 012 0v6M9 5V4a1 1 0 012 0v5M11 7a1 1 0 012 0v5a4 4 0 01-4 4H7a4 4 0 01-4-4V9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>;
    if (kind === "lock") return <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="3" y="8" width="12" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.2" /><path d="M6 8V5a3 3 0 016 0v3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>;
    if (kind === "bolt") return <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M10 2L4 10h4l-2 6 6-8H8l2-6z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" /></svg>;
    return null;
  };
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: "var(--glass-hi)",
        border: "1px solid var(--line-2)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--p-cyan)", flexShrink: 0
      }}>
        <I kind={icon} />
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 3 }}>{k}</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.4 }}>{v}</div>
      </div>
    </div>);

}

/* ─── add-ons ─── */

function Addons({ setRoute }) {
  const mobile = useMobile();
  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1.4fr 1fr",
          gap: mobile ? 16 : 48, alignItems: "flex-end",
          marginBottom: mobile ? 24 : 40
        }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>—  Optional extras</div>
            <h2><span className="serif">Mix and match.</span><br />No upsell, no pressure.</h2>
          </Reveal>
          <Reveal delay={100}>
            <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.5, margin: 0, maxWidth: 380 }}>Add anything below to any package.
Prices are flat — what you see is what you pay.
            </p>
          </Reveal>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
          gap: mobile ? 10 : 16
        }}>
          {VM_ADDONS.map((a, i) =>
          <Reveal key={a.id} delay={i % 3 * 80}>
              <AddonCard a={a} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function AddonCard({ a }) {
  const descs = {
    transparency: "Transparent MOV file. Paste your logo over any background, including video.",
    soundfx: "Layered sound design that hits with the animation. Whooshes, impacts, the works.",
    loop: "Seamless loop, so it can play in the background of your homepage forever.",
    revision: "An extra round of tweaks after the second cut — change anything, no questions.",
    rush: "Move your project to the top of the queue. Delivered in 24 hours.",
    vectorize: "Don't have a clean SVG? I'll redraw your logo as vectors before animating.",
    source: "The .aep project file. For agencies that want to keep tweaking internally."
  };
  return (
    <div className="glass" style={{
      padding: "26px 28px",
      minHeight: 180,
      display: "flex", flexDirection: "column", gap: 14
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div style={{ display: "flex", gap: 14, alignItems: "flex-start", flex: 1, minWidth: 0 }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: "var(--glass-hi)",
            border: "1px solid var(--line-2)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--p-cyan)", flexShrink: 0
          }}>
            <AddonGlyph kind={a.id} />
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", paddingTop: 4 }}>
            {a.label}
          </div>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--p-amber)", flexShrink: 0, paddingTop: 4 }}>
          +${a.price}
        </div>
      </div>
      <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
        {descs[a.id]}
      </div>
      {a.excludes.length > 0 &&
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--ink-4)", marginTop: 6 }}>
          INCLUDED IN: {a.excludes.map((x) => x.toUpperCase()).join(", ")}
        </div>
      }
    </div>);

}

function AddonGlyph({ kind }) {
  const c = "currentColor";
  const sw = 1.4;
  if (kind === "transparency") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <rect x="2.5" y="2.5" width="13" height="13" rx="2" stroke={c} strokeWidth={sw} />
      <path d="M2.5 9h13M9 2.5v13" stroke={c} strokeWidth={sw} opacity="0.5" />
      <rect x="2.5" y="2.5" width="6.5" height="6.5" fill={c} opacity="0.18" />
      <rect x="9" y="9" width="6.5" height="6.5" fill={c} opacity="0.18" />
    </svg>);
  if (kind === "soundfx") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 11V7h2l3-2.5v9L5 11H3z" stroke={c} strokeWidth={sw} strokeLinejoin="round" />
      <path d="M11 6.5a3 3 0 010 5M13.5 4.5a6 6 0 010 9" stroke={c} strokeWidth={sw} strokeLinecap="round" />
    </svg>);
  if (kind === "loop") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M4 6a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4H8a4 4 0 01-4-4" stroke={c} strokeWidth={sw} strokeLinecap="round" fill="none" />
      <path d="M2 8l2-2 2 2" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
    </svg>);
  if (kind === "revision") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 9a6 6 0 0110-4.5L15 7" stroke={c} strokeWidth={sw} strokeLinecap="round" fill="none" />
      <path d="M15 3v4h-4" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      <path d="M15 9a6 6 0 01-10 4.5L3 11" stroke={c} strokeWidth={sw} strokeLinecap="round" fill="none" opacity="0.5" />
    </svg>);
  if (kind === "rush") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M10 2L4 10h4l-2 6 6-8H8l2-6z" stroke={c} strokeWidth={sw} strokeLinejoin="round" fill="none" />
    </svg>);
  if (kind === "vectorize") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M4 14L9 4l5 10" stroke={c} strokeWidth={sw} strokeLinejoin="round" fill="none" />
      <rect x="2.5" y="12.5" width="3" height="3" stroke={c} strokeWidth={sw} fill="var(--void)" />
      <rect x="12.5" y="12.5" width="3" height="3" stroke={c} strokeWidth={sw} fill="var(--void)" />
      <rect x="7.5" y="2.5" width="3" height="3" stroke={c} strokeWidth={sw} fill="var(--void)" />
    </svg>);
  if (kind === "source") return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M10 2H4a1 1 0 00-1 1v12a1 1 0 001 1h10a1 1 0 001-1V7l-5-5z" stroke={c} strokeWidth={sw} strokeLinejoin="round" fill="none" />
      <path d="M10 2v5h5" stroke={c} strokeWidth={sw} strokeLinejoin="round" />
      <text x="9" y="13.5" textAnchor="middle" fill={c} fontSize="4.5" fontFamily="monospace" letterSpacing="0.5">AEP</text>
    </svg>);
  return null;
}

/* ─── comparison table ─── */

function ComparisonTable() {
  const mobile = useMobile();
  const rows = [
  { feat: "Custom animation", starter: true, standard: true, pro: true },
  { feat: "Animation length", starter: "~5s", standard: "~8s", pro: "~10s" },
  { feat: "Custom colours & text", starter: true, standard: true, pro: true },
  { feat: "MP4 export", starter: true, standard: true, pro: true },
  { feat: "Music + sound design", starter: false, standard: true, pro: true },
  { feat: "Transparent (MOV/PNG)", starter: false, standard: true, pro: true },
  { feat: "Perfect loop", starter: false, standard: false, pro: true },
  { feat: "Source file (.aep)", starter: "add-on", standard: "add-on", pro: "add-on" },
  { feat: "Delivery", starter: "5 days", standard: "4 days", pro: "2 days" },
  { feat: "Revisions", starter: "1", standard: "1", pro: "2" },
  { feat: "Priority queue", starter: false, standard: false, pro: true },
  { feat: "Commercial rights", starter: true, standard: true, pro: true }];


  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>—  Side by side</div>
          <h2 style={{ marginBottom: 40 }}>
            <span className="serif">Compare.</span>
          </h2>
        </Reveal>

        <Reveal>
          <div style={{ overflowX: mobile ? "auto" : "visible", borderRadius: "var(--radius)", WebkitOverflowScrolling: "touch" }}>
          <div style={{
            border: "1px solid var(--line)",
            borderRadius: "var(--radius)",
            overflow: "hidden",
            minWidth: mobile ? 540 : "auto",
            background: "var(--glass)",
            WebkitBackdropFilter: "blur(20px) saturate(140%)",
            backdropFilter: "blur(20px) saturate(140%)"
          }}>
            {/* head */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "1.4fr repeat(3, 1fr)",
              borderBottom: "1px solid var(--line)"
            }}>
              <div style={{ padding: "20px 28px", color: "var(--ink-3)" }} className="eyebrow">FEATURE</div>
              {VM_PACKAGES.map((p) =>
              <div key={p.id} style={{
                padding: "20px 24px",
                borderLeft: "1px solid var(--line)",
                background: p.popular ? "linear-gradient(180deg, rgba(138,77,255,0.08), transparent)" : "transparent"
              }}>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>{p.id.toUpperCase()}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, letterSpacing: "-0.025em" }}>
                    ${p.price}
                  </div>
                </div>
              )}
            </div>

            {/* rows */}
            {rows.map((r, i) =>
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "1.4fr repeat(3, 1fr)",
              borderTop: i ? "1px solid var(--line)" : "none"
            }}>
                <div style={{ padding: "16px 28px", color: "var(--ink-2)", fontSize: 14 }}>
                  {r.feat}
                </div>
                {["starter", "standard", "pro"].map((k) =>
              <div key={k} style={{
                padding: "16px 24px",
                borderLeft: "1px solid var(--line)",
                fontSize: 14,
                background: k === "standard" ? "linear-gradient(180deg, rgba(138,77,255,0.04), transparent)" : "transparent"
              }}>
                    <Cell v={r[k]} />
                  </div>
              )}
              </div>
            )}
          </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

function Cell({ v }) {
  if (v === true) return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 8l3 3 7-7" stroke="var(--p-cyan)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

  if (v === false) return <span style={{ color: "var(--ink-4)" }}>—</span>;
  if (v === "add-on") return <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--ink-3)" }}>ADD-ON</span>;
  return <span style={{ color: "var(--ink)" }}>{v}</span>;
}

/* ─── custom project ─── */

function CustomProject({ setRoute }) {
  const mobile = useMobile();
  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="glass" style={{
            position: "relative",
            padding: mobile ? "32px 24px" : "56px 56px",
            borderRadius: "var(--radius-lg)",
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "1.5fr 1fr",
            gap: mobile ? 24 : 48, alignItems: "center",
            overflow: "hidden"
          }}>
            {/* prism background */}
            <div style={{
              position: "absolute",
              right: -120, top: -120, width: 480, opacity: 0.55,
              filter: "blur(1px)",
              pointerEvents: "none",
              animation: "prismFloat 9s ease-in-out infinite"
            }}>
              <img src="assets/prism.png" alt="" style={{ width: "100%", display: "block" }} />
            </div>

            <div style={{ position: "relative" }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>—  Bigger than a logo?</div>
              <h2 style={{ fontSize: "clamp(40px, 4.8vw, 64px)", marginBottom: 18 }}>
                <span className="serif">Custom</span> projects<br />start at <span className="serif spectrum">$500</span>
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.5, margin: 0, maxWidth: 540 }}>Explainer animations, intros and outros for a content series. Anything that isn't a single logo reveal. Quoted per project.


              </p>
            </div>

            <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 12, alignItems: mobile ? "stretch" : "flex-end" }}>
              <button onClick={() => setRoute("contact")} className="btn btn-primary" style={{ fontSize: 15 }}>
                Talk through your project <span className="arr">→</span>
              </button>
              <button onClick={() => setRoute("contact")} className="btn btn-ghost" style={{ fontSize: 14 }}>
                Or book a 15-min call
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ─── pricing FAQ ─── */

function PricingFAQ() {
  const items = [
  { q: "What if I don't like the first cut?",
    a: "You get one round of revisions in every package, and Pro gets two. If the first cut is genuinely off-brief, I'll redo it — and if it still isn't right after that, you get a full refund within seven days. No drama." },
  { q: "Do you take rush jobs?",
    a: "Yes, for an extra $50 — bumped to the top of the queue and delivered in 24 hours. Subject to whether I have a slot open that week; I'll tell you yes/no within an hour of getting the brief." },
  { q: "Can I commission something outside the listed packages?",
    a: "Of course. Custom projects start at $1,500. Drop me a note via the contact form with what you're imagining and I'll quote it within a day." },
  { q: "Do you charge in EUR?",
    a: "Prices are USD because most of my clients are US-based, but Stripe converts at checkout so you can pay in your local currency. The total in EUR/GBP/etc. matches what you see, give or take the FX spread." },
  { q: "Will you sign an NDA?",
    a: "Always happy to. Send me yours before the brief, or I'll send mine — a standard mutual NDA, no surprises." }];

  return (
    <section style={{ padding: "var(--d-block) 0 var(--d-section)" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>—  Pricing questions</div>
          <h2 style={{ marginBottom: 40 }}>The <span className="serif">small print</span> in plain language.</h2>
        </Reveal>
        <Accordion items={items} />
      </div>
    </section>);

}

Object.assign(window, { Pricing });