// seo-blog.jsx — /seo-blog-articles landing page.
// Conversion page for SEO Blog Posts. Reuses the homepage component
// vocabulary (.hero / .container / .kicker / .display-em / .price-* / .ig-*)
// so visuals match the rest of the site.

// ── Hero ───────────────────────────────────────────────────────────────
function SeoBlogHero({ onOpenModal, onBookDemo }) {
  const bullets = [
    "Climb Google search rankings",
    "Drive consistent organic traffic",
    "Build authority in your niche",
    "Convert readers into customers",
  ];

  const scrollToPricing = () => {
    const el = document.getElementById("seo-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" /> SEO Blog Articles · Done for you
              </span>
            </div>
            <h1>
              SEO blog articles that{" "}
              <span className="display-em">boost your website rankings.</span>
            </h1>
            <p className="hero-lede">
              Boost your search rankings with SEO-optimized blog articles,
              crafted to engage readers and provide valuable content that
              actually moves your business forward.
            </p>

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

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

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

          {/* ── Right column — hero image ── */}
          <div className="smm-hero-right">
            <div className="seo-hero-art">
              <img
                src="images/seo-hero.png"
                alt="Laptop showing an SEO-optimized blog article ranking on Google"
                className="seo-hero-art-img"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

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

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

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

// ── Working Process — 4 steps ──────────────────────────────────────────
function SeoBlogProcess() {
  const steps = [
    {
      title: "Onboarding",
      body: "Complete a short questionnaire that guides our content writing and keyword research.",
    },
    {
      title: "Ideation",
      body: "Based on our research, we prepare topics and outlines for your review and approval.",
    },
    {
      title: "Writing",
      body: "Once you approve the topics, our writers craft the actual blog posts.",
    },
    {
      title: "Publish",
      body: "Finally, we send you the finalized articles — complete with images and optimized links — for your approval and publication.",
    },
  ];

  return (
    <section className="section section--bg2 ig-process">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Our working process
          </div>
          <h2>
            Four steps to{" "}
            <span className="display-em">impactful outcomes.</span>
          </h2>
          <p>
            A proven, repeatable approach — built so you can step in and out
            of the process without losing momentum.
          </p>
        </div>

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

// ── 4 Key Elements — tabbed ────────────────────────────────────────────
function SeoBlogPillars() {
  const pillars = [
    {
      label: "Valuable Content",
      title: "Create content that truly helps.",
      body: "We create long-form blog content answering Google users' questions about your products or services, helping your business appear in relevant searches.",
      icon: "pen",
    },
    {
      label: "Search Intent",
      title: "Understand the reason behind the search.",
      body: "Google constantly analyzes the purpose behind each search and shows results it believes best match the user's intent. To rank higher, you need a clear understanding of that search intent.",
      icon: "target",
    },
    {
      label: "Complete Answers",
      title: "Answer all their questions.",
      body: "To rank on Google's first page, we cover every topic and question searchers might have. We do this by researching popular subheadings, subtopics, and relevant keywords.",
      icon: "check",
    },
    {
      label: "Keyword Research",
      title: "Discover relevant topics through keyword research.",
      body: "For SEO, we follow the rule of \u201Cmeasure thrice, cut once,\u201D ensuring every strategy is backed by thorough research and reliable data for optimal results.",
      icon: "chart",
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const active = pillars[idx];

  return (
    <section className="section seo-pillars">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> The fundamentals
          </div>
          <h2>
            4 key elements of{" "}
            <span className="display-em">outstanding SEO content.</span>
          </h2>
          <p>
            Our strategists, copywriters, and SEO experts help blogs rank in
            competitive niches with adaptable, results-driven content.
          </p>
        </div>

        <div className="seo-pillars-card">
          <div className="seo-pillars-tabs" role="tablist">
            {pillars.map((p, i) => (
              <button
                key={p.label}
                className="seo-pillars-tab"
                data-on={i === idx ? "1" : "0"}
                role="tab"
                aria-selected={i === idx}
                onClick={() => setIdx(i)}
              >
                <span className="seo-pillars-tab-num">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span>{p.label}</span>
              </button>
            ))}
          </div>

          <div className="seo-pillars-body">
            <div className="seo-pillars-body-icon">
              <Icon name={active.icon} size={24} />
            </div>
            <div className="seo-pillars-body-title">{active.title}</div>
            <div className="seo-pillars-body-text">{active.body}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Importance of Blog Articles — 4 benefit cards ──────────────────────
function SeoBlogImportance() {
  const items = [
    {
      title: "Build Your Authority and Expertise",
      body: "Demonstrate deep knowledge of your industry — and become the source readers (and Google) trust.",
      icon: "user",
    },
    {
      title: "Generate More Leads Affordably",
      body: "Compounding organic content is one of the most cost-effective lead channels available.",
      icon: "target",
    },
    {
      title: "Boost Revenue, Deals, and Conversions",
      body: "Long-form content nurtures buyers along the journey, converting more readers into paying customers.",
      icon: "dollar",
    },
    {
      title: "Increase Traffic and Rankings",
      body: "Regularly adding high-quality content keeps search engines happy and coming back for more.",
      icon: "chart",
    },
  ];

  return (
    <section className="section section--bg2 seo-importance">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Why it matters
          </div>
          <h2>
            The importance of{" "}
            <span className="display-em">blog articles.</span>
          </h2>
          <p>
            Think of your website as a living, evolving presence on the
            internet. Regular high-quality content keeps it growing.
          </p>
        </div>

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

// ── Quality + Scale narrative ──────────────────────────────────────────
function SeoBlogQuality() {
  const blocks = [
    {
      kicker: "Quality",
      title: "High-quality content",
      body: "A steady stream of organic content is vital for business success. We create keyword-driven blog posts that engage readers, boost organic traffic, and help your website climb search engine rankings.",
    },
    {
      kicker: "Scale",
      title: "Growth-ready solutions",
      body: "Generic SEO strategies no longer work in today's fast-changing landscape. Our content subscriptions are customized to fit your workflow, providing only the tools you need to dominate search results — without the extras you don't.",
    },
  ];

  return (
    <section className="section seo-quality">
      <div className="container">
        <div className="seo-quality-grid">
          {blocks.map((b, i) => (
            <div key={i} className="seo-quality-card">
              <div className="seo-quality-num">
                {String(i + 1).padStart(2, "0")}
              </div>
              <div className="kicker">
                <span className="dot" /> {b.kicker}
              </div>
              <h3 className="seo-quality-title">{b.title}</h3>
              <p className="seo-quality-body">{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Industries we cover ────────────────────────────────────────────────
function SeoBlogIndustries() {
  const industries = [
    { name: "Legal",          icon: "check" },
    { name: "Entertainment",  icon: "play" },
    { name: "Education",      icon: "edit" },
    { name: "Technology",     icon: "chart" },
    { name: "Finance",        icon: "dollar" },
    { name: "Real Estate",    icon: "map" },
    { name: "Fashion",        icon: "image" },
    { name: "Religion",       icon: "star" },
    { name: "Business",       icon: "user" },
    { name: "Fitness",        icon: "heart" },
    { name: "Travel",         icon: "map" },
    { name: "Construction",   icon: "target" },
    { name: "Lifestyle",      icon: "pen" },
  ];

  return (
    <section className="section section--bg2 seo-industries">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> Industries we cover
          </div>
          <h2>
            Broad knowledge across{" "}
            <span className="display-em">every industry.</span>
          </h2>
          <p>
            Our writers specialize in a range of categories and topics,
            providing tailored content for your industry.
          </p>
        </div>

        <div className="seo-industries-grid">
          {industries.map((ind) => (
            <div key={ind.name} className="seo-industry">
              <span className="seo-industry-icon">
                <Icon name={ind.icon} size={14} />
              </span>
              <span>{ind.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Common SEO blog mistakes we fix ────────────────────────────────────
function SeoBlogMistakes() {
  const mistakes = [
    {
      title: "Not doing extensive keyword research",
      body: "Randomly creating content and thinking you'll get search traffic doesn't work if you can't do proper keyword research.",
    },
    {
      title: "Not writing content that is helpful or useful",
      body: "Most people want a one-stop-shop answer for their searches. Anything less and you'll just be a high bounce rate.",
    },
    {
      title: "Not knowing which keywords to target",
      body: "Unlike PPC, SEO is a long game with potentially huge ROIs if done properly. Unfortunately, most agencies don't know how to plan for SEO growth.",
    },
    {
      title: "Not looking at data to see what works",
      body: "A winning SEO strategy isn't only about getting free traffic. It's also about converting that traffic into leads, opportunities, and buyers.",
    },
  ];

  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>
            Common SEO blog mistakes{" "}
            <span className="display-em">we fix.</span>
          </h2>
          <p>
            Most businesses never get great results from SEO. They fail to
            identify what works because they lack the proper SEO foundation
            and system. Here are the four traps we routinely fix.
          </p>
        </div>

        <div className="ig-problem-grid">
          {mistakes.map((m, i) => (
            <div key={i} className="ig-problem-card">
              <div className="ig-problem-head">
                <div className="ig-problem-tag">Common mistake</div>
                <div className="ig-problem-num">{i + 1}</div>
              </div>
              <div className="ig-problem-title">{m.title}</div>
              <div className="ig-problem-body">{m.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── How 99dollarsocial compares ────────────────────────────────────────
function SeoBlogCompare({ onOpenModal }) {
  const cols = [
    {
      tone: "alt",
      headline: "+ $3,000/mo",
      label: "Standard SEO Agency Fee",
      cons: [
        "Long-term contracts",
        "Large upfront setup fees",
        "Too expensive to see ROI",
      ],
    },
    {
      tone: "alt",
      headline: "+ $5,000/mo",
      label: "In-house Copywriter Salary",
      cons: [
        "Cost to recruit and train",
        "Doesn't understand SEO",
        "Lower output vs. SEO agency",
      ],
    },
    {
      tone: "us",
      headline: "From $49/mo",
      label: "99 Social Fee",
      pros: [
        "Team of SEO experts & writers",
        "Proven process to drive results",
        "No setup fee or contracts",
      ],
    },
  ];

  return (
    <section className="section section--bg2 seo-compare">
      <div className="container">
        <div className="section-head">
          <div className="kicker">
            <span className="dot" /> How we compare
          </div>
          <h2>
            Produce more, rank higher,{" "}
            <span className="display-em">spend less.</span>
          </h2>
          <p>
            Hiring an in-house writer is no longer cost-effective, and most
            SEO agencies charge at least three times what we do. With 99
            Social, you produce more high-quality content that ranks — at a
            fraction of the cost.
          </p>
        </div>

        <div className="seo-compare-grid">
          {cols.map((c, i) => (
            <div
              key={i}
              className="seo-compare-col"
              data-tone={c.tone}
            >
              <div className="seo-compare-headline">{c.headline}</div>
              <div className="seo-compare-label">{c.label}</div>
              <div className="seo-compare-rule" />
              <ul className="seo-compare-list">
                {(c.cons || []).map((x, j) => (
                  <li key={j} className="seo-compare-li seo-compare-li--no">
                    <span className="seo-compare-x">
                      <Icon name="x" size={11} color="#fff" />
                    </span>
                    <span>{x}</span>
                  </li>
                ))}
                {(c.pros || []).map((x, j) => (
                  <li key={j} className="seo-compare-li seo-compare-li--yes">
                    <span className="seo-compare-check">
                      <Icon name="check" size={11} color="#fff" />
                    </span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
              {c.tone === "us" && (
                <button
                  className="btn btn--primary seo-compare-cta"
                  onClick={onOpenModal}
                >
                  Get started <Icon name="arrow-right" size={14} />
                </button>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────────
const SEO_FAQS = [
  {
    q: "What does the SEO blog article writing service offer?",
    a: "Our SEO blog writing service provides well-written, on-brand blog content that's optimized to rank highly on search engines. The content is designed to answer queries Google users have about your products or services, making your business more discoverable.",
  },
  {
    q: "How is the content optimized?",
    a: "Every article is based on thorough keyword research, tailored to fully match search intent, comprehensive in covering all relevant subtopics and subheadings, and directly helpful in answering the questions Google users pose about your products or services.",
  },
  {
    q: "How much does it cost?",
    a: "We offer three simple tiers: 500-word blogs from $49/mo, 1000-word blogs from $79/mo, and 1500-word blogs from $99/mo. All plans are month-to-month with no contracts and no setup fees.",
  },
  {
    q: "What industries do you cover?",
    a: "We cover a broad range of industries, including but not limited to Legal, Entertainment, Education, Technology, Finance, Real Estate, Fashion, Business, Fitness, Travel, Construction, and Lifestyle.",
  },
  {
    q: "How does onboarding work?",
    a: "Our process has four steps. Onboarding: you complete a short questionnaire that guides our content writing and keyword research. Ideation: we prepare topics and outlines for your review and approval. Writing: once you approve, our writers craft the actual blog posts. Publish: we send finalized articles — complete with images and optimized links — for your final approval and publication.",
  },
  {
    q: "What are some common SEO mistakes you fix?",
    a: "Many businesses lack the right SEO foundation. We help avoid pitfalls such as skipping extensive keyword research, producing content that isn't helpful, not targeting the right keywords or understanding how to do so, and neglecting to use data to refine their strategies.",
  },
  {
    q: "How does the content help my business?",
    a: "Our SEO-optimized blog content helps establish your authority in your industry, drives more organic traffic to your site, and improves your position on search engine results — leading to more leads and conversions over time.",
  },
  {
    q: "Are there any contracts?",
    a: "No. You can cancel our service at any time. We believe in the quality of our content and don't feel the need to bind clients with long-term contracts.",
  },
  {
    q: "Is this scalable to my content needs?",
    a: "Absolutely. Our content subscriptions are tailored to your specific workflow, ensuring you get exactly what you need to dominate the search results — without paying for extras you don't.",
  },
];

function SeoBlogFAQ({ tone = "bg" }) {
  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 SEO blog articles.</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">
            {SEO_FAQS.map((f, i) => (
              <div
                key={i}
                className="faq-item"
                data-open={open === i ? "1" : "0"}
              >
                <button
                  className="faq-q"
                  onClick={() => setOpen(open === i ? -1 : i)}
                >
                  <span>{f.q}</span>
                  <span className="faq-toggle">
                    <Icon name="plus" size={14} />
                  </span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Page composition ───────────────────────────────────────────────────
function SeoBlogPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      <SeoBlogHero onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
      <Press />
      <SeoBlogPricing onOpenModal={onOpenModal} />
      <SeoBlogProcess />
      <SeoBlogPillars />
      <SeoBlogImportance />
      <SeoBlogQuality />
      <SeoBlogIndustries />
      <SeoBlogMistakes />
      <SeoBlogCompare onOpenModal={onOpenModal} />
      <Testimonials short={true} tone="bg-2" />
      <SeoBlogFAQ tone="bg" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>
  );
}

Object.assign(window, {
  SeoBlogHero,
  SeoBlogPricing,
  SeoBlogProcess,
  SeoBlogPillars,
  SeoBlogImportance,
  SeoBlogQuality,
  SeoBlogIndustries,
  SeoBlogMistakes,
  SeoBlogCompare,
  SeoBlogFAQ,
  SeoBlogPage,
});