// components.jsx — shared UI for the 99 Social prototype.
// Loaded after data.jsx, before pages.jsx.

// ── Section background tone helper ───────────────────────────────────────
// Pages pass tone="bg" | "bg-2" | "bg-3" to alternate adjacent sections.
function bgTone(tone) {
  if (tone === "bg-2") return " section--bg2";
  if (tone === "bg-3") return " section--bg3";
  return ""; // default: no extra class → inherits page bg
}

// ── Icon set (tiny inline SVGs, stroked) ─────────────────────────────────
const Icon = ({ name, size = 18, color = "currentColor" }) => {
  const sw = 1.6;
  const p = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "check":
      return <svg {...p}><path d="M5 12.5 10 17l9-10" /></svg>;
    case "x":
      return <svg {...p}><path d="M6 6l12 12M18 6l-12 12" /></svg>;
    case "plus":
      return <svg {...p}><path d="M12 5v14M5 12h14" /></svg>;
    case "arrow-right":
      return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "arrow-left":
      return <svg {...p}><path d="M19 12H5M11 6l-6 6 6 6" /></svg>;
    case "user":
      return <svg {...p}><circle cx="12" cy="8" r="4" /><path d="M4 21c1-4 4.5-6 8-6s7 2 8 6" /></svg>;
    case "calendar":
      return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M8 3v4M16 3v4M3 10h18" /></svg>;
    case "edit":
      return <svg {...p}><path d="M4 20h4l11-11-4-4L4 16v4z" /></svg>;
    case "dollar":
      return <svg {...p}><path d="M12 4v16" /><path d="M16 8c0-2-1.8-3-4-3s-4 1-4 3 1.8 2.5 4 3 4 1 4 3-1.8 3-4 3-4-1-4-3" /></svg>;
    case "chart":
      return <svg {...p}><path d="M4 20V8M10 20v-6M16 20V4M22 20H2" /></svg>;
    case "support":
      return <svg {...p}><path d="M21 11.5a8.38 8.38 0 0 1-9 8.5 8.5 8.5 0 0 1-7-3.5L3 21l4.5-1.5a8.5 8.5 0 0 1-1.5-4.5 8.38 8.38 0 0 1 8.5-9 8.38 8.38 0 0 1 8.5 8.5z" /></svg>;
    case "instagram":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" /></svg>;
    case "facebook":
      return <svg {...p}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>;
    case "linkedin":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 11v6M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 11v6" /></svg>;
    case "twitter":
      return <svg {...p}><path d="M22 4s-1 2-3 2.5C18 4 15 4 13.5 6 12 8 12 10.5 12 10.5S6 11 3 5c0 0-2 6 4 9-2 1.5-5 1.5-5 1.5s4 3 10 2c6-1 9-6 9-11 1.5-1 2-3 2-3z" /></svg>;
    case "google":
      return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M21 12h-9V8" /></svg>;
    case "play":
      return <svg {...p}><path d="M6 4l14 8-14 8z" fill="currentColor" stroke="none" /></svg>;
    case "pause":
      return <svg {...p}><rect x="6" y="5" width="4" height="14" fill="currentColor" stroke="none" /><rect x="14" y="5" width="4" height="14" fill="currentColor" stroke="none" /></svg>;
    case "clock":
      return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case "video":
      return <svg {...p}><rect x="3" y="6" width="14" height="12" rx="2" /><path d="m17 10 4-2v8l-4-2" /></svg>;
    case "tiktok":
      return <svg {...p}><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5" /><path d="M14 4c0 3 2 5 5 5" /></svg>;
    case "heart":
      return <svg {...p}><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z" /></svg>;
    case "comment":
      return <svg {...p}><path d="M21 12a8 8 0 0 1-11.6 7L4 21l1.4-4.4A8 8 0 1 1 21 12z" /></svg>;
    case "send":
      return <svg {...p}><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z" /></svg>;
    case "star":
      return <svg {...p} fill={color}><path d="M12 2l3 7 7 .5-5.5 4.5L18 21l-6-4-6 4 1.5-7-5.5-4.5L9 9z" strokeWidth="0" /></svg>;
    case "phone":
      return <svg {...p}><path d="M22 16.9V21a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1A19.5 19.5 0 0 1 5 13.4 19.8 19.8 0 0 1 1.9 4.7 2 2 0 0 1 3.9 2.5h4a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.7a2 2 0 0 1-.4 2.1L8.5 10.6a16 16 0 0 0 6 6L16 15a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.7.6A2 2 0 0 1 22 16.9z" /></svg>;
    case "mail":
      return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 7 9-7" /></svg>;
    case "map":
      return <svg {...p}><path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13z" /><circle cx="12" cy="9" r="3" /></svg>;
    case "pen":
      return <svg {...p}><path d="M14 4l6 6L8 22H2v-6L14 4z" /></svg>;
    case "image":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>;
    case "target":
      return <svg {...p}><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1" fill="currentColor" /></svg>;
    case "menu":
      return <svg {...p}><path d="M4 6h16M4 12h16M4 18h16" /></svg>;
    case "sun":
      return <svg {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>;
    case "moon":
      return <svg {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>;
    case "chevron-down":
      return <svg {...p}><path d="M6 9l6 6 6-6" /></svg>;
    default:return null;
  }
};

// ── Logo ─────────────────────────────────────────────────────────────────
function Logo({ size = "md" }) {
  return (
    <a href="#home" className="nav-logo" onClick={(e) => {e.preventDefault();window.__nav('home');}}>
      <svg
        className="brand-mark"
        viewBox="0 0 160 110"
        aria-label="$99 Social"
        role="img"
      >
        {/* price-tag silhouette */}
        <path
          className="brand-mark-tag"
          d="M 32 16 L 152 16 Q 158 16 158 22 L 158 98 Q 158 104 152 104 L 32 104 Q 28 104 24 100 L 14 66 Q 12 60 14 54 L 24 20 Q 28 16 32 16 Z"
        />
        <circle className="brand-mark-hole" cx="32" cy="60" r="6" />
        {/* raised $ + 99 */}
        <text className="brand-mark-d" x="58" y="58" textAnchor="middle">$</text>
        <text className="brand-mark-99" x="102" y="84" textAnchor="middle">99</text>
        {/* tiny accent spark */}
        <g className="brand-mark-spark" transform="translate(138 36)">
          <path d="M 0 -8 L 1.6 -1.6 L 8 0 L 1.6 1.6 L 0 8 L -1.6 1.6 L -8 0 L -1.6 -1.6 Z" />
        </g>
      </svg>
      <span>Social</span>
    </a>);

}

// ── Nav ──────────────────────────────────────────────────────────────────
const NAV_COMPANY = [
  { label: "Our Work",              page: "examples" },
  { label: "White Label Resellers", page: "social-media-reseller-program" },
  { label: "About Us",              page: "about" },
  { label: "Careers",               page: "careers" },
  { label: "Compare",               page: "home", anchor: "compare" },
  { label: "Book a Demo",           action: "demo" },
  { label: "Watch Demo Video",      page: "home", anchor: "watch-video" },
  { label: "Blog",                  page: "about" }];


const NAV_SERVICES = [
  { label: "Social Media Management", page: "social-media-management" },
  { label: "Short Form Videos",       page: "short-form-video" },
  { label: "Instagram Growth",        page: "instagram-growth" },
  { label: "Meta Ads Management",     page: "pricing" },
  { label: "SEO Blog Posts",          page: "seo-blog-articles" }];


function NavDropdown({ id, label, items, page, openId, setOpenId, onItem }) {
  const closeTimerRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const open = openId === id;

  const openMenu = () => {
    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
    setOpenId(id);
  };
  const scheduleClose = () => {
    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
    closeTimerRef.current = setTimeout(() => setOpenId((cur) => cur === id ? null : cur), 160);
  };

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpenId(null); };
    const onKey = (e) => { if (e.key === "Escape") setOpenId(null); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const trigger = (e) => {
    e.preventDefault();
    setOpenId(open ? null : id);
  };

  return (
    <div className="nav-drop" ref={wrapRef}
      onMouseEnter={openMenu}
      onMouseLeave={scheduleClose}>
      <button type="button"
        className="nav-link nav-link--drop"
        data-active={open || items.some((it) => it.page === page) ? "1" : "0"}
        aria-haspopup="menu"
        aria-expanded={open ? "true" : "false"}
        onClick={trigger}>
        {label} <Icon name="chevron-down" size={12} />
      </button>
      <div className="nav-menu" data-open={open ? "1" : "0"} role="menu">
        {items.map((it, i) =>
        <button key={i} type="button" role="menuitem" className="nav-menu-item"
          onClick={() => { setOpenId(null); onItem(it); }}>
            <span>{it.label}</span>
            <Icon name="arrow-right" size={13} />
          </button>
        )}
      </div>
    </div>);

}

function Nav({ page, onNav, onOpenModal, onBookDemo }) {
  const [openId, setOpenId] = React.useState(null);

  const handleItem = (item) => {
    if (item.action === "demo") { onBookDemo(); return; }
    if (item.page) onNav(item.page);
    if (item.anchor) {
      setTimeout(() => {
        const el = document.getElementById(item.anchor);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 72;
          window.scrollTo({ top, behavior: "smooth" });
        }
      }, 280);
    }
  };

  return (
    <div className="nav-wrap">
      <div className="container nav">
        <Logo />
        <div className="nav-links">
          <NavDropdown id="company" label="Company" items={NAV_COMPANY}
            page={page} openId={openId} setOpenId={setOpenId} onItem={handleItem} />
          <NavDropdown id="services" label="Services" items={NAV_SERVICES}
            page={page} openId={openId} setOpenId={setOpenId} onItem={handleItem} />
          <a href="#examples" className="nav-link" data-active={page === "examples" ? "1" : "0"}
            onClick={(e) => { e.preventDefault(); onNav("examples"); }}>Examples</a>
          <a href="#pricing" className="nav-link" data-active={page === "pricing" ? "1" : "0"}
            onClick={(e) => { e.preventDefault(); onNav("pricing"); }}>Pricing</a>
        </div>
        <div className="nav-cta">
          <a href="https://clients.99dollarsocial.com/login" className="nav-link nav-link--signin" target="_blank" rel="noopener noreferrer">Sign in</a>
          <button className="btn btn--ghost btn--sm" onClick={onBookDemo}>
            Book a demo
          </button>
          <button className="btn btn--primary btn--sm" onClick={onOpenModal}>
            Get started <Icon name="arrow-right" size={14} />
          </button>
        </div>
      </div>
    </div>);

}

