// instagram-growth.jsx — /instagram-growth landing page.
// A focused conversion page for the Instagram Growth service. Pulls from the
// same component vocabulary as the homepage and /social-media-management:
//   - .hero / .container / .kicker / .display-em
//   - .price-flat-* / .price-aside-* (re-used so the pricing card matches
//     the flat-tier presentation on /pricing)
//   - .smm-hero-grid responsive treatment

// ── IG hero — copy on the left, original "engagement" device mock on right.
// NOTE: the device mock is intentionally NOT a recreation of Instagram's UI.
// It uses a generic vertical post-card layout with our own iconography so
// the visual reads as "social engagement" without copying a third-party UI.
function IGHero({ onOpenModal, onBookDemo }) {
  const bullets = [
    "Reach more people",
    "Boost your credibility",
    "Drive more engagement",
    "Grow future sales opportunities",
  ];

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

  return (
    <section className="hero ig-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 column ─────────────────────────────────────────── */}
          <div className="smm-hero-left">
            <div className="hero-eyebrow">
              <span className="kicker">
                <span className="dot" /> Instagram Growth · Done for you
              </span>
            </div>
            <h1>
              Grow your Instagram audience with{" "}
              <span className="display-em">real, targeted followers.</span>
            </h1>
            <p className="hero-lede">
              More followers mean more visibility, more trust, and more
              opportunities for your business to thrive. Our team manually
              engages your ideal audience every day — no bots, no shortcuts.
            </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 — $129/mo <Icon name="arrow-right" size={16} />
              </button>
              <button
                className="btn btn--ghost btn--lg"
                onClick={scrollToPricing}
              >
                <Icon name="arrow-right" size={16} /> See what's included
              </button>
            </div>

            <div className="hero-trust">
              <span><strong>Trusted by 10,000+</strong> businesses</span>
              <span className="hero-trust-sep" />
              <span>Cancel anytime</span>
            </div>

            <div className="hero-channels">
              <div className="hero-channels-label">
                Social channels we work with
              </div>
              <div className="hero-channels-row">
                <span
                  className="hero-channel"
                  title="Instagram"
                  style={{
                    background:
                      "linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%)",
                  }}
                >
                  <Icon name="instagram" size={14} color="#fff" />
                </span>
                <span className="ig-channel-label">Instagram</span>
              </div>
            </div>
          </div>

          {/* ── Right column — original device-style mock ───────────── */}
          <div className="smm-hero-right">
            <IGGrowthMock />
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Hero phone mock — wraps the gradient growth image inside a phone bezel,
// with three floating metric callouts anchored around it.
function IGGrowthMock() {
  return (
    <div className="ig-mock">
      <div className="ig-mock-phone">
        <div className="ig-mock-notch" aria-hidden="true" />
        <div className="ig-mock-screen">
          <img
            src="images/hero-mock.png"
            alt="Instagram growth dashboard with new followers chart, likes, comments, and audience avatars"
            className="ig-mock-img"
          />
        </div>
      </div>

      {/* Floating metric chip — top (engagement pill) */}
      <div className="ig-callout ig-callout--pill">
        <span className="ig-callout-pill-icon">
          <Icon name="heart" size={11} color="#fff" />
        </span>
        <b>144</b>
        <span className="ig-callout-pill-icon">
          <Icon name="user" size={11} color="#fff" />
        </span>
        <b>342</b>
        <span className="ig-callout-pill-icon">
          <Icon name="comment" size={11} color="#fff" />
        </span>
        <b>27</b>
      </div>

      {/* Floating metric — left middle (stories) */}
      <div className="ig-callout ig-callout--left">
        <div className="ig-callout-label">Stories views</div>
        <div className="ig-callout-row">
          <div className="ig-callout-num">12,815</div>
          <div className="ig-callout-delta">
            <span className="ig-callout-arrow">↑</span> 52%
          </div>
        </div>
      </div>

      {/* Floating metric — right bottom (followers gained) */}
      <div className="ig-callout ig-callout--right">
        <div className="ig-callout-label">Followers gained</div>
        <div className="ig-callout-row">
          <div className="ig-callout-num">+30</div>
          <div className="ig-callout-delta">
            <span className="ig-callout-arrow">↑</span> 8.7%
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Pricing — uses the existing flat-tier card vocabulary so this matches
// the IG row on /pricing pixel-for-pixel. We bypass the tab chrome and
// render only the IG Growth tier.
function IGPricingCard({ onOpenModal }) {
  const cat = (PRICING_CATEGORIES || []).find((c) => c.id === "growth");
  if (!cat) return null;
  const tier = cat.tiers[0];

  return (
    <section className="section" id="ig-pricing">
      <div className="container">
        <div className="section-head">
          <div className="kicker"><span className="dot" /> Pricing</div>
          <h2>One simple plan. <span className="display-em">$129 a month.</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">
              <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>${tier.monthly}</b><span>/mo</span>
                </div>
                <div className="price-flat-fine">
                  {tier.posts} · Simple flat monthly pricing · Cancel anytime
                </div>
              </div>
              <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">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>
  );
}

// ── Growth Manager bio section ──────────────────────────────────────────
function IGGrowthManager() {
  const points = [
    {
      title: "Personalised targeting",
      body: "Tailored to your niche, location, and ideal-customer goals.",
    },
    {
      title: "Monthly performance reports",
      body: "Clear, human-written numbers — no vanity metrics or fluff.",
    },
    {
      title: "Direct support",
      body: "Message your Growth Manager directly, any time you need.",
    },
  ];

  return (
    <section className="section ig-manager">
      <div className="container">
        <div className="ig-manager-grid">
          {/* ── Left: portrait card ── */}
          <div className="ig-manager-card">
            <div className="ig-manager-portrait">
              <img
                src="images/growth-manager.png"
                alt="Ava — your dedicated Growth Manager"
                className="ig-manager-portrait-img"
              />
              <div className="ig-manager-portrait-badge">
                <span className="ig-manager-portrait-pulse" />
                <span>Working today</span>
              </div>
            </div>
            <div className="ig-manager-name">Your dedicated Growth Manager</div>
            <div className="ig-manager-role">
              Full-time · Monday to Friday
            </div>
          </div>

          {/* ── Right: narrative ── */}
          <div className="ig-manager-body">
            <div className="kicker">
              <span className="dot" /> Your Growth Manager
            </div>
            <h2>
              A real expert,{" "}
              <span className="display-em">personally growing your account.</span>
            </h2>
            <p>
              When you sign up, a dedicated Growth Manager is assigned to your
              account. They study your niche and manually engage with the exact
              audience you want to reach — working from our office,
              Monday&nbsp;to&nbsp;Friday, using nothing but their own hands and
              expertise.
            </p>
            <p>
              They're not running a script. They do the work of a social media
              manager you'd otherwise pay thousands a month for: targeting,
              outreach, and relationship-building that compounds into a real
              following over time.
            </p>

            <ul className="ig-manager-points">
              {points.map((p, i) => (
                <li key={i}>
                  <span className="ig-manager-points-check">
                    <Icon name="check" size={12} color="#fff" />
                  </span>
                  <div>
                    <div className="ig-manager-points-title">{p.title}</div>
                    <div className="ig-manager-points-body">{p.body}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div className="ig-manager-footnote">
              Most competitors automate this. We don't.{" "}
              <strong>That's the difference.</strong>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── How it works — 4 steps ──────────────────────────────────────────────
function IGProcess() {
  const steps = [
    {
      title: "Find your people",
      body: "Your Growth Manager identifies accounts most likely to care about your brand — filtered by niche, location, interests, and similar accounts.",
      tag: "Relevance before volume",
      vis: "target",
    },
    {
      title: "Engage, by hand",
      body: "They manually follow, like, and interact from your account. No bots, no automation, no fake follower packages.",
      tag: "Starts within 24 hours",
      vis: "engage",
    },
    {
      title: "They get notified",
      body: "Real people get a notification, visit your profile, and choose whether to follow because your account is relevant to them.",
      tag: "No invisible follower drops",
      vis: "notify",
    },
    {
      title: "Real growth",
      body: "You build a relevant audience over time, with monthly reporting, clear human support, and growth that doesn't vanish overnight.",
      tag: "First results in 2–3 days",
      vis: "growth",
    },
  ];

  return (
    <section className="section section--bg2 ig-process">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> How it works
          </div>
          <h2>
            Four steps.{" "}
            <span className="display-em">Done by humans.</span>
          </h2>
          <p>
            No black box. No mystery algorithm. Just careful targeting, manual
            engagement, and real people discovering your profile.
          </p>
        </div>

        <div className="ig-process-grid">
          {steps.map((s, i) => (
            <div key={i} className="ig-process-card">
              <div className="ig-process-step">
                <span className="ig-process-step-label">Step</span>
                <span className="ig-process-step-num">{i + 1}</span>
              </div>
              <div className="ig-process-vis">
                <IGProcessVis kind={s.vis} />
              </div>
              <div className="ig-process-title">{s.title}</div>
              <div className="ig-process-body">{s.body}</div>
              <div className="ig-process-tag">
                <Icon name="check" size={11} color="var(--primary)" />
                <span>{s.tag}</span>
              </div>
            </div>
          ))}
        </div>

        <p className="ig-process-foot">
          The same approach a great social media manager would use — delivered
          by trained humans, without hiring one yourself.
        </p>
      </div>
    </section>
  );
}

function IGProcessVis({ kind }) {
  if (kind === "target") {
    return (
      <div className="ig-vis ig-vis--target">
        <div className="ig-vis-ring ig-vis-ring--1" />
        <div className="ig-vis-ring ig-vis-ring--2" />
        <div className="ig-vis-ring ig-vis-ring--3" />
        <div className="ig-vis-dot" />
        <div className="ig-vis-pin">
          <span>@niche.fit</span>
        </div>
      </div>
    );
  }
  if (kind === "engage") {
    return (
      <div className="ig-vis ig-vis--engage">
        <div className="ig-vis-row">
          <Icon name="heart" size={12} color="var(--primary)" />
          <span>Liked</span>
          <em>@creator.bio</em>
        </div>
        <div className="ig-vis-row">
          <Icon name="user" size={12} color="var(--primary)" />
          <span>Followed</span>
          <em>@style.studio</em>
        </div>
        <div className="ig-vis-row">
          <Icon name="comment" size={12} color="var(--primary)" />
          <span>Commented</span>
          <em>@local.shop</em>
        </div>
      </div>
    );
  }
  if (kind === "notify") {
    return (
      <div className="ig-vis ig-vis--notify">
        <div className="ig-vis-notif">
          <div className="ig-vis-notif-dot" />
          <div className="ig-vis-notif-text">
            <strong>@yourbusiness</strong> liked your photo
          </div>
          <div className="ig-vis-notif-time">now</div>
        </div>
        <div className="ig-vis-notif ig-vis-notif--secondary">
          <div className="ig-vis-notif-dot" />
          <div className="ig-vis-notif-text">
            <strong>@yourbusiness</strong> started following you
          </div>
          <div className="ig-vis-notif-time">2m</div>
        </div>
      </div>
    );
  }
  // growth
  return (
    <div className="ig-vis ig-vis--growth">
      <svg viewBox="0 0 120 60" preserveAspectRatio="none" aria-hidden="true">
        <path
          d="M0 50 L20 42 L40 38 L60 28 L80 20 L100 12 L120 6"
          fill="none"
          stroke="var(--primary)"
          strokeWidth="2.5"
          strokeLinecap="round"
        />
        <path
          d="M0 50 L20 42 L40 38 L60 28 L80 20 L100 12 L120 6 L120 60 L0 60 Z"
          fill="var(--primary)"
          opacity="0.12"
        />
      </svg>
      <div className="ig-vis-growth-num">+342</div>
      <div className="ig-vis-growth-label">followers this month</div>
    </div>
  );
}

// ── The problem — 4 warning checks ──────────────────────────────────────
function IGProblem() {
  const checks = [
    {
      title: "Meet the human",
      body: "If they can't show who does the work, you may be buying a bot service.",
    },
    {
      title: "Big follower promises",
      body: "1,000+ \u201Corganic\u201D followers a month often means fake audience quality.",
    },
    {
      title: "No login required?",
      body: "If they never access Instagram, they're probably sending fake followers.",
    },
    {
      title: "Trial billing traps",
      body: "Clear refund terms are safer than vague free-trial promises.",
    },
  ];

  return (
    <section className="section ig-problem">
      <div className="container">
        <div className="section-head">
          <div className="kicker ig-kicker--warn">
            <span className="dot" /> The problem
          </div>
          <h2>
            Most Instagram growth services are{" "}
            <span className="display-em">fake followers in disguise.</span>
          </h2>
          <p>
            Most services say "real followers, no bots" while quietly selling
            fake followers that put your account at risk. Here are four checks
            we recommend before you pay anyone.
          </p>
        </div>

        <div className="ig-problem-grid">
          {checks.map((c, i) => (
            <div key={i} className="ig-problem-card">
              <div className="ig-problem-head">
                <div className="ig-problem-tag">Critical check</div>
                <div className="ig-problem-num">{i + 1}</div>
              </div>
              <div className="ig-problem-title">{c.title}</div>
              <div className="ig-problem-body">{c.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Built for brands and creators ───────────────────────────────────────
function IGAudience() {
  const cards = [
    {
      label: "Brands & Businesses",
      title: "Turn Instagram into a real customer channel.",
      bullets: [
        "Grow local, in-market followers — not strangers",
        "Authority that converts to sales and bookings",
        "Scales alongside your ads and SEO",
        "A real person who understands your brand",
      ],
      vis: "storefront",
    },
    {
      label: "Creators & Influencers",
      title: "Grow your audience while you create.",
      bullets: [
        "More reach without the grind of manual outreach",
        "Hyper-targeted to your niche and style",
        "Followers who actually watch and engage",
        "Bigger audience means better brand deals",
      ],
      vis: "creator",
    },
  ];

  return (
    <section className="section section--bg2 ig-audience">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Who it's for
          </div>
          <h2>
            Built for brands{" "}
            <span className="display-em">and creators.</span>
          </h2>
        </div>

        <div className="ig-audience-grid">
          {cards.map((c, i) => (
            <div key={i} className="ig-audience-card">
              <div className="ig-audience-vis">
                <IGAudienceVis kind={c.vis} />
              </div>
              <div className="ig-audience-tag">{c.label}</div>
              <div className="ig-audience-title">{c.title}</div>
              <ul className="ig-audience-list">
                {c.bullets.map((b, j) => (
                  <li key={j}>
                    <span className="ig-audience-check">
                      <Icon name="check" size={11} color="#fff" />
                    </span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IGAudienceVis({ kind }) {
  if (kind === "storefront") {
    return (
      <div className="ig-aud-vis ig-aud-vis--brands">
        <img
          src="images/audience-brands.png"
          alt="A small-business owner growing their brand on Instagram"
          className="ig-aud-vis-img"
        />
      </div>
    );
  }
  // creator
  return (
    <div className="ig-aud-vis ig-aud-vis--creator">
      <img
        src="images/audience-creators.png"
        alt="A content creator filming a video for social media"
        className="ig-aud-vis-img"
      />
    </div>
  );
}

// ── Geo targeting / closer ──────────────────────────────────────────────
function IGGeo() {
  return (
    <section className="section ig-geo">
      <div className="container">
        <div className="ig-geo-card">
          <div className="ig-geo-body">
            <div className="kicker">
              <span className="dot" /> Anywhere on the map
            </div>
            <h2>
              Grow in your city, nationwide,{" "}
              <span className="display-em">or globally. You decide.</span>
            </h2>
            <p>
              Your Growth Manager engages with people who match your audience —
              whether that means a specific city, a national market, or a global
              niche. The goal is simple: <strong>followers who are genuinely
              relevant to your brand</strong>.
            </p>
            <p>
              Particularly valuable for local businesses, service providers,
              creators, and brands that need audience quality — not just follower
              count.
            </p>
            <div className="ig-geo-pills">
              <span><Icon name="map" size={11} /> Hyper-local</span>
              <span><Icon name="map" size={11} /> National</span>
              <span><Icon name="map" size={11} /> Global niche</span>
            </div>
          </div>
          <div className="ig-geo-vis" aria-hidden="true">
            <div className="ig-geo-globe">
              <div className="ig-geo-grid-h" />
              <div className="ig-geo-grid-v" />
              <div className="ig-geo-pin ig-geo-pin--1"><span /></div>
              <div className="ig-geo-pin ig-geo-pin--2"><span /></div>
              <div className="ig-geo-pin ig-geo-pin--3"><span /></div>
              <div className="ig-geo-pin ig-geo-pin--4"><span /></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── IG-specific FAQ ─────────────────────────────────────────────────────
const IG_FAQS = [
  {
    q: "Does this actually work?",
    a: "Yes — and it works because a real human is doing it. The average client gains 300–500 new, targeted followers each month, with most seeing their first noticeable growth within two to three days. Our results are covered by a 30-day money-back guarantee, so you can judge for yourself before committing.",
  },
  {
    q: "Is my Instagram account safe?",
    a: "Your account is 100% safe. Because a real person is logging in and engaging manually — never a script, never a bot — your activity looks exactly like a normal human using the app. We follow Instagram's rate limits and guidelines closely. In five years and 1,600+ clients we've never had an account suspended because of our activity.",
  },
  {
    q: "Are the followers real people?",
    a: "Yes. We don't sell, buy, or generate followers. Your Growth Manager manually engages with real accounts that match your target audience, and those real users choose to follow you back. That's why engagement sticks — these are humans who wanted to follow you in the first place.",
  },
  {
    q: "Why is there no free trial?",
    a: "A real person is doing real work on your account from day one — there's no free version of that. Instead, we only charge month to month and you can cancel at any time if you're unhappy with the growth results.",
  },
  {
    q: "How is this different from buying followers?",
    a: "Bought followers are inactive accounts, bots, or paid-to-follow users. They don't watch your stories, don't comment, don't buy, and often vanish when Instagram purges fake accounts. Our service earns you followers the slow, honest way — by getting your account in front of real people in your niche who choose to hit follow.",
  },
  {
    q: "I'm an agency — how does white-labelling work?",
    a: "Our agency programme lets you offer Instagram growth as your own service. You get volume pricing across client accounts, branded monthly reports, a dedicated agency liaison, and a private dashboard for managing all your clients in one place. Most agency partners onboard their first clients in under a week.",
  },
];

function IGFAQ({ 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 Instagram growth.</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">
            {IG_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>
  );
}

// ── How it works — 6 feature cards ──────────────────────────────────────
function IGHowItWorks() {
  const features = [
    {
      icon: "user",
      title: "Real followers",
      body: "No fake accounts or bots — just authentic, engaged followers that align with your brand.",
    },
    {
      icon: "check",
      title: "Safe & secure",
      body: "We follow Instagram's Terms of Service strictly, so your account stays secure and risk-free.",
    },
    {
      icon: "heart",
      title: "Increase engagement",
      body: "All growth is human-powered with smart targeting — never through shady tools or automation.",
    },
    {
      icon: "chart",
      title: "Consistent growth",
      body: "Steady, compounding follower gains every month — built to last well past the first 90 days.",
    },
    {
      icon: "target",
      title: "Targeted growth",
      body: "We engage the exact audience that fits your niche, location, and ideal customer profile.",
    },
    {
      icon: "pen",
      title: "Analytics & reports",
      body: "Track your follower growth with clear reporting. No hidden tactics — just real numbers that matter.",
    },
  ];

  return (
    <section className="section section--bg2 ig-how">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> How it works
          </div>
          <h2>
            How Instagram Growth Boost <span className="display-em">works.</span>
          </h2>
          <p>
            Grow organically with a dedicated manager who manually engages
            your target audience. Real people see your profile and follow
            back — driving authentic growth in 2026.
          </p>
        </div>

        <div className="ig-feature-grid">
          {features.map((f, i) => (
            <div key={i} className="ig-feature">
              <div className="ig-feature-icon">
                <Icon name={f.icon} size={18} />
              </div>
              <div className="ig-feature-title">{f.title}</div>
              <div className="ig-feature-body">{f.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Next-level section — 3 differentiator cards ─────────────────────────
function IGNextLevel({ onOpenModal, onBookDemo }) {
  const cards = [
    {
      kicker: "Smart",
      title: "Advanced optimization",
      body: "Our in-house data scientist continuously analyzes performance and fine-tunes your targeting. Smarter engagement, better results, tailored to how your audience actually behaves.",
    },
    {
      kicker: "Clarity",
      title: "Analytics & reports",
      body: "Monthly hand-crafted reports that clearly break down your campaign's performance. See what's working and where we're optimizing for even better growth.",
    },
    {
      kicker: "Human",
      title: "Handmade growth",
      body: "Our Instagram promotion is 100% manual, powered by real people on real devices. No shortcuts — just authentic engagement that drives lasting growth.",
    },
  ];

  return (
    <section className="section ig-next">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> The next level
          </div>
          <h2>
            Ready to take social to the{" "}
            <span className="display-em">next level?</span>
          </h2>
          <p>
            As a social media management agency, we're all about helping you
            save time, grow your channels, and have a positive impact on your
            brand.
          </p>
        </div>

        <div className="ig-next-grid">
          {cards.map((c, i) => (
            <div key={i} className="ig-next-card">
              <div className="ig-next-num">
                {String(i + 1).padStart(2, "0")}
              </div>
              <div className="ig-next-kicker">{c.kicker}</div>
              <div className="ig-next-title">{c.title}</div>
              <div className="ig-next-body">{c.body}</div>
            </div>
          ))}
        </div>

        <div className="section-cta-row">
          <button className="btn btn--primary btn--lg" onClick={onOpenModal}>
            Get started — $129/mo <Icon name="arrow-right" size={16} />
          </button>
          <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
            <Icon name="calendar" size={16} /> Book a free demo
          </button>
        </div>
      </div>
    </section>
  );
}

// ── Page composition ────────────────────────────────────────────────────
function InstagramGrowthPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      <IGHero onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
      <Press />
      <IGGrowthManager />
      <IGProcess />
      <IGProblem />
      <IGAudience />
      <IGGeo />
      <IGPricingCard onOpenModal={onOpenModal} />
      <Testimonials short={true} tone="bg-2" />
      <IGFAQ tone="bg" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>
  );
}

Object.assign(window, {
  IGHero,
  IGGrowthMock,
  IGGrowthManager,
  IGProcess,
  IGProblem,
  IGAudience,
  IGGeo,
  IGPricingCard,
  IGFAQ,
  InstagramGrowthPage,
});