// short-form-video.jsx — /short-form-video landing page.
// Done-for-you Short-Form Video service. Re-uses the same component vocabulary
// as /social-media-management, /instagram-growth, and /seo-blog-articles:
//   - .hero / .container / .kicker / .display-em
//   - .smm-hero-grid / .smm-hero-left for the responsive hero
//   - .ig-feature-grid / .ig-process-grid / .ig-problem-grid (re-used)
//   - .price-tier* / .price-aside-* (same flat-tier pricing card)

// ── Hero ───────────────────────────────────────────────────────────────
function SFVHero({ onOpenModal, onBookDemo }) {
  const bullets = [
    "Made by expert editors",
    "Price-checked — from $99/mo",
    "Cancel anytime",
  ];

  const scrollToPricing = () => {
    const el = document.getElementById("sfv-pricing");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section className="hero ig-hero sfv-hero">
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-bg-blob hero-bg-blob--a" />
        <div className="hero-bg-blob hero-bg-blob--b" />
        <div className="hero-bg-blob hero-bg-blob--c" />
        <div className="hero-bg-grid" />
      </div>

      <div className="container">
        <div className="smm-hero-grid ig-hero-grid">
          {/* ── Left ── */}
          <div className="smm-hero-left">
            <div className="hero-eyebrow">
              <span className="kicker">
                <span className="dot" /> Short-Form Videos · Done for you
              </span>
            </div>
            <h1>
              Short-form video posts from{" "}
              <span className="display-em">just $99/month.</span>
            </h1>
            <p className="hero-lede">
              Let our skilled editors turn your content into engaging short
              videos for TikTok, Reels, and YouTube Shorts — delivered
              ready-to-post, every month.
            </p>

            <ul className="smm-hero-bullets ig-hero-bullets">
              {bullets.map((b, i) => (
                <li key={i}>
                  <span className="smm-hero-check">
                    <Icon name="check" size={12} color="#fff" />
                  </span>
                  <span><strong>{b}</strong></span>
                </li>
              ))}
            </ul>

            <div className="hero-ctas">
              <button
                className="btn btn--primary btn--lg"
                onClick={onOpenModal}
              >
                Get started — from $99/mo <Icon name="arrow-right" size={16} />
              </button>
              <button
                className="btn btn--ghost btn--lg"
                onClick={scrollToPricing}
              >
                <Icon name="arrow-right" size={16} /> See pricing
              </button>
            </div>

            <div className="hero-trust">
              <span><strong>Trusted by 10,000+</strong> businesses</span>
              <span className="hero-trust-sep" />
              <span>No contracts · 14-day money-back</span>
            </div>
          </div>

          {/* ── Right — stacked vertical video tiles ── */}
          <div className="smm-hero-right">
            <SFVHeroStack />
          </div>
        </div>
      </div>
    </section>
  );
}

// Small visual: three offset vertical video tiles to evoke a TikTok/Reels
// stack. We pull live Wistia swatches from the existing VIDEO_EXAMPLES list
// so the artwork matches the videos shown later in the page.
function SFVHeroStack() {
  const picks = (typeof VIDEO_EXAMPLES !== "undefined" ? VIDEO_EXAMPLES : []).slice(0, 3);
  if (picks.length < 3) {
    return <div className="sfv-hero-stack sfv-hero-stack--empty" aria-hidden="true" />;
  }
  return (
    <div className="sfv-hero-stack" aria-hidden="true">
      {picks.map((v, i) => (
        <div
          key={v.id}
          className={"sfv-hero-tile sfv-hero-tile--" + (i + 1)}
        >
          <img
            src={`https://${v.sub || "fast"}.wistia.com/embed/medias/${v.id}/swatch`}
            alt=""
            loading="eager"
            onError={(e) => { e.currentTarget.style.display = "none"; }}
          />
          <span className="sfv-hero-tile-play">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M8 5v14l11-7z" />
            </svg>
          </span>
        </div>
      ))}
      {/* Floating chips */}
      <div className="sfv-hero-chip sfv-hero-chip--views">
        <span className="sfv-hero-chip-dot" />
        <b>2.1M</b><span>views</span>
      </div>
      <div className="sfv-hero-chip sfv-hero-chip--time">
        <Icon name="check" size={11} color="#fff" />
        <span>Edited in 4 days</span>
      </div>
    </div>
  );
}