// ── Hero carousel: stacked phone-style content reel ──────────────────────
function HeroReel() {
  // Use real client example posts (with images) for the hero showcase.
  const posts = React.useMemo(() => {
    const withImages = (EXAMPLE_POSTS || []).filter((p) => p.image && p.featured);
    return withImages.length >= 3 ? withImages.slice(0, 6) : (SAMPLE_POSTS || []);
  }, []);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (!posts.length) return;
    const t = setInterval(() => setI((x) => (x + 1) % posts.length), 3400);
    return () => clearInterval(t);
  }, [posts.length]);
  const stateOf = (idx) => {
    const n = posts.length;
    const d = (idx - i + n) % n;
    if (d === 0) return "front";
    if (d === 1) return "back";
    if (d === 2) return "back2";
    return "out";
  };
  const useImageCards = posts[0] && posts[0].image;
  return (
    <div className="reel">
      <div className="reel-stage">
        <div className="reel-tag reel-tag--tl"><span className="dot" /> Scheduled · Tue 9:00 AM</div>
        <div className="reel-tag reel-tag--br"><span className="dot" /> Real client work</div>
        {posts.map((p, idx) => (
          useImageCards
            ? <ReelImageCard key={idx} post={p} state={stateOf(idx)} />
            : <ReelCard key={idx} post={p} state={stateOf(idx)} />
        ))}
      </div>
    </div>);

}

function ReelImageCard({ post, state }) {
  // Industry → handle slug for a more on-brand caption byline.
  const slug = (post.handle || post.industry || "client")
    .toLowerCase()
    .replace(/&/g, "and")
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "")
    .slice(0, 22);
  const cap = (post.caption || "")
    .replace(/\?{2,}/g, "")               // strip "????" emoji-fallback artifacts
    .replace(/#[\w-]+/g, "")              // strip hashtags
    .replace(/https?:\/\/\S+/g, "")       // strip urls
    .replace(/[\r\n]+/g, " ")
    .replace(/\s+/g, " ")
    .trim();
  const short = cap.length > 110 ? cap.slice(0, 108).replace(/\s+\S*$/, "") + "…" : cap;
  return (
    <div className="reel-card reel-card--image" data-state={state}>
      <div className="reel-head">
        <div className="reel-avatar">{slug.slice(0,2).toUpperCase()}</div>
        <div className="reel-meta">
          <b>{slug}</b>
          <span>{post.industry}</span>
        </div>
        <div className="reel-platform">
          <Icon name="instagram" size={16} />
        </div>
      </div>
      <div className="reel-img reel-img--photo">
        <img src={post.image} alt="" loading="lazy" />
      </div>
      <div className="reel-actions reel-actions--image">
        <span><Icon name="heart" size={16} /></span>
        <span><Icon name="comment" size={16} /></span>
        <span><Icon name="send" size={16} /></span>
        <span style={{ marginLeft: "auto" }}><Icon name="image" size={16} /></span>
      </div>
      {short && (
        <div className="reel-cap reel-cap--image">
          <b>{slug}</b> {short}
        </div>
      )}
    </div>);
}

function ReelCard({ post, state }) {
  return (
    <div className="reel-card" data-state={state}>
      <div className="reel-head">
        <div className="reel-avatar">{post.avatar}</div>
        <div className="reel-meta">
          <b>{post.biz}</b>
          <span>{post.handle}</span>
        </div>
        <div className="reel-platform">
          <Icon name={
          post.platform === "ig" ? "instagram" :
          post.platform === "fb" ? "facebook" :
          post.platform === "li" ? "linkedin" :
          post.platform === "tw" ? "twitter" : "google"
          } size={16} />
        </div>
      </div>
      <div className={"reel-img placeholder " + (post.cls || "")}>
        <div className="reel-img-label">{post.platform === "ig" ? "Carousel" : post.platform === "fb" ? "Photo" : "Post"}</div>
      </div>
      <div className="reel-cap">
        <b>{post.title}</b> <span style={{ fontStyle: "italic", fontFamily: "'Instrument Serif', serif", fontSize: "1.05em" }}>{post.titleEm}</span> — {post.caption.slice(0, 60)}…
        {" "}
        {post.tags.slice(0, 2).map((t) => <span key={t} className="hashtag"> {t}</span>)}
      </div>
      <div className="reel-actions">
        <span><Icon name="heart" size={14} /> {post.likes}</span>
        <span><Icon name="comment" size={14} /> 24</span>
        <span><Icon name="send" size={14} /></span>
      </div>
    </div>);

}

// ── Press strip ──────────────────────────────────────────────────────────
function Press() {
  return (
    <div className="press">
      <div className="container press-row">
        <div className="press-label">As covered in</div>
        <div className="press-logos">
          {PRESS_LOGOS.map((p) =>
          <span key={p.name} className="press-logo" style={{
            fontFamily: p.font,
            fontWeight: p.weight,
            letterSpacing: p.letterSpacing,
            fontStyle: p.style || "normal",
            textTransform: p.textTransform || "none"
          }}>{p.name}</span>
          )}
        </div>
      </div>
    </div>);

}

