// smm.jsx — /social-media-management page.
// Mirrors the homepage composition, but replaces the standard hero with:
//   (a) a split hero where the right column is the inline Calendly embed
//   (b) a horizontally scrolling reviews marquee directly under the calendly
// Everything else is the same set of homepage sections so this page works as
// a high-intent landing surface for paid traffic.

// ── Scrolling reviews marquee ────────────────────────────────────────────
// Shows 4 review cards side-by-side on a smooth, continuous auto-scroll.
// Pulled from the TESTIMONIALS dataset (same source as the /reviews page).
function ReviewsScroller({ count = 4 }) {
  // Take the first `count` testimonials as the visible set, then duplicate
  // the list to make the marquee loop seamlessly.
  const picked = React.useMemo(
    () => (TESTIMONIALS || []).slice(0, count),
    [count]
  );
  // Duplicate so the marquee wraps cleanly.
  const loop = [...picked, ...picked, ...picked];

  return (
    <div className="smm-reviews">
      <div className="smm-reviews-head">
        <span className="smm-reviews-eyebrow">
          <span className="smm-reviews-stars">
            {Array.from({ length: 5 }, (_, k) => (
              <Icon key={k} name="star" size={12} />
            ))}
          </span>
          <span><b>4.6 / 5</b> · Verified Google reviews</span>
        </span>
        <span className="smm-reviews-rule" />
        <span className="smm-reviews-meta">What real clients say</span>
      </div>

      <div className="smm-reviews-track-wrap" aria-hidden="false">
        <div className="smm-reviews-fade smm-reviews-fade--l" aria-hidden="true" />
        <div className="smm-reviews-fade smm-reviews-fade--r" aria-hidden="true" />
        <div className="smm-reviews-track">
          {loop.map((t, i) => (
            <article className="smm-review-card" key={i}>
              <div className="smm-review-stars">
                {Array.from({ length: 5 }, (_, k) => (
                  <Icon key={k} name="star" size={13} />
                ))}
              </div>
              <p className="smm-review-quote">"{t.quote}"</p>
              <div className="smm-review-foot">
                <div className="testi-avatar" style={{ background: t.color, width: 36, height: 36, fontSize: 13 }}>
                  {t.avatar}
                </div>
                <div>
                  <div className="smm-review-name">{t.name}</div>
                  <div className="smm-review-biz">
                    <span className="smm-review-verified" aria-hidden="true">
                      <Icon name="check" size={9} color="#fff" />
                    </span>
                    {t.biz}
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

// Calendly URL for this page only — hides Calendly's event-type header
// ("Book 20-min demo · 20 min · Web conferencing details provided…") so the
// embed feels like part of the hero rather than a stranded widget.
const SMM_CALENDLY_URL =
  "https://calendly.com/99-social-demo-call/99-social-demo-call?hide_event_type_details=1&hide_gdpr_banner=1&primary_color=ff9900";

// ── Hero with embedded Calendly ──────────────────────────────────────────
function SMMHero({ onOpenModal, onBookDemo }) {
  const channels = [
    { name: "Facebook",  icon: "facebook",  color: "#1877F2" },
    { name: "Instagram", icon: "instagram", color: "#E4405F" },
    { name: "LinkedIn",  icon: "linkedin",  color: "#0A66C2" },
    { name: "Pinterest", icon: "heart",     color: "#E60023" },
    { name: "TikTok",    icon: "tiktok",    color: "#111827" },
    { name: "YouTube",   icon: "video",     color: "#FF0000" },
    { name: "Google",    icon: "google",    color: "#34A853" },
    { name: "X",         icon: "twitter",   color: "#0F172A" },
  ];

  const bullets = [
    ["Premium content", " with your branding"],
    ["80% cheaper", " than typical agencies"],
    ["Made by real people", " — not AI"],
  ];

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

  return (
    <section className="hero smm-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">
          {/* ── Left column ── */}
          <div className="smm-hero-left">
            <div className="hero-eyebrow">
              <span className="kicker"><span className="dot" /> Top 1% of global creative talent</span>
            </div>
            <h1>
              Expert social media management from{" "}
              <span className="display-em">only $99/mo</span>
            </h1>

            <ul className="smm-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[0]}</strong>{b[1]}</span>
                </li>
              ))}
            </ul>

            <div className="hero-ctas">
              <button
                className="btn btn--primary btn--lg"
                onClick={onOpenModal}
              >
                Get started <Icon name="arrow-right" size={16} />
              </button>
              <button
                className="btn btn--ghost btn--lg"
                onClick={scrollToCalendly}
              >
                <Icon name="calendar" size={16} /> Schedule a free demo call
              </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">Supported social media channels</div>
              <div className="hero-channels-row">
                {channels.map((c) => (
                  <span
                    key={c.name}
                    className="hero-channel"
                    title={c.name}
                    style={{ background: c.color }}
                  >
                    <Icon name={c.icon} size={14} color="#fff" />
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* ── Right column: Calendly window ── */}
          <div className="smm-hero-right" id="smm-calendly">
            <div className="smm-cal-window">
              <div className="smm-cal-chrome">
                <span className="smm-cal-dots" aria-hidden="true">
                  <i /><i /><i />
                </span>
                <span className="smm-cal-title">
                  <Icon name="calendar" size={13} color="var(--ink-3)" />
                  Book a 20-min demo
                </span>
                <span className="smm-cal-secure" aria-hidden="true" />
              </div>
              <div className="smm-cal-body">
                <CalendlyInline height={580} url={SMM_CALENDLY_URL} />
              </div>
            </div>
          </div>
        </div>

        {/* ── Reviews marquee, directly under the hero grid ── */}
        <ReviewsScroller count={4} />
      </div>
    </section>
  );
}

// ── Page composition ────────────────────────────────────────────────────
function SocialMediaManagementPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      <SMMHero onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
      <Press />
      <TrustStrip />
      <div id="watch-video"><VideoSection tone="bg-2" /></div>
      <div id="sample">
        <ExamplesGrid embedded={true} tone="bg" />
      </div>
      <VideoExamples tone="bg-2" />
      <ValueProps onNav={onNav} onOpenModal={onOpenModal} tone="bg-3" />
      <HowItWorks tone="bg" />
      <GridGallery onBookDemo={onBookDemo} tone="bg-2" />
      <div id="compare"><Compare onOpenModal={onOpenModal} tone="bg" /></div>
      <Testimonials tone="bg-2" />
      <PricingSection embedded={true} onOpenModal={onOpenModal} tone="bg" />
      <Guarantee tone="bg-2" onOpenModal={onOpenModal} />
      <FAQ tone="bg" />
      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>
  );
}

Object.assign(window, {
  ReviewsScroller,
  SMMHero,
  SocialMediaManagementPage,
});