// ── Platforms strip ────────────────────────────────────────────────────
function SFVPlatforms() {
  const platforms = [
    { name: "Instagram Reels", icon: "instagram", color: "#E4405F" },
    { name: "TikTok",          icon: "tiktok",    color: "#111827" },
    { name: "YouTube Shorts",  icon: "video",     color: "#FF0000" },
    { name: "Facebook",        icon: "facebook",  color: "#1877F2" },
    { name: "LinkedIn",        icon: "linkedin",  color: "#0A66C2" },
    { name: "X / Twitter",     icon: "twitter",   color: "#0F172A" },
  ];
  return (
    <section className="section sfv-platforms">
      <div className="container">
        <div className="sfv-platforms-head">
          <span className="kicker">
            <span className="dot" /> Platforms we work with
          </span>
          <span className="sfv-platforms-rule" />
          <span className="sfv-platforms-meta">
            One subscription · every short-form surface
          </span>
        </div>
        <div className="sfv-platforms-row">
          {platforms.map((p) => (
            <div key={p.name} className="sfv-platform">
              <span
                className="sfv-platform-badge"
                style={{ background: p.color }}
              >
                <Icon name={p.icon} size={16} color="#fff" />
              </span>
              <span className="sfv-platform-name">{p.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── "Make more content" — 3 cards (Make more / No freelancers / Team) ──
function SFVWhy() {
  const cards = [
    {
      icon: "chart",
      title: "Make more content",
      body:
        "Streamlined workflows mean quality content delivered fast. Our team turns one piece of raw footage into a steady stream of clips you can publish all month.",
    },
    {
      icon: "x",
      title: "No unreliable freelancers",
      body:
        "Skip the back-and-forth with freelancers who miss deadlines and the agencies that overcharge for the same work. One predictable team, every month.",
    },
    {
      icon: "user",
      title: "A team you can trust",
      body:
        "We meticulously hire, train, and guide every editor on our team — so the quality you see on day one is the quality you get every month after.",
    },
  ];
  return (
    <section className="section section--bg2 sfv-why">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Why teams pick us
          </div>
          <h2>
            More videos, less hassle —{" "}
            <span className="display-em">handled by real editors.</span>
          </h2>
          <p>
            We're not a freelancer marketplace and we're not a high-touch
            agency. We're a focused production team that ships short-form
            video at subscription pricing.
          </p>
        </div>
        <div className="ig-feature-grid sfv-why-grid">
          {cards.map((c, i) => (
            <div key={i} className="ig-feature sfv-why-card">
              <div className="ig-feature-icon">
                <Icon name={c.icon} size={18} />
              </div>
              <div className="ig-feature-title">{c.title}</div>
              <div className="ig-feature-body">{c.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Process — 3 numbered cards ─────────────────────────────────────────
function SFVProcess() {
  const steps = [
    {
      kicker: "Source",
      title: "We take raw video or premium stock footage",
      body:
        "Share your long-form videos or raw clips with us. Our team helps you pick the strongest hooks and content. No footage? We'll rely on premium stock instead.",
    },
    {
      kicker: "Edit",
      title: "We structure it for views and watch-time",
      body:
        "Our edit strategy is tuned for the algorithms that matter: pattern-interrupt hooks, fast pacing, and captions that keep viewers watching. Our clients see above-average shares, likes, and view-times.",
    },
    {
      kicker: "Brand",
      title: "We create your unique style and theme",
      body:
        "Our editors work with you to develop a signature look — typography, motion graphics, and pacing that feel like you. Got brand guidelines? Share 'em.",
    },
  ];

  return (
    <section className="section sfv-process">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> The process
          </div>
          <h2>
            Turn your raw videos into{" "}
            <span className="display-em">engaging clips.</span>
          </h2>
          <p>
            Three steps from a folder of raw footage to a calendar of
            short-form video, ready to post.
          </p>
        </div>

        <div className="ig-process-grid sfv-process-grid">
          {steps.map((s, i) => (
            <div key={i} className="ig-process-card sfv-process-card">
              <div className="ig-process-step">
                <span className="ig-process-step-label">Step</span>
                <span className="ig-process-step-num">
                  {String(i + 1).padStart(2, "0")}
                </span>
              </div>
              <div className="sfv-process-kicker">{s.kicker}</div>
              <div className="ig-process-title">{s.title}</div>
              <div className="ig-process-body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Video types — 6 cards ──────────────────────────────────────────────
function SFVTypes() {
  const types = [
    {
      icon: "instagram",
      name: "Instagram Reels",
      body: "Beat the Instagram algorithm with engaging Reels designed for reach.",
      tint: "linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%)",
    },
    {
      icon: "tiktok",
      name: "TikTok Videos",
      body: "We gave in. We can now make those trendy TikTok-style videos.",
      tint: "#111827",
    },
    {
      icon: "video",
      name: "YouTube Shorts",
      body: "Reach more viewers with short-form videos optimized for YouTube.",
      tint: "#FF0000",
    },
    {
      icon: "play",
      name: "Podcast to Shorts",
      body: "Clip your podcast videos into shareable short-form moments.",
      tint: "#7C3AED",
    },
    {
      icon: "target",
      name: "Product Demos",
      body: "Explain your product or service and turn viewers into customers.",
      tint: "#0EA5E9",
    },
    {
      icon: "pen",
      name: "Educational Shorts",
      body: "Simplify complex ideas to educate and entertain your audience.",
      tint: "#10B981",
    },
  ];

  return (
    <section className="section section--bg2 sfv-types">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Formats we make
          </div>
          <h2>
            Every short-form format —{" "}
            <span className="display-em">on one subscription.</span>
          </h2>
          <p>
            Whether you're cutting podcasts or running product demos, we ship
            the format that fits the platform.
          </p>
        </div>

        <div className="sfv-types-grid">
          {types.map((t, i) => (
            <div key={i} className="sfv-type-card">
              <div className="sfv-type-thumb" style={{ background: t.tint }}>
                <div className="sfv-type-thumb-fade" />
                <span className="sfv-type-thumb-icon">
                  <Icon name={t.icon} size={20} color="#fff" />
                </span>
                <span className="sfv-type-thumb-aspect">9:16</span>
              </div>
              <div className="sfv-type-body">
                <div className="sfv-type-name">{t.name}</div>
                <div className="sfv-type-text">{t.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Subscription Benefits — 4 cards ────────────────────────────────────
function SFVBenefits({ onOpenModal }) {
  const items = [
    {
      icon: "dollar",
      title: "Fixed monthly rate",
      body: "No surprises. Pay the same fixed price every month — no add-ons sneaking in at the end.",
    },
    {
      icon: "star",
      title: "Top-notch quality",
      body: "Great video quality at your fingertips whenever you need it — without hiring an in-house editor.",
    },
    {
      icon: "chart",
      title: "Flexible & scalable",
      body: "Scale up or down as needed. Pause or cancel any time — your subscription, your call.",
    },
    {
      icon: "check",
      title: "Unique and all yours",
      body: "Each video is made especially for you and is 100% yours — including the source files.",
    },
  ];
  return (
    <section className="section sfv-benefits">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Subscription benefits
          </div>
          <h2>
            Perks so good{" "}
            <span className="display-em">you'll never need to go anywhere else.</span>
          </h2>
          <p>Seriously. We thought of everything.</p>
        </div>

        <div className="ig-feature-grid sfv-benefits-grid">
          {items.map((it, i) => (
            <div key={i} className="ig-feature sfv-benefit-card">
              <div className="ig-feature-icon">
                <Icon name={it.icon} size={18} />
              </div>
              <div className="ig-feature-title">{it.title}</div>
              <div className="ig-feature-body">{it.body}</div>
            </div>
          ))}
        </div>

        <div className="section-cta-row">
          <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
            See plans <Icon name="arrow-right" size={16} />
          </button>
          <span className="section-cta-foot">
            Plans from $99/mo · Cancel anytime
          </span>
        </div>
      </div>
    </section>
  );
}

// ── Workflow features — 4 cards in a 2x2 grid w/ icon-left treatment ──
function SFVWorkflow() {
  const items = [
    {
      icon: "image",
      title: "Provide your clips or raw footage",
      body:
        "Share pre-clipped videos or hand us raw footage and we'll turn it into viral-style clips.",
    },
    {
      icon: "calendar",
      title: "We can schedule and post for you",
      body:
        "Need help publishing to Reels, TikTok, and Shorts? Let us handle the calendar end-to-end.",
    },
    {
      icon: "edit",
      title: "Manage everything in our dashboard",
      body:
        "Complete the intake form, drop your content, and we'll take it from there. One source of truth.",
    },
    {
      icon: "comment",
      title: "Chat and feedback built-in",
      body:
        "Our team is your team. Chat with us whenever you need it — directly inside our dashboard.",
    },
  ];
  return (
    <section className="section section--bg2 sfv-workflow">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> How you work with us
          </div>
          <h2>
            A workflow{" "}
            <span className="display-em">built around your busy schedule.</span>
          </h2>
          <p>
            Drop your content, leave feedback, get videos. The whole thing
            lives inside one dashboard.
          </p>
        </div>

        <div className="sfv-workflow-grid">
          {items.map((it, i) => (
            <div key={i} className="sfv-workflow-card">
              <div className="sfv-workflow-icon">
                <Icon name={it.icon} size={18} />
              </div>
              <div className="sfv-workflow-body">
                <div className="sfv-workflow-title">{it.title}</div>
                <div className="sfv-workflow-text">{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing — Videos tier from PRICING_CATEGORIES ──────────────────────
function SFVPricing({ onOpenModal }) {
  const cat = (typeof PRICING_CATEGORIES !== "undefined" ? PRICING_CATEGORIES : [])
    .find((c) => c.id === "videos");
  const [tierIdx, setTierIdx] = React.useState(
    Math.max(0, (cat?.tiers || []).findIndex((t) => t.popular))
  );
  if (!cat) return null;
  const tier = cat.tiers[tierIdx];

  return (
    <section className="section" id="sfv-pricing">
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Pricing</div>
          <h2>
            Simple pricing.{" "}
            <span className="display-em">Starts at $99/mo.</span>
          </h2>
          <p>Month-to-month. No contracts. No setup fees. Cancel anytime.</p>
        </div>

        <div className="price-card">
          <div className="price-card-grid">
            <div className="price-tiers">
              {cat.tiers.map((t, i) => {
                const on = i === tierIdx;
                return (
                  <button
                    key={t.name}
                    className="price-tier"
                    data-on={on ? "1" : "0"}
                    onClick={() => setTierIdx(i)}
                  >
                    <span className="price-tier-radio">
                      {on && <Icon name="check" size={13} />}
                    </span>
                    <div className="price-tier-body">
                      <div className="price-tier-head">
                        <span className="price-tier-name">{t.name}</span>
                        {t.popular && (
                          <span className="price-tier-pop">Popular</span>
                        )}
                      </div>
                      <div className="price-tier-sub">{t.posts}</div>
                    </div>
                    <div className="price-tier-amount">
                      <b>${t.monthly}</b><span>/mo</span>
                    </div>
                  </button>
                );
              })}
              <div className="price-fine">
                Pricing is in <b>USD</b>. Auto-renews unless cancelled.
                Cancellation requires at least 7 days notice. 14-day money
                back guarantee.
              </div>
            </div>

            <aside className="price-aside">
              <div className="price-aside-head">{cat.headline}</div>
              <div className="price-aside-list">
                {cat.includes.map((it, i) => (
                  <div key={i} className="price-aside-li">
                    <span className="price-aside-check">
                      <Icon name="check" size={12} />
                    </span>
                    <span>{it}</span>
                  </div>
                ))}
              </div>
              <button
                className="btn btn--primary btn--lg price-aside-cta"
                onClick={onOpenModal}
              >
                Sign up — ${tier.monthly}/mo{" "}
                <Icon name="arrow-right" size={14} />
              </button>
              <div className="price-aside-fine">
                No contracts. Cancel anytime.
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Three Q&A cards — "What is short-form video / Why popular / Why us" ─
function SFVQA({ onBookDemo }) {
  const qas = [
    {
      kicker: "Format",
      q: "What is short-form video?",
      a: [
        "Video content between 5 and 90 seconds long is referred to as short-form video. For viewers scrolling through social media feeds, short videos are meant to be quick, digestible content.",
        "TikTok videos, Instagram Stories and Reels, and YouTube Shorts are the most popular short-form video formats.",
      ],
    },
    {
      kicker: "Trend",
      q: "Why is short-form video so popular?",
      a: [
        "Short-form video is not new — the 2012-released app Vine was a pioneer of the genre.",
        "But as tech giants like Instagram, TikTok, and YouTube launched short-form video features of their own, what had initially been a niche format grew into the dominant way people consume video today.",
      ],
    },
    {
      kicker: "Why us",
      q: "What makes our service different?",
      a: [
        "We deliver short-form video through a transparent subscription model. We're a tech-enabled production team running our own platform to brief, manage, and coordinate high-volume social media content.",
        "Want to see how it works in practice? Book a 20-minute call.",
      ],
    },
  ];

  return (
    <section className="section sfv-qa">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Short-form video, explained
          </div>
          <h2>
            The basics, in{" "}
            <span className="display-em">three short reads.</span>
          </h2>
        </div>
        <div className="sfv-qa-grid">
          {qas.map((it, i) => (
            <article key={i} className="sfv-qa-card">
              <div className="sfv-qa-num">
                {String(i + 1).padStart(2, "0")}
              </div>
              <div className="sfv-qa-kicker">{it.kicker}</div>
              <h3 className="sfv-qa-q">{it.q}</h3>
              {it.a.map((p, k) => (
                <p key={k} className="sfv-qa-a">{p}</p>
              ))}
              <button
                className="sfv-qa-cta"
                onClick={onBookDemo}
                type="button"
              >
                Schedule a demo <Icon name="arrow-right" size={12} />
              </button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Before/After 99 Social — comparison row ────────────────────────────
function SFVCompareBA() {
  const before = [
    "Unpredictable, high-cost agencies",
    "Unreliable freelancers and poor communication",
    "Inconsistent quality and missed deadlines",
    "Overflowing workloads and editor burn-out",
    "Not enough time to focus on your business",
  ];
  const after = [
    "Premium, on-brand video production",
    "Affordable, fixed monthly pricing",
    "Fast, reliable turnaround times",
    "Fully managed end-to-end workflow",
    "More time to focus on growing your business",
  ];
  return (
    <section className="section section--bg2 sfv-ba">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Before vs. after
          </div>
          <h2>
            Fully managed short-form video,{" "}
            <span className="display-em">for small businesses.</span>
          </h2>
          <p>
            What working with $99 Social actually changes about how you ship
            video content.
          </p>
        </div>

        <div className="sfv-ba-grid">
          <div className="sfv-ba-col sfv-ba-col--before">
            <div className="sfv-ba-col-tag">Before $99 Social</div>
            <ul>
              {before.map((b, i) => (
                <li key={i}>
                  <span className="sfv-ba-x">
                    <Icon name="x" size={11} color="#fff" />
                  </span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="sfv-ba-rule" aria-hidden="true">
            <Icon name="arrow-right" size={18} />
          </div>
          <div className="sfv-ba-col sfv-ba-col--after">
            <div className="sfv-ba-col-tag">After $99 Social</div>
            <ul>
              {after.map((a, i) => (
                <li key={i}>
                  <span className="sfv-ba-check">
                    <Icon name="check" size={11} color="#fff" />
                  </span>
                  <span>{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── "3 Simple Steps" + Monitor Growth (combined as the activation block) ──
function SFVActivation({ onOpenModal }) {
  const steps = [
    {
      n: "01",
      title: "Select your plan",
      body: "Choose the short-form video plan that fits your needs and content cadence.",
      vis: "plan",
    },
    {
      n: "02",
      title: "Complete intake form",
      body: "Tell us about your business, audience, and existing content in a short questionnaire.",
      vis: "form",
    },
    {
      n: "03",
      title: "Receive premium content",
      body: "Your first batch of videos lands in your dashboard within 4–7 business days.",
      vis: "deliver",
    },
  ];
  return (
    <section className="section sfv-activation">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Getting started
          </div>
          <h2>
            Done-for-you short-form video{" "}
            <span className="display-em">in 3 simple steps.</span>
          </h2>
          <p>
            Tell us who you are and what you do. We take care of everything
            else — from research to creation to scheduling.
          </p>
        </div>

        <div className="sfv-activation-grid">
          {steps.map((s, i) => (
            <div key={i} className="sfv-activation-card">
              <div className="sfv-activation-vis">
                <SFVStepVis kind={s.vis} />
              </div>
              <div className="sfv-activation-num">{s.n}</div>
              <div className="sfv-activation-title">{s.title}</div>
              <div className="sfv-activation-body">{s.body}</div>
            </div>
          ))}
        </div>

        {/* Two-up: Review & Approve + Monitor Growth */}
        <div className="sfv-activation-two">
          <div className="sfv-activation-feature">
            <div className="kicker">
              <span className="dot" /> Review & approve
            </div>
            <h3>Fresh batches every month — you stay in control.</h3>
            <p>
              Each month you'll receive new short-form videos for review. Approve
              with one click or leave feedback inside the dashboard. Nothing
              goes live without your sign-off.
            </p>
            <ul className="sfv-activation-bullets">
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                Fresh content weekly
              </li>
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                Full control of posts
              </li>
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                Simple feedback process
              </li>
            </ul>
          </div>

          <div className="sfv-activation-feature sfv-activation-feature--analytics">
            <div className="kicker">
              <span className="dot" /> Monitor growth
            </div>
            <h3>One-click analytics for the videos that matter.</h3>
            <p>
              Responsive dashboards show engagement, views, and watch-time so
              you and our editors know exactly which clips are working — and
              what to make more of.
            </p>
            <ul className="sfv-activation-bullets">
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                One-click insights
              </li>
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                Track engagement growth
              </li>
              <li>
                <span className="sfv-activation-check">
                  <Icon name="check" size={11} color="#fff" />
                </span>
                See top-performing posts
              </li>
            </ul>

            {/* Tiny inline chart */}
            <div className="sfv-analytics-vis" aria-hidden="true">
              <svg viewBox="0 0 240 60" preserveAspectRatio="none">
                <path
                  d="M0 48 L24 42 L48 38 L72 30 L96 32 L120 22 L144 18 L168 14 L192 10 L216 8 L240 4"
                  fill="none"
                  stroke="var(--primary)"
                  strokeWidth="2.4"
                  strokeLinecap="round"
                />
                <path
                  d="M0 48 L24 42 L48 38 L72 30 L96 32 L120 22 L144 18 L168 14 L192 10 L216 8 L240 4 L240 60 L0 60 Z"
                  fill="var(--primary)"
                  opacity="0.12"
                />
              </svg>
              <div className="sfv-analytics-tag">
                <b>+218%</b>
                <span>watch-time this quarter</span>
              </div>
            </div>
          </div>
        </div>

        <div className="section-cta-row">
          <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
            Get started <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </div>
    </section>
  );
}

function SFVStepVis({ kind }) {
  if (kind === "plan") {
    return (
      <div className="sfv-step-vis sfv-step-vis--plan">
        <div className="sfv-step-pill sfv-step-pill--on">
          <span className="sfv-step-pill-dot" /> 8 Videos · $189/mo
        </div>
        <div className="sfv-step-pill">
          <span className="sfv-step-pill-dot" /> 4 Videos · $99/mo
        </div>
        <div className="sfv-step-pill">
          <span className="sfv-step-pill-dot" /> 12 Videos · $269/mo
        </div>
      </div>
    );
  }
  if (kind === "form") {
    return (
      <div className="sfv-step-vis sfv-step-vis--form">
        <div className="sfv-step-field"><span /></div>
        <div className="sfv-step-field"><span style={{ width: "70%" }} /></div>
        <div className="sfv-step-field"><span style={{ width: "55%" }} /></div>
        <div className="sfv-step-field sfv-step-field--done">
          <Icon name="check" size={10} color="#fff" />
        </div>
      </div>
    );
  }
  // deliver
  return (
    <div className="sfv-step-vis sfv-step-vis--deliver">
      <div className="sfv-step-tile sfv-step-tile--1" />
      <div className="sfv-step-tile sfv-step-tile--2" />
      <div className="sfv-step-tile sfv-step-tile--3" />
      <div className="sfv-step-badge">
        <Icon name="check" size={11} color="#fff" /> Ready
      </div>
    </div>
  );
}

// ── FAQ — specific to short-form video ─────────────────────────────────
const SFV_FAQS = [
  {
    q: "What does the short-form video service entail?",
    a: "We create engaging short-form videos tailored for platforms like Reels, TikTok, and YouTube Shorts. We work with both businesses and personal brands to turn raw footage or premium stock footage into captivating clips that perform.",
  },
  {
    q: "How much does this service cost?",
    a: "Plans start at $99/mo for 4 videos and scale up to $629/mo for 30 videos. Every plan is month-to-month, includes captions and hashtags, and you can pause or cancel any time.",
  },
  {
    q: "What platforms do you work with?",
    a: "We produce content suitable for Instagram (Reels & Stories), TikTok, YouTube Shorts, Facebook, LinkedIn, X, and Pinterest. One subscription covers them all.",
  },
  {
    q: "What type of content can you produce?",
    a: "We can work from raw footage you provide or from premium stock footage we license. Common formats include personal-brand videos, product demos, educational shorts, podcast clips, and trending-style clips.",
  },
  {
    q: "How do you turn raw footage into engaging videos?",
    a: "Our process: take your raw video or premium stock footage, structure it to optimize views and watch-time, then collaborate with you on a unique style and theme that becomes your signature look.",
  },
  {
    q: "What kind of short-form video do you specialize in?",
    a: "Instagram Reels, TikTok videos, YouTube Shorts, podcast-to-shorts, product demos, and educational shorts — those are the six formats we ship most often.",
  },
  {
    q: "What benefits do I get from subscribing?",
    a: "Unlimited revisions within scope, typical delivery in under 10 business days, a fixed monthly rate with no hidden charges, top-notch video quality, fully flexible (pause or cancel anytime), and every video produced is 100% yours.",
  },
  {
    q: "Can you help with posting videos on platforms?",
    a: "Yes. We can schedule and post your content to Reels, TikTok, and Shorts so the entire workflow stays in one place.",
  },
  {
    q: "How do I manage and communicate with your team?",
    a: "Everything happens inside our dashboard — intake form, content uploads, reviews, approvals, and revisions. Our built-in chat keeps communication with your editors in one thread.",
  },
  {
    q: "What exactly is short-form video?",
    a: "Short-form videos are pieces between 5 and 90 seconds long, designed for the scrolling feeds of TikTok, Instagram Reels & Stories, and YouTube Shorts.",
  },
];

function SFVFAQ({ tone = "bg-2" }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className={"section" + (tone === "bg-2" ? " section--bg2" : "")}>
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Questions
          </div>
          <h2>
            The things people ask{" "}
            <span className="display-em">about short-form video.</span>
          </h2>
          <p>
            If your question isn't here, book a call and we'll answer it
            directly.
          </p>
        </div>
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          <div className="faq-list">
            {SFV_FAQS.map((f, i) => (
              <div
                key={i}
                className="faq-item"
                data-open={open === i ? "1" : "0"}
              >
                <button
                  className="faq-q"
                  onClick={() => setOpen(open === i ? -1 : i)}
                >
                  <span>{f.q}</span>
                  <span className="faq-toggle">
                    <Icon name="plus" size={14} />
                  </span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Page composition ───────────────────────────────────────────────────
function ShortFormVideoPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page" data-screen-label="Short-form video landing">
      <SFVHero onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
      <Press />
      <SFVPlatforms />
      <SFVWhy />
      <VideoExamples tone="bg" embedded={true} />
      <SFVProcess />
      <SFVTypes />
      <SFVBenefits onOpenModal={onOpenModal} />
      <SFVWorkflow />
      <SFVPricing onOpenModal={onOpenModal} />
      <SFVQA onBookDemo={onBookDemo} />
      <SFVCompareBA />
      <SFVActivation onOpenModal={onOpenModal} />
      <Testimonials short={true} tone="bg-2" />
      <Guarantee tone="bg" onOpenModal={onOpenModal} />
      <SFVFAQ tone="bg-2" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>
  );
}

Object.assign(window, {
  SFVHero,
  SFVHeroStack,
  SFVPlatforms,
  SFVWhy,
  SFVProcess,
  SFVTypes,
  SFVBenefits,
  SFVWorkflow,
  SFVPricing,
  SFVQA,
  SFVCompareBA,
  SFVActivation,
  SFVStepVis,
  SFVFAQ,
  ShortFormVideoPage,
});