// ── Trust strip: editorial proof block ─────────────────────────────────
function TrustStrip() {
  const stats = [
  { num: "14", suffix: "yrs", label: "In business · since 2012" },
  { num: "4.6", suffix: "/5", label: "Verified Google reviews" },
  { num: "120", suffix: "+", label: "Industries served" },
  { num: "1.5M", suffix: "+", label: "Posts published" }];

  return (
    <section className="trust-strip trust-strip--compact">
      <div className="trust-strip-corner trust-strip-corner--tl" />
      <div className="trust-strip-corner trust-strip-corner--tr" />
      <div className="trust-strip-corner trust-strip-corner--bl" />
      <div className="trust-strip-corner trust-strip-corner--br" />
      <div className="container">
        <div className="trust-strip-hero">
          <div className="trust-strip-hero-eyebrow">
            <span>EST. 2012</span>
            <span className="trust-strip-rule-line" />
            <span className="trust-strip-stars">
              {Array.from({ length: 5 }, (_, k) => <Icon key={k} name="star" size={12} />)}
              <span>4.6 / 5 · Google reviews</span>
            </span>
          </div>
          <h2 className="trust-strip-hero-title">
            Trusted by <em>10,000+</em> small businesses
          </h2>
          <p className="trust-strip-hero-sub">
            Real social-media work for real owners — across 120+ industries, since 2012.
          </p>
        </div>

        <div className="trust-strip-stats trust-strip-stats--mini">
          {stats.map((s, i) =>
          <div key={i} className="trust-strip-stat">
              <div className="trust-strip-stat-num">
                <em>{s.num}</em>{s.suffix && <span className="trust-strip-stat-suffix">{s.suffix}</span>}
              </div>
              <div className="trust-strip-stat-label">{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Hero render helper: render mixed text + em chunks ────────────────────
function renderHeadline(parts) {
  return parts.map((c, i) => typeof c === "string" ? <React.Fragment key={i}>{c}</React.Fragment> : <em key={i}>{c.em}</em>);
}

// ── Value props grid ─────────────────────────────────────────────────────
function ValueProps({ onNav, onOpenModal, tone = "bg-2" }) {
  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> What you get</div>
          <h2>The agency experience, <span className="display-em">without the agency price.</span></h2>
          <p>Most $99/month social services post AI slop on autopilot. We do the opposite: real humans plan, write, and design every post — AI just helps us brainstorm.</p>
        </div>
        <div className="value-grid">
          {VALUE_PROPS.map((v) =>
          <div key={v.icon} className="value-card">
              <div className="value-card-icon"><Icon name={v.icon} size={22} /></div>
              <div className="value-card-num">{v.label}</div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
              {v.cta &&
            <a href={"#" + v.cta.page} className="value-card-cta"
            onClick={(e) => {e.preventDefault();onNav && onNav(v.cta.page);}}>
                  {v.cta.label} <Icon name="arrow-right" size={14} />
                </a>
            }
            </div>
          )}
        </div>
        {onOpenModal && (
          <div className="section-cta-row">
            <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
              Get started from $99/mo <Icon name="arrow-right" size={16} />
            </button>
            <span className="section-cta-foot">Cancel anytime · 14-day money-back guarantee</span>
          </div>
        )}
      </div>
    </section>);

}

// ── How it works ────────────────────────────────────────────────────────
function HowItWorks({ tone }) {
  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> The process</div>
          <h2>Three <span className="display-em">simple</span> steps.</h2>
          <p>Then you can stop thinking about social media.</p>
        </div>
        <div className="how-grid">
          {HOW_STEPS.map((s, i) =>
          <div key={i} className="how-step">
              <div className="how-step-num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="how-step-visual">
                <HowVisual kind={s.visual} idx={i} />
              </div>
              {s.note ? <div className="how-step-note">{s.note}</div> : null}
            </div>
          )}
        </div>
      </div>
    </section>);

}

function HowVisual({ kind, idx }) {
  if (kind === "chat") {
    return (
      <div className="chat-list">
        <div className="chat-line"><span className="chat-tag">YOU</span><span className="chat-msg">We're a coffee roaster. Locals love our Sat morning vibe.</span></div>
        <div className="chat-line"><span className="chat-tag">AISHA</span><span className="chat-msg">Got it. What's the one thing customers always say first?</span></div>
        <div className="chat-line you"><span className="chat-tag">YOU</span><span className="chat-msg">“It smells like a hug in here.”</span></div>
        <div className="chat-line"><span className="chat-tag">AISHA</span><span className="chat-msg">Perfect, I'll work with that.</span></div>
      </div>);

  }
  if (kind === "calendar") {
    const days = Array.from({ length: 28 }, (_, i) => i % 2 === 1 && i > 4);
    return (
      <>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-3)" }}>March 2026 — 15 posts queued</div>
        <div className="mini-cal" style={{ marginTop: 12, flex: 1 }}>
          {days.map((on, i) => <div key={i} className="mini-cal-day" data-on={on ? "1" : "0"} />)}
        </div>
      </>);

  }
  if (kind === "feed") {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
        {["Mon 9:00 AM — Published to Instagram", "Mon 9:00 AM — Published to Facebook", "Tue 10:30 AM — Published to LinkedIn", "Wed 9:00 AM — Published to Google", "Wed 9:00 AM — Published to X"].map((t, i) =>
        <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 12.5, padding: "8px 10px", background: "var(--bg-2)", borderRadius: 10, color: "var(--ink-2)" }}>
            <span style={{ width: 8, height: 8, borderRadius: 50, background: "var(--primary)" }} />
            <span style={{ flex: 1 }}>{t}</span>
            <Icon name="check" size={14} color="var(--primary)" />
          </div>
        )}
      </div>);

  }
  return null;
}

// ── Examples grid (Instagram-style portfolio) ───────────────────────────
function ExamplePost({ post, onOpen }) {
  // Render an Instagram-style frame around each example.
  const v = post.variant || "soft-beige";
  const clickable = !!onOpen;
  const handle = post.handle || "99social";
  return (
    <div className={"ex-card" + (clickable ? " ex-card--click" : "")}
         role={clickable ? "button" : undefined}
         tabIndex={clickable ? 0 : undefined}
         onClick={clickable ? () => onOpen(post) : undefined}
         onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(post); } } : undefined}>
      <div className="ex-card-head">
        <div className="ex-card-avatar">
          <span className="nav-mark" style={{ minWidth: 28, height: 22, padding: "0 5px", fontSize: 10, borderRadius: 6 }}>
            <span className="nav-mark-dollar" style={{ fontSize: 7, marginTop: -3 }}>$</span>99
          </span>
        </div>
        <div className="ex-card-handle">{handle}</div>
        <div className="ex-card-more">···</div>
      </div>
      {post.image ?
        <div className="ex-card-image ex-card-image--photo">
          <img src={post.image} alt="" loading="lazy" />
        </div> :
        <div className={"ex-card-image ex-" + v}>
          <div className="ex-card-overlay">
            {post.kicker && <div className="ex-card-kicker">{post.kicker}</div>}
            <div className="ex-card-title">
              {post.title} {post.em && <em>{post.em}</em>}
            </div>
          </div>
        </div>
      }
      <div className="ex-card-foot">
        <div className="ex-card-icons">
          <Icon name="heart" size={20} />
          <Icon name="comment" size={20} />
          <Icon name="send" size={20} />
        </div>
        <Icon name="image" size={20} />
      </div>
    </div>);

}

// ── Instagram-style post detail modal ──────────────────────────────────
function nFmt(n) {
  if (typeof n !== "number") return n;
  if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace(/\.0$/, "") + "k";
  return String(n);
}

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

  if (!post) return null;

  const handle = post.handle || "99social";
  const subtitle = post.client || post.industry || "";
  const caption = post.caption || (post.title ? `${post.title} ${post.em || ""}` : "");

  const captionPara = caption.split("\n").map((line, i) => (
    <React.Fragment key={i}>
      {i > 0 && <br />}
      {line}
    </React.Fragment>
  ));

  return (
    <div className="ig-backdrop" onClick={onClose}>
      <button className="ig-close" aria-label="Close" onClick={onClose}>
        <Icon name="x" size={20} />
      </button>
      <div className="ig-modal" onClick={(e) => e.stopPropagation()}>
        {/* Image side */}
        <div className="ig-img">
          {post.image ? (
            <img src={post.image} alt="" />
          ) : (
            <div className={"ig-img-placeholder ex-" + (post.variant || "soft-beige")}>
              <div className="ex-card-overlay">
                {post.kicker && <div className="ex-card-kicker">{post.kicker}</div>}
                <div className="ex-card-title">
                  {post.title} {post.em && <em>{post.em}</em>}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Detail side — caption only, no comment/like/share controls */}
        <div className="ig-side ig-side--readonly">
          <div className="ig-head">
            <div className="ig-avatar">
              <span className="nav-mark" style={{ minWidth: 32, height: 24, padding: "0 6px", fontSize: 11, borderRadius: 6 }}>
                <span className="nav-mark-dollar" style={{ fontSize: 8, marginTop: -3 }}>$</span>99
              </span>
            </div>
            <div className="ig-head-meta">
              <div className="ig-handle">{handle}</div>
              {subtitle && <div className="ig-sub">{subtitle}</div>}
            </div>
          </div>

          <div className="ig-stream ig-stream--caption-only">
            <div className="ig-row ig-row--caption">
              <div className="ig-row-body">
                <span className="ig-row-handle">{handle}</span>{" "}
                <span className="ig-row-text">{captionPara}</span>
              </div>
            </div>
          </div>

          <div className="ig-foot-note">
            <Icon name="image" size={14} />
            <span>Sample post created by 99 Social</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExamplesGrid({ embedded = true, tone }) {
  const [filter, setFilter] = React.useState("Featured");
  const [count, setCount] = React.useState(9);
  const [openPost, setOpenPost] = React.useState(null);
  const filtered = filter === "Featured" ?
  EXAMPLE_POSTS.filter((p) => p.featured) :
  EXAMPLE_POSTS.filter((p) => p.industry === filter);
  const items = filtered.slice(0, count);
  // Reset count when filter changes
  React.useEffect(() => {setCount(9);}, [filter]);

  return (
    <section className={"section" + bgTone(tone !== undefined ? tone : (embedded ? "bg-2" : null))}>
      <div className="container">
        {embedded && (
          <div className="section-head">
            <div className="kicker"><span className="dot" /> Real client work</div>
            <h2>Social media posts <span className="display-em">we've made.</span></h2>
            <p>A look at posts created for actual clients across industries. Filter by category to see examples in your niche.</p>
          </div>
        )}

        <div className="ex-tabs">
          {EXAMPLE_INDUSTRIES.map((ind) =>
          <button key={ind} className="ex-tab" data-on={filter === ind ? "1" : "0"} onClick={() => setFilter(ind)}>
              {ind}
            </button>
          )}
        </div>

        <div className="ex-grid">
          {items.map((p, i) => <ExamplePost key={i} post={p} onOpen={setOpenPost} />)}
        </div>

        {count < filtered.length &&
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
            <button className="btn btn--ghost btn--lg" onClick={() => setCount(count + 9)}>
              Load more <Icon name="arrow-right" size={14} />
            </button>
          </div>
        }
        {filtered.length === 0 &&
        <div style={{ textAlign: "center", padding: "32px 0", color: "var(--ink-3)" }}>
            More examples in this category coming soon — meanwhile, <a href="#contact" style={{ color: "var(--primary)" }}>ask us</a> for samples in your niche.
          </div>
        }
      </div>
      <IGPostModal post={openPost} onClose={() => setOpenPost(null)} />
    </section>);

}

// Back-compat: HomePage references PostBrowser elsewhere — alias to ExamplesGrid.
const PostBrowser = ExamplesGrid;

// ── Video Examples (Wistia, horizontal swipe reel with click-to-play) ──
// All tiles use a "facade" — only the thumbnail loads up front; the iframe
// + player JS load only when a tile is clicked. Safe to add many entries.
const VIDEO_EXAMPLES = [
  { id: "j9iywnu2y3", sub: "onekeystory" },
  { id: "zobks8ezdn", sub: "onekeystory" },
  { id: "w1p1lqpuvf", sub: "onekeystory" },
  { id: "non2642hqj", sub: "onekeystory" },
  { id: "yd6b8e1zrl", sub: "onekeystory" },
  { id: "mw0x8jtpbs", sub: "onekeystory" },
  { id: "v0bzvj4bq5", sub: "onekeystory" },
  { id: "ueon24btel", sub: "onekeystory" },
  { id: "smadouctcg", sub: "onekeystory" },
  { id: "g73618hjlp", sub: "onekeystory" },
  { id: "avttnecnur", sub: "onekeystory" },
  { id: "1l0dnermdy", sub: "onekeystory" },
  { id: "0bgdssznyx", sub: "juancarlosrestreporuiz" },
  { id: "z1hw01frko", sub: "juan-99dollarsocial" },
  { id: "8b4v6zq80t", sub: "juancarlosrestreporuiz" },
  { id: "rseap44ydz", sub: "juan-99dollarsocial" },
  { id: "65bm22d8z1", sub: "juan-99dollarsocial" },
  { id: "dt9lp06wyv", sub: "juancarlosrestreporuiz" },
  { id: "ar3khx3o58", sub: "juan-99dollarsocial" },
  { id: "ne22vxq63j", sub: "juancarlosrestreporuiz" },
  { id: "ptte1ma9c5", sub: "juancarlosrestreporuiz" },
  { id: "81yrlr97y0", sub: "juan-99dollarsocial" },
  { id: "5zkdvcpa5q", sub: "content-workspace01" },
  { id: "vbi0c9kabx", sub: "juancarlosrestreporuiz" },
  { id: "ctqstswwv6", sub: "juancarlosrestreporuiz" },
  { id: "py1nx62qam", sub: "juancarlosrestreporuiz" },
  { id: "hw7ncwqo5l", sub: "content-workspace01" },
];

function VideoExamples({ tone, embedded = true }) {
  const scrollerRef = React.useRef(null);
  const [playing, setPlaying] = React.useState({}); // id -> true
  const [edge, setEdge] = React.useState({ left: true, right: false });

  const updateEdge = React.useCallback(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const left = el.scrollLeft <= 2;
    const right = el.scrollLeft + el.clientWidth >= el.scrollWidth - 2;
    setEdge({ left, right });
  }, []);

  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    updateEdge();
    el.addEventListener("scroll", updateEdge, { passive: true });
    window.addEventListener("resize", updateEdge);
    return () => {
      el.removeEventListener("scroll", updateEdge);
      window.removeEventListener("resize", updateEdge);
    };
  }, [updateEdge]);

  const scrollBy = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    const card = el.querySelector(".video-card");
    const gap = 20;
    const step = card ? (card.offsetWidth + gap) * 2 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        {embedded && (
          <div className="section-head video-head">
            <div className="kicker"><span className="dot" /> Video work</div>
            <h2>Short-form videos <span className="display-em">we've made.</span></h2>
            <p>Vertical videos crafted for Reels, TikTok, and Shorts. Swipe through — tiles only load video when you tap.</p>
          </div>
        )}

        <div className="video-reel-wrap">
          <button
            type="button"
            className="video-reel-arrow video-reel-arrow--left"
            data-hidden={edge.left ? "1" : "0"}
            onClick={() => scrollBy(-1)}
            aria-label="Scroll left"
          >
            <Icon name="arrow-right" size={18} />
          </button>

          <div className="video-reel" ref={scrollerRef}>
            {VIDEO_EXAMPLES.map((v, i) => (
              <div key={v.id} className="video-card">
                {playing[v.id] ? (
                  <iframe
                    src={`https://fast.wistia.net/embed/iframe/${v.id}?autoPlay=1`}
                    allow="autoplay; fullscreen"
                    allowFullScreen
                    title={`Video example ${i + 1}`}
                    loading="lazy"
                  />
                ) : (
                  <button
                    className="video-facade"
                    type="button"
                    onClick={() => setPlaying((p) => ({ ...p, [v.id]: true }))}
                    aria-label={`Play video example ${i + 1}`}
                  >
                    <img
                      src={`https://${v.sub || "fast"}.wistia.com/embed/medias/${v.id}/swatch`}
                      alt=""
                      loading="lazy"
                      onError={(e) => { e.currentTarget.style.display = "none"; }}
                    />
                    <span className="video-facade-play" aria-hidden="true">
                      <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                        <path d="M8 5v14l11-7z" />
                      </svg>
                    </span>
                  </button>
                )}
              </div>
            ))}
            <div className="video-reel-end" aria-hidden="true" />
          </div>

          <button
            type="button"
            className="video-reel-arrow video-reel-arrow--right"
            data-hidden={edge.right ? "1" : "0"}
            onClick={() => scrollBy(1)}
            aria-label="Scroll right"
          >
            <Icon name="arrow-right" size={18} />
          </button>
        </div>

        <div className="video-reel-hint">
          <span className="video-reel-hint-dot" />
          Swipe, scroll, or use the arrows to browse
        </div>
      </div>
    </section>
  );
}

// ── Grid Gallery: full client feeds, framed as Instagram profile mockups ─
function GridGallery({ onBookDemo, tone }) {
  return (
    <section className={"section grid-gallery" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Brand grids</div>
          <h2>Whole feeds, <span className="display-em">on brand.</span></h2>
          <p>We don't just write one-off posts — we build whole feeds. Each grid below is a real client whose visual identity we plan, design, and ship every month. Tap any of them to see a brand in motion.</p>
        </div>

        <div className="gallery-list">
          {GRID_GALLERIES.map((g, i) => (
            <article key={g.id} className={"gallery-row" + (i % 2 ? " gallery-row--rev" : "")}>
              <div className="gallery-text">
                <div className="gallery-num-row">
                  <span className="gallery-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="gallery-rule" />
                  <span className="gallery-industry">{g.industry}</span>
                </div>
                <h3 className="gallery-title">
                  {g.title.map((c, j) => typeof c === "string" ? <React.Fragment key={j}>{c}</React.Fragment> : <em key={j}>{c.em}</em>)}
                </h3>
                <p className="gallery-body">{g.body}</p>

                <dl className="gallery-meta">
                  <div className="gallery-meta-item">
                    <dt>Channels</dt>
                    <dd>{g.output}</dd>
                  </div>
                </dl>

                <button className="btn btn--ghost gallery-cta" onClick={onBookDemo}>
                  Get a grid like this <Icon name="arrow-right" size={14} />
                </button>
              </div>

              {/* Image side: framed as a tiny IG profile screenshot */}
              <div className="gallery-frame">
                <div className="gallery-frame-bar">
                  <div className="gallery-frame-dots"><span /><span /><span /></div>
                </div>
                <div className="gallery-frame-profile">
                  <div className="gallery-frame-avatar">{g.handle.slice(0, 2).toUpperCase()}</div>
                  <div className="gallery-frame-id">
                    <div className="gallery-frame-handle">@{g.handle}</div>
                    <div className="gallery-frame-bio">{g.bio}</div>
                  </div>
                  <div className="gallery-frame-stats">
                    <div><b>{g.posts}</b><span>posts</span></div>
                    <div><b>{g.followers}</b><span>followers</span></div>
                  </div>
                </div>
                <div className="gallery-frame-grid">
                  <img src={g.image} alt={g.industry + " brand grid"} loading="lazy" />
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing — tabbed categories, tier list + includes sidebar ────────────
function PricingSection({ embedded = false, onOpenModal, tone }) {
  const [catId, setCatId] = React.useState("posts");
  const [tierIdx, setTierIdx] = React.useState(0);

  const cat = PRICING_CATEGORIES.find((c) => c.id === catId) || PRICING_CATEGORIES[0];
  // Reset tier when category changes so we don't land on an out-of-range index
  React.useEffect(() => {setTierIdx(0);}, [catId]);
  const isFlat = cat.tiers.length === 1;

  return (
    <section className={"section" + bgTone(tone !== undefined ? tone : (embedded ? "bg-2" : null))}>
      <div className="container">
        {embedded && (
          <div className="section-head">
            <div className="kicker"><span className="dot" /> Pricing</div>
            <h2>Affordable <span className="display-em">pricing plans.</span></h2>
            <p>Month-to-month. No contracts. No hidden fees.</p>
          </div>
        )}

        {/* Category tabs */}
        <div className="pricing-tabs-wrap">
          <div className="pricing-tabs" role="tablist">
            {PRICING_CATEGORIES.map((c) =>
            <button key={c.id} role="tab" aria-selected={c.id === catId}
            className="pricing-tab" data-on={c.id === catId ? "1" : "0"}
            onClick={() => setCatId(c.id)}>
                <Icon name={c.icon} size={16} />
                <span>{c.label}</span>
              </button>
            )}
          </div>
        </div>

        <div className="price-card">
          <div className="price-card-grid">
            {/* Tier list */}
            <div className="price-tiers">
              {isFlat ?
              <div className="price-flat">
                  <div className="price-flat-head">
                    <div className="kicker"><span className="dot" /> {cat.label}</div>
                    <div className="price-flat-title">{cat.headline}</div>
                    <div className="price-flat-sub">{cat.sub}</div>
                  </div>
                  <div className="price-flat-amount">
                    <b>${cat.tiers[0].monthly}</b><span>/mo</span>
                  </div>
                  <div className="price-flat-fine">{cat.tiers[0].posts} · Simple flat monthly pricing · Cancel anytime</div>
                </div> :
              cat.tiers.map((tier, i) => {
                const on = i === tierIdx;
                return (
                  <button key={tier.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">{tier.name}</span>
                        {tier.popular && <span className="price-tier-pop">Popular</span>}
                      </div>
                      <div className="price-tier-sub">{tier.posts}</div>
                    </div>
                    <div className="price-tier-amount">
                      <b>${tier.monthly}</b><span>/mo</span>
                      {tier.addon && <em className="price-tier-addon">{tier.addon}</em>}
                    </div>
                  </button>);

              })}
              <div className="price-fine">
                Pricing is in <b>USD</b>. Auto-renews unless cancelled. By subscribing you agree to{" "}
                <a href="#" onClick={(e) => e.preventDefault()}>Terms &amp; Conditions</a>. Cancellation requires at least 7 days notice. 14-day money back guarantee.
              </div>
            </div>

            {/* Includes sidebar */}
            <aside className="price-aside">
              <div className="price-aside-head">Plan includes</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 now <Icon name="arrow-right" size={14} />
              </button>
              <div className="price-aside-fine">No contracts. Cancel anytime.</div>
            </aside>
          </div>
        </div>
      </div>
    </section>);

}

// ── Compare table (us vs agency vs DIY) ──────────────────────────────────
function Compare({ tone, onOpenModal }) {
  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> The math</div>
          <h2>How we stack up <span className="display-em">against the alternatives.</span></h2>
        </div>
        <div className="compare">
          <div className="compare-row compare-row--head">
            <div className="compare-cell">&nbsp;</div>
            <div className="compare-cell compare-cell--us">99 Social</div>
            <div className="compare-cell">A hired agency</div>
            <div className="compare-cell">DIY in-house</div>
          </div>
          {COMPARE_ROWS.map((r, i) =>
          <div key={i} className="compare-row">
              <div className="compare-cell compare-cell--feature">{r[0]}</div>
              <div className="compare-cell compare-cell--us"><b>{r[1]}</b></div>
              <div className="compare-cell">{r[2]}</div>
              <div className="compare-cell">{r[3]}</div>
            </div>
          )}
        </div>
        {onOpenModal && (
          <div className="section-cta-row">
            <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
              Get started from $99/mo <Icon name="arrow-right" size={16} />
            </button>
            <span className="section-cta-foot">Save thousands · cancel anytime</span>
          </div>
        )}
      </div>
    </section>);

}

// ── Testimonials ─────────────────────────────────────────────────────────
function Testimonials({ short = false, tone = "bg-2" }) {
  const [expanded, setExpanded] = React.useState(false);
  const initial = TESTIMONIALS.slice(0, 3);
  const rest = TESTIMONIALS.slice(3);
  const items = short ? initial : expanded ? TESTIMONIALS : initial;
  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="stars" style={{ display: "inline-flex", gap: 1, color: "var(--primary)", marginRight: 4 }}>
              {Array.from({ length: 5 }, (_, k) => <Icon key={k} name="star" size={11} />)}
            </span>
            <span>4.6/5 · Verified Google reviews</span>
          </div>
          <h2>Loved by 10,000+ <span className="display-em">small businesses.</span></h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) =>
          <div key={i} className="testi-card">
              <div className="stars">
                {Array.from({ length: 5 }, (_, k) => <Icon key={k} name="star" size={16} />)}
              </div>
              <div className="testi-quote">"{t.quote}"</div>
              <div className="testi-foot">
                <div className="testi-avatar" style={{ background: t.color }}>{t.avatar}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-biz">{t.biz}</div>
                </div>
              </div>
            </div>
          )}
        </div>
        {!short && rest.length > 0 &&
        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
            <button className="btn btn--ghost btn--lg" onClick={() => setExpanded(!expanded)}>
              {expanded ? "Show less" : `Show ${rest.length} more reviews`}
              <Icon name={expanded ? "arrow-left" : "arrow-right"} size={14} />
            </button>
          </div>
        }
      </div>
    </section>);

}

// ── FAQ ───────────────────────────────────────────────────────────────────
function FAQ({ tone }) {
  const [open, setOpen] = React.useState(0);
  const [showAll, setShowAll] = React.useState(false);
  const INITIAL = 8;
  const items = showAll ? FAQS : FAQS.slice(0, INITIAL);
  return (
    <section className={"section" + bgTone(tone)}>
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Questions</div>
          <h2>The things people ask <span className="display-em">before they sign up.</span></h2>
          <p>If your question isn't here, <a href="#contact" style={{ color: "var(--primary)" }}>schedule a call</a> and we'll answer it directly.</p>
        </div>
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          <div className="faq-list">
            {items.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>
          {FAQS.length > INITIAL &&
          <div style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
              <button className="btn btn--ghost btn--lg" onClick={() => setShowAll(!showAll)}>
                {showAll ? "Show fewer questions" : `Show all ${FAQS.length} questions`}
                <Icon name={showAll ? "arrow-left" : "arrow-right"} size={14} />
              </button>
            </div>
          }
        </div>
      </div>
    </section>);

}

// ── Guarantee ────────────────────────────────────────────────────────────
// 14-day money-back risk-reversal box. Recommended placement: between the
// Pricing section and FAQ on the home page; also replaces the legacy
// guarantee block on the Pricing page so the policy stays consistent.
function Guarantee({ tone = "bg-2", onOpenModal }) {
  return (
    <section className={"guarantee" + bgTone(tone)}>
      <div className="container">
        <div className="guarantee-card">
          <div className="guarantee-grid">
            <div className="guarantee-content">
              <span className="kicker"><span className="dot" /> Risk-free · zero commitment</span>
              <h2>
                Not feeling it after your first batch of content?<br />
                <span className="display-em display-underline">Get your money back.</span>
              </h2>
              <p className="guarantee-lede">
                We're confident in the work our writers and designers will make for you. Every eligible new plan is backed by our <strong>14-day money-back guarantee</strong> — no phone tag, no penalty clauses, no scripts to fight through.
              </p>
              <ul className="guarantee-bullets">
                <li>
                  <span className="guarantee-bullets-check"><Icon name="check" size={13} /></span>
                  <span><strong>14 full days</strong> to review your first batch of content and work revisions with your account manager.</span>
                </li>
                <li>
                  <span className="guarantee-bullets-check"><Icon name="check" size={13} /></span>
                  <span>We'll go through <strong>at least two rounds of revisions</strong> so we get a real shot at your brand voice.</span>
                </li>
                <li>
                  <span className="guarantee-bullets-check"><Icon name="check" size={13} /></span>
                  <span>If you still aren't happy, we <strong>refund your first month in full</strong>.</span>
                </li>
              </ul>
              <div className="guarantee-ctas">
                <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
                  Get started risk-free <Icon name="arrow-right" size={16} />
                </button>
                <a
                  href="#policy"
                  className="guarantee-link"
                  onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("policy"); }}>

                  Read the full policy
                </a>
              </div>
              <p className="guarantee-fine">
                Applies to social media management plans (posts &amp; reels). Once posts are published live to your accounts the trial closes — see{" "}
                <a href="#policy" onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("policy"); }}>full terms</a>.
              </p>
            </div>

            <div className="guarantee-medallion" aria-hidden="true">
              <div className="guarantee-disc">
                <div className="guarantee-disc-inner">
                  <div className="guarantee-disc-seal"><Icon name="check" size={18} /></div>
                  <div className="guarantee-disc-label">Day</div>
                  <div className="guarantee-disc-num">14</div>
                  <div className="guarantee-disc-rule" />
                  <div className="guarantee-disc-sub">Money-back guarantee</div>
                </div>
              </div>
              <div className="guarantee-chip guarantee-chip--refund">
                <span className="guarantee-chip-dot" /> Full refund
              </div>
              <div className="guarantee-chip guarantee-chip--hassle">
                <span className="guarantee-chip-dot" /> No hassle
              </div>
            </div>
          </div>

          <div className="guarantee-strip">
            <div className="guarantee-strip-item">
              <Icon name="star" size={14} />
              <span><strong>Trusted by 10,000+</strong> small businesses since 2012</span>
            </div>
            <span className="guarantee-strip-sep" />
            <div className="guarantee-strip-item">
              <Icon name="user" size={14} />
              <span>Real human writers &amp; designers</span>
            </div>
            <span className="guarantee-strip-sep" />
            <div className="guarantee-strip-item">
              <Icon name="check" size={14} />
              <span>Cancel anytime</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Final CTA ────────────────────────────────────────────────────────────
function FinalCTA({ onOpenModal, onBookDemo }) {
  return (
    <section className="final-cta">
      <div className="container final-cta-inner">
        <div className="kicker kicker--invert" style={{ marginBottom: 22 }}><span className="dot" /> Get started today</div>
        <h2>Your next month of posts, <span className="display-em">already drafted.</span></h2>
        <p>20-minute demo call, your first calendar ready in 7–10 business days. From $99/month, cancel anytime.</p>
        <div className="final-cta-buttons">
          <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-invert btn--lg" onClick={onBookDemo}>
            <Icon name="calendar" size={16} /> Book a 20-min demo
          </button>
        </div>
        <div style={{ marginTop: 28, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em", color: "rgba(255,255,255,0.5)" }}>
          NO CONTRACT · NO SETUP FEE · CANCEL ANYTIME
        </div>
      </div>
    </section>);

}

// ── Footer ───────────────────────────────────────────────────────────────
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p style={{ marginTop: 12 }}>Done-for-you social media for small business. Real humans, not AI. Plans from $99/mo. Trusted by 10,000+ businesses since 2012.</p>
          </div>
          <div>
            <div className="footer-col-h">Product</div>
            <div className="footer-col-list">
              <a href="#services" onClick={(e) => {e.preventDefault();onNav('services');}}>Services</a>
              <a href="#social-media-management" onClick={(e) => {e.preventDefault();onNav('social-media-management');}}>Social Media Management</a>
              <a href="#pricing" onClick={(e) => {e.preventDefault();onNav('pricing');}}>Pricing</a>
              <a href="#">Sample posts</a>
              <a href="#">Case studies</a>
            </div>
          </div>
          <div>
            <div className="footer-col-h">Company</div>
            <div className="footer-col-list">
              <a href="#about" onClick={(e) => {e.preventDefault();onNav('about');}}>About</a>
              <a href="#careers" onClick={(e) => {e.preventDefault();onNav('careers');}}>Careers</a>
              <a href="#">Press</a>
              <a href="#social-media-reseller-program" onClick={(e) => {e.preventDefault();onNav('social-media-reseller-program');}}>Reseller program</a>
            </div>
          </div>
          <div>
            <div className="footer-col-h">Help</div>
            <div className="footer-col-list">
              <a href="#contact" onClick={(e) => {e.preventDefault();onNav('contact');}}>Contact</a>
              <a href="https://intercom.help/99-dollar-social/en" target="_blank" rel="noopener noreferrer">Help Center</a>
              <a href="#">FAQ</a>
              <a href="#schedule-a-call" onClick={(e) => {e.preventDefault();onNav('schedule-a-call');}}>Book a call</a>
              <a href="#">Status</a>
            </div>
          </div>
          <div>
            <div className="footer-col-h">Legal</div>
            <div className="footer-col-list">
              <a href="#policy" onClick={(e) => {e.preventDefault();onNav('policy');}}>Terms of Service</a>
              <a href="#policy" onClick={(e) => {e.preventDefault();onNav('policy');}}>Privacy Policy</a>
              <a href="#policy" onClick={(e) => {e.preventDefault();onNav('policy');}}>Refund Policy</a>
              <a href="#policy" onClick={(e) => {e.preventDefault();onNav('policy');}}>DPA</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 99 Social, LLC. Made with care in Austin, TX.</span>
          <div className="footer-social">
            <a href="https://www.facebook.com/99dollarsocial" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
              <Icon name="facebook" size={16} />
            </a>
            <a href="https://www.instagram.com/99dollarsocialdotcom/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <Icon name="instagram" size={16} />
            </a>
            <a href="https://www.linkedin.com/company/-99-social/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <Icon name="linkedin" size={16} />
            </a>
          </div>
        </div>
      </div>
    </footer>);

}

// ── Sticky CTA bar (appears after scrolling past hero) ──────────────────
function StickyCTA({ onOpenModal }) {
  const [show, setShow] = React.useState(false);
  const [dismissed, setDismissed] = React.useState(false);
  React.useEffect(() => {
    if (dismissed) {setShow(false);return;}
    const onScroll = () => {
      setShow(window.scrollY > 800);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [dismissed]);
  return (
    <div className="sticky-cta" data-show={show ? "1" : "0"}>
      <div className="sticky-cta-text">
        Posting consistently is the hard part. <b>From $99/month, cancel anytime.</b>
      </div>
      <button className="btn" onClick={onOpenModal}>Get started <Icon name="arrow-right" size={14} /></button>
      <button className="sticky-cta-close" aria-label="Dismiss" onClick={() => setDismissed(true)}>
        <Icon name="x" size={14} />
      </button>
    </div>);

}

// ── Signup modal (4-step onboarding) ────────────────────────────────────
const PLATFORM_LIST = [
{ id: "ig", label: "Instagram", icon: "instagram" },
{ id: "fb", label: "Facebook", icon: "facebook" },
{ id: "li", label: "LinkedIn", icon: "linkedin" },
{ id: "tw", label: "X / Twitter", icon: "twitter" },
{ id: "gb", label: "Google", icon: "google" },
{ id: "tk", label: "TikTok", icon: "tiktok" }];


function SignupModal({ open, onClose, onBookDemo }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    biz: "", website: "", platforms: ["ig", "fb"],
    industry: "", email: "", name: ""
  });

  React.useEffect(() => {
    if (!open) {setStep(0);}
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  if (!open) return null;

  const togglePlat = (id) => {
    setData((d) => ({
      ...d,
      platforms: d.platforms.includes(id) ? d.platforms.filter((p) => p !== id) : [...d.platforms, id]
    }));
  };

  const STEPS = [
  {
    title: "What's your business?",
    sub: "We'll customize the rest based on your industry.",
    body:
    <>
          <div>
            <div className="modal-label">Business name</div>
            <input className="modal-input" placeholder="Hilltop Coffee Roasters" value={data.biz} onChange={(e) => setData({ ...data, biz: e.target.value })} />
          </div>
          <div>
            <div className="modal-label">Industry</div>
            <select className="modal-select" value={data.industry} onChange={(e) => setData({ ...data, industry: e.target.value })}>
              <option value="">Choose one…</option>
              <option>Retail</option><option>Food &amp; Beverage</option><option>Professional Services</option>
              <option>Home Services</option><option>Healthcare</option><option>Real Estate</option>
              <option>Fitness &amp; Wellness</option><option>Other</option>
            </select>
          </div>
          <div>
            <div className="modal-label">Website (optional)</div>
            <input className="modal-input" placeholder="hilltopcoffee.com" value={data.website} onChange={(e) => setData({ ...data, website: e.target.value })} />
          </div>
        </>,

    canNext: data.biz && data.industry
  },
  {
    title: "Where should we post?",
    sub: "Toggle the platforms you want us managing. You can change this later.",
    body:
    <div className="modal-platforms">
          {PLATFORM_LIST.map((p) =>
      <div key={p.id} className="modal-platform" data-on={data.platforms.includes(p.id) ? "1" : "0"} onClick={() => togglePlat(p.id)}>
              <Icon name={p.icon} size={20} />
              {p.label}
            </div>
      )}
        </div>,

    canNext: data.platforms.length > 0
  },
  {
    title: "Almost there.",
    sub: "Where should we send your demo link?",
    body:
    <>
          <div>
            <div className="modal-label">Your name</div>
            <input className="modal-input" placeholder="Maya Vance" value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} />
          </div>
          <div>
            <div className="modal-label">Email</div>
            <input type="email" className="modal-input" placeholder="you@business.com" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} />
          </div>
          <div style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--ink-2)", background: "var(--bg-2)", padding: 14, borderRadius: 12 }}>
            <Icon name="check" size={16} color="var(--primary)" />
            <span>Plans from $99/month — first month prorated. Cancel anytime in your dashboard.</span>
          </div>
        </>,

    canNext: data.email && data.name
  },
  {
    title: "Welcome aboard 👋",
    sub: "",
    body:
    <div className="modal-success">
          <div className="modal-success-icon"><Icon name="check" size={32} /></div>
          <h2 style={{ fontSize: 24, marginBottom: 8 }}>You're in, {data.name.split(" ")[0] || "friend"}.</h2>
          <p className="muted" style={{ fontSize: 15 }}>We just sent <b>{data.email}</b> a link to book your 20-minute demo call. Your first content calendar will be ready in 7–10 business days.</p>
          <div style={{ marginTop: 24, padding: 16, borderRadius: 14, background: "var(--bg-2)", textAlign: "left", display: "flex", gap: 14, alignItems: "center" }}>
            <div className="testi-avatar" style={{ background: "oklch(0.7 0.17 30)" }}>AB</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14.5 }}>Aisha, your writer</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>I'll reach out within 24 hours.</div>
            </div>
          </div>
        </div>,

    canNext: false
  }];


  const cur = STEPS[step];

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-x" aria-label="Close" onClick={onClose}><Icon name="x" size={18} /></button>
        {step < 3 && <div className="modal-step-counter">Step {step + 1} of 3</div>}
        <h2>{cur.title}</h2>
        {cur.sub && <p className="modal-sub">{cur.sub}</p>}
        <div className="modal-step">{cur.body}</div>
        {step < 3 &&
        <div className="modal-footer">
            {step > 0 && <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>Back</button>}
            <button
            className="btn btn--primary"
            disabled={!cur.canNext}
            style={{ flex: 1, justifyContent: "center", opacity: cur.canNext ? 1 : 0.5 }}
            onClick={() => setStep(step + 1)}>
              {step === 2 ? "Start my plan" : "Next"} <Icon name="arrow-right" size={14} />
            </button>
          </div>
        }
        {step === 0 && onBookDemo &&
        <div className="modal-alt">
            Prefer to talk first? <a href="#" onClick={(e) => {e.preventDefault();onClose();setTimeout(onBookDemo, 100);}}>Book a 20-min demo →</a>
          </div>
        }
        {step === 3 &&
        <div className="modal-footer">
            <button className="btn btn--primary" style={{ flex: 1, justifyContent: "center" }} onClick={onClose}>Got it</button>
          </div>
        }
      </div>
    </div>);

}

// ── Sales video section ──────────────────────────────────────────────────
const VIDEO_ID = "drQUhNFv8ag";

const VIDEO_TRANSCRIPT = [
"Welcome to 99DollarSocial. In this video, we walk through how our $99/month done-for-you social media service works and why it was built specifically for small businesses.",
"Managing social media consistently is one of the biggest challenges business owners face. Knowing what to post, when to post, and how to stay active across platforms takes time most owners simply don't have. 99DollarSocial exists to remove that burden entirely.",
"We provide done-for-you social media for busy business owners, which means content creation, scheduling, and posting are all handled for you. You don't need to brainstorm ideas, design graphics, or worry about consistency — your social media stays active and professional without daily effort.",
"Since 2012, 99DollarSocial has helped nearly 10,000 small businesses stay visible online. All content is created by real humans, not fully automated systems. While we use technology to improve efficiency, every post is reviewed to ensure quality and relevance for your business.",
"Our goal is to make social media affordable, simple, and sustainable. Consistent posting helps businesses build trust, maintain credibility, and stay top of mind with their audience — without chasing viral trends or gimmicks.",
"Plans start at $99 per month and are available on a month-to-month basis. There are no long-term contracts, and you can cancel at any time. Content may include static posts, carousels, and short-form video such as Reels, depending on what best fits your business.",
"Getting started is straightforward. After onboarding, we learn about your business, your tone, and your goals. From there, our team creates your content and manages posting on an ongoing basis. Early feedback helps dial in your voice quickly.",
"Many clients say the biggest benefit isn't just the content — it's peace of mind. Social media stops being a recurring task or source of stress and becomes something that's simply handled.",
"Organic social media focuses on brand awareness and consistency. While it isn't designed to guarantee leads on its own, it plays an important role in building trust. For businesses looking for faster growth, 99DollarSocial also offers optional services like Instagram growth plans and paid advertising.",
"If you're looking for a reliable, affordable way to stay consistent on social media without managing it yourself, this video explains exactly how 99DollarSocial works and what to expect when getting started."];


function loadYouTubeAPI() {
  return new Promise((resolve) => {
    if (window.YT && window.YT.Player) return resolve();
    const prior = window.onYouTubeIframeAPIReady;
    window.onYouTubeIframeAPIReady = function () {
      if (typeof prior === "function") prior();
      resolve();
    };
    if (!document.querySelector('script[data-yt-api]')) {
      const tag = document.createElement("script");
      tag.src = "https://www.youtube.com/iframe_api";
      tag.setAttribute("data-yt-api", "1");
      document.head.appendChild(tag);
    }
  });
}

function VideoSection({ tone = "bg-2" }) {
  const [playing, setPlaying] = React.useState(false);
  const [transcriptOpen, setTranscriptOpen] = React.useState(false);
  const stageRef = React.useRef(null);
  const playerRef = React.useRef(null);

  const handlePlay = async () => {
    if (playerRef.current) return;
    setPlaying(true);
    await loadYouTubeAPI();
    if (playerRef.current || !stageRef.current) return;
    let target = stageRef.current.querySelector(".video-yt-target");
    if (!target) {
      target = document.createElement("div");
      target.className = "video-yt-target";
      stageRef.current.appendChild(target);
    }
    playerRef.current = new window.YT.Player(target, {
      videoId: VIDEO_ID,
      playerVars: {
        autoplay: 1,
        controls: 1,
        modestbranding: 1,
        rel: 0,
        playsinline: 1,
        cc_load_policy: 1,
        cc_lang_pref: "en"
      },
      events: {
        onReady: (event) => {
          try {event.target.setPlaybackRate(1.25);} catch (e) {}
          try {event.target.playVideo();} catch (e) {}
        }
      }
    });
  };

  return (
    <section className={"section video-section" + bgTone(tone)}>
      <div className="container">
        <div className="video-head">
          <div className="kicker"><span className="dot" /> Watch · 2 min</div>
          <h2>How $99/month done-for-you social <span className="display-em">works for small businesses.</span></h2>
          <p>In this short video, you'll see exactly how 99DollarSocial's $99/month done-for-you social media service works for small businesses. We cover what's included, how posting is handled for you, and how we can achieve your social media goals.</p>
        </div>

        <div className="video-frame">
          <div className="video-stage" data-playing={playing ? "1" : "0"} ref={stageRef}>
            {!playing &&
            <>
                <div className="video-poster" onClick={handlePlay}>
                  <div className="video-poster-overlay">
                    <div className="video-poster-eyebrow">$99/Month Done-For-You Social Media</div>
                    <div className="video-poster-title">
                      Welcome to <em>$99 Social</em>
                    </div>
                    <div className="video-poster-bullets">
                      <div><span className="vpb-dot" /><div className="vpb-text"><b>Done-for-you</b> social media for busy business owners</div></div>
                      <div><span className="vpb-dot" /><div className="vpb-text"><b>Trusted by 10,000+</b> businesses since 2012</div></div>
                      <div><span className="vpb-dot" /><div className="vpb-text"><b>Real humans</b> — not AI-generated</div></div>
                    </div>
                    <div className="video-poster-foot">
                      <div className="video-poster-host">
                        <div className="video-poster-avatar">JO</div>
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 600 }}>Jordan Okafor, Founder</div>
                          <div style={{ fontSize: 11.5, opacity: 0.6 }}>99 Social · Est. 2012</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <button className="video-play" aria-label="Play video" onClick={handlePlay}>
                  <Icon name="play" size={28} />
                </button>
                <div className="video-duration"><Icon name="clock" size={12} /> 2:14 · 1.25x · CC</div>
              </>
            }
          </div>
        </div>

        <div className="video-foot">
          <button className="video-transcript" onClick={() => setTranscriptOpen(!transcriptOpen)}>
            <Icon name="edit" size={14} /> {transcriptOpen ? "Hide transcript" : "View transcript"}
          </button>
        </div>

        {transcriptOpen &&
        <div className="video-transcript-body">
            {VIDEO_TRANSCRIPT.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        }
      </div>
    </section>);

}

// ── Book-a-demo modal ────────────────────────────────────────────────────
// Mocked Calendly-style picker. State is local, no real backend.
function BookDemoModal({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [picked, setPicked] = React.useState({ date: null, time: null });
  const [info, setInfo] = React.useState({ name: "", email: "", biz: "" });

  React.useEffect(() => {
    if (!open) {setStep(0);setPicked({ date: null, time: null });}
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  if (!open) return null;

  // Build a simple weekday-only calendar starting tomorrow.
  const today = new Date(2026, 4, 13); // anchored so the prototype looks the same every load
  const days = [];
  let added = 0,offset = 1;
  while (added < 10) {
    const d = new Date(today);
    d.setDate(today.getDate() + offset);
    offset++;
    const dow = d.getDay();
    if (dow !== 0 && dow !== 6) {days.push(d);added++;}
  }
  const times = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"];

  const dateLabel = (d) => d ? d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) : "";

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal modal--demo" onClick={(e) => e.stopPropagation()}>
        <button className="modal-x" aria-label="Close" onClick={onClose}><Icon name="x" size={18} /></button>
        {step === 0 &&
        <>
            <div className="modal-step-counter">Step 1 of 2 · Pick a time</div>
            <h2>Book a 20-minute demo.</h2>
            <p className="modal-sub">With a real account manager, not a recording. We'll show your dashboard, sample posts in your industry, and answer the question you came here to ask.</p>
            <div className="demo-grid">
              <div>
                <div className="modal-label">Date</div>
                <div className="demo-dates">
                  {days.map((d, i) => {
                  const on = picked.date && d.toDateString() === picked.date.toDateString();
                  return (
                    <button key={i} className="demo-date" data-on={on ? "1" : "0"} onClick={() => setPicked({ ...picked, date: d, time: null })}>
                        <span>{d.toLocaleDateString("en-US", { weekday: "short" })}</span>
                        <b>{d.getDate()}</b>
                      </button>);

                })}
                </div>
              </div>
              <div>
                <div className="modal-label">{picked.date ? dateLabel(picked.date) : "Pick a date first"}</div>
                <div className="demo-times">
                  {times.map((t) => {
                  const disabled = !picked.date;
                  const on = t === picked.time;
                  return (
                    <button key={t} className="demo-time" data-on={on ? "1" : "0"} disabled={disabled} onClick={() => setPicked({ ...picked, time: t })}>
                        {t}
                      </button>);

                })}
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 10, fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>ALL TIMES IN YOUR LOCAL TZ</div>
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn--ghost" onClick={onClose}>Cancel</button>
              <button className="btn btn--primary" disabled={!picked.date || !picked.time}
            style={{ flex: 1, justifyContent: "center", opacity: picked.date && picked.time ? 1 : 0.5 }}
            onClick={() => setStep(1)}>
                Continue <Icon name="arrow-right" size={14} />
              </button>
            </div>
          </>
        }
        {step === 1 &&
        <>
            <div className="modal-step-counter">Step 2 of 2 · Your info</div>
            <h2>One more step.</h2>
            <p className="modal-sub">We'll send a confirmation and a Google Meet link to your email.</p>
            <div className="modal-step">
              <div>
                <div className="modal-label">Your name</div>
                <input className="modal-input" placeholder="Maya Vance" value={info.name} onChange={(e) => setInfo({ ...info, name: e.target.value })} />
              </div>
              <div>
                <div className="modal-label">Email</div>
                <input type="email" className="modal-input" placeholder="you@business.com" value={info.email} onChange={(e) => setInfo({ ...info, email: e.target.value })} />
              </div>
              <div>
                <div className="modal-label">Business name</div>
                <input className="modal-input" placeholder="Hilltop Coffee Roasters" value={info.biz} onChange={(e) => setInfo({ ...info, biz: e.target.value })} />
              </div>
              <div style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--ink-2)", background: "var(--bg-2)", padding: 14, borderRadius: 12 }}>
                <Icon name="calendar" size={16} color="var(--primary)" />
                <span>You're booking <b>{dateLabel(picked.date)}</b> at <b>{picked.time}</b> · 20 min on Google Meet.</span>
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn--ghost" onClick={() => setStep(0)}>Back</button>
              <button className="btn btn--primary"
            disabled={!info.name || !info.email}
            style={{ flex: 1, justifyContent: "center", opacity: info.name && info.email ? 1 : 0.5 }}
            onClick={() => setStep(2)}>
                Confirm booking <Icon name="arrow-right" size={14} />
              </button>
            </div>
          </>
        }
        {step === 2 &&
        <>
            <div className="modal-success" style={{ paddingTop: 8 }}>
              <div className="modal-success-icon"><Icon name="check" size={32} /></div>
              <h2 style={{ fontSize: 24, marginBottom: 8 }}>You're booked.</h2>
              <p className="muted" style={{ fontSize: 15 }}>We just sent <b>{info.email}</b> a calendar invite for <b>{dateLabel(picked.date)}</b> at <b>{picked.time}</b>. Talk soon.</p>
            </div>
            <div className="modal-footer">
              <button className="btn btn--primary" style={{ flex: 1, justifyContent: "center" }} onClick={onClose}>Got it</button>
            </div>
          </>
        }
      </div>
    </div>);

}

// ── Add-ons section (pricing page) ───────────────────────────────────────
function AddOnsSection({ onOpenModal }) {
  return (
    <section className="section section--bg2">
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Add-ons</div>
          <h2>Power up with <span className="display-em">add-ons.</span></h2>
          <p>Stack any of these on top of your base plan at checkout, or buy them stand-alone.</p>
        </div>
        <div className="addon-grid">
          {ADDONS.map((a) =>
          <div key={a.title} className="addon-card">
              <div className="addon-card-head">
                <h3>{a.title}</h3>
                <div className="addon-card-from">From <b>${a.from}</b>/mo</div>
              </div>
              <p className="addon-card-body">{a.body}</p>
              <ul className="addon-card-tiers">
                {a.tiers.map((t) => <li key={t}><Icon name="check" size={14} /><span>{t}</span></li>)}
              </ul>
              <button className="btn btn--ghost btn--sm" onClick={onOpenModal} style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>
                Add to plan
              </button>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Channels grid ────────────────────────────────────────────────────────
function ChannelsSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Where we post</div>
          <h2>Social channels <span className="display-em">we work with.</span></h2>
          <p>Native publishing through each platform's official business tools.</p>
        </div>
        <div className="channel-grid">
          {CHANNELS.map((c) =>
          <div key={c.name} className="channel-card">
              <div className="channel-card-icon"><Icon name={c.icon} size={26} /></div>
              <div className="channel-card-name">{c.name}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  Icon, Logo, Nav, HeroReel, Press, TrustStrip, renderHeadline,
  ValueProps, HowItWorks, VideoSection,
  ExamplesGrid, ExamplePost, IGPostModal, PostBrowser, GridGallery, PricingSection,
  AddOnsSection, ChannelsSection, Compare,
  Testimonials, FAQ, Guarantee, FinalCTA, Footer, StickyCTA, SignupModal, BookDemoModal,
  VideoExamples
});