// marketing.jsx — Vetfluence v2
// Refined per impeccable + minimalism skills:
//  • How it works: 3 cards → numbered ruled rows
//  • What we check: 5 cards → comparison list with weight column
//  • Who it's for: scenario labels (no fake names)
//  • Pricing: dominant Pro tile + quieter side rails
//  • All em dashes purged from user copy

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

// ── Scroll reveal hook ─────────────────────────────────────
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRefM(null);
  useEffectM(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.style.transitionDelay = `${delay}ms`;
            el.classList.add("is-in");
            io.unobserve(el);
          }
        });
      },
      { rootMargin: "0px 0px -8% 0px", threshold: 0.1 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// ── Smooth scroll for nav anchors ───────────────────────────
function smoothScroll(id) {
  return (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const navH = document.querySelector(".nav")?.offsetHeight || 0;
    const top = el.getBoundingClientRect().top + window.scrollY - navH - 8;
    window.scrollTo({ top, behavior: "smooth" });
  };
}

// ── Hero ───────────────────────────────────────────────────
function Hero({ onSearch, headline = "Know before you pay." }) {
  return (
    <section className="hero">
      <div className="hero-tagline">
        <span className="dot"></span>
        Check engagement quality before you pay.
      </div>
      <h1 className="h-hero" style={{ maxWidth: 900 }}>{headline}</h1>
      <p className="hero-sub">
        Check any influencer's engagement quality in seconds.{" "}
        <span style={{ color: "var(--ink)" }}>Free.</span>
      </p>
      <SearchBlock onSearch={onSearch} />
    </section>
  );
}

// ── How it works: numbered ruled rows ──────────────────────
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Search any handle",
      body: "Enter any Instagram or TikTok username. No signup, no setup, no waiting list.",
    },
    {
      n: "02",
      title: "We read the engagement, not the follower count",
      body: "Comment quality, like velocity, audience stability, sponsored-post performance, and four other signals. Public data only.",
    },
    {
      n: "03",
      title: "You get one score and a deal recommendation",
      body: "A clear risk band, the signals that drove it, and the offer range a creator at that quality usually justifies.",
    },
  ];
  return (
    <section className="section section--tint" id="how">
      <div className="container">
        <Reveal className="sec-head-row">
          <span className="eyebrow">How it works</span>
          <h2 className="h-section">Three steps. About ten seconds.</h2>
        </Reveal>
        <div className="how-rows">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="how-row" delay={i * 80}>
              <div className="idx">{s.n}</div>
              <h3>{s.title}</h3>
              <div className="body">{s.body}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Example report (low / high toggle) ─────────────────────
function ExampleReport() {
  const [mode, setMode] = useStateM("low");
  const report = window.VF.generate(
    mode === "low" ? "staycation.sfbayarea" : "glow.aesthetics.daily",
    "instagram"
  );

  return (
    <section className="section" id="example">
      <div className="wide">
        <Reveal className="sec-head-row" style={{ marginBottom: 28 }}>
          <span className="eyebrow">The report</span>
          <h2 className="h-section">See the answer at a glance.</h2>
          <p className="sec-intro sub" style={{ maxWidth: 620 }}>
            One score. A handful of signals. A plain-English recommendation. No dashboards to learn.
          </p>
        </Reveal>

        <Reveal style={{ display: "flex", justifyContent: "center" }}>
          <div className="example-toggle">
            <button
              className={mode === "low" ? "is-active" : ""}
              onClick={() => setMode("low")}
            >
              <span className="dot" style={{ background: "var(--green)" }}></span>
              Low-risk example
            </button>
            <button
              className={mode === "high" ? "is-active" : ""}
              onClick={() => setMode("high")}
            >
              <span className="dot" style={{ background: "var(--red)" }}></span>
              High-risk example
            </button>
          </div>
        </Reveal>

        <Reveal className="browser-frame" style={{ marginTop: 8 }}>
          <div className="browser-chrome">
            <div className="browser-dots"><i></i><i></i><i></i></div>
            <div className="browser-url">
              vetfluence.com/<b>@{report.username}</b>
            </div>
            <div style={{ width: 30 }}></div>
          </div>
          <div className="mini-report">
            <ReportBody report={report} compact />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── What we check: comparison list with weights ────────────
function WhatWeCheck() {
  const items = [
    {
      title: "Engagement consistency",
      body: "Are likes and comments stable across posts, or do a few posts spike suspiciously above the rest?",
      weight: "30%",
    },
    {
      title: "Engagement velocity",
      body: "Likes that arrive over hours look natural. Likes that arrive in the first two minutes do not.",
      weight: "25%",
    },
    {
      title: "Comment quality",
      body: "Real conversations vs. one-word replies and emoji spam. We score the substance of threads, not just the count.",
      weight: "20%",
    },
    {
      title: "Audience quality",
      body: "Is the follower base stable? Did the account lose followers during the last platform cleanup?",
      weight: "15%",
    },
    {
      title: "Sponsored performance",
      body: "How paid posts perform against the organic baseline. Big drops are the most useful signal in vetting.",
      weight: "10%",
    },
  ];
  return (
    <section className="section" id="check">
      <div className="container">
        <Reveal className="sec-head-row">
          <span className="eyebrow">What we check</span>
          <h2 className="h-section">Five signals, weighted.</h2>
          <p className="sec-intro sub" style={{ maxWidth: 580 }}>
            The score is rule-based and weighted, not a black box. Here is the math, in plain English.
          </p>
        </Reveal>
        <div className="check-list">
          {items.map((it, i) => (
            <Reveal key={it.title} className="check-row" delay={i * 60}>
              <h3>{it.title}</h3>
              <div className="body">{it.body}</div>
              <div className="weight mono">{it.weight}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Who it's for: scenario cells (no fake names) ───────────
function WhoFor() {
  const cases = [
    {
      label: "Local restaurants",
      quote: "Is this food blogger's audience actually local, and big enough to fill a Tuesday night?",
    },
    {
      label: "Med spas & salons",
      quote: "A creator pitched at $800 per post. What's the fair number, and how should the deal be structured?",
    },
    {
      label: "Freelance marketers",
      quote: "I run social for ten small businesses. I need one report I can send a client before recommending anyone.",
    },
    {
      label: "Creators themselves",
      quote: "My audience is small but real. I want a clean report I can hand a brand without explaining myself.",
    },
  ];
  return (
    <section className="section section--tint" id="who">
      <div className="container">
        <Reveal className="sec-head-row">
          <span className="eyebrow">Built for</span>
          <h2 className="h-section">Small budgets. Real decisions.</h2>
        </Reveal>
        <div className="who-grid">
          {cases.map((c, i) => (
            <Reveal key={i} className="who-cell" delay={i * 60}>
              <div className="label">{c.label}</div>
              <div className="quote">"{c.quote}"</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing: dominant Pro + side rails ────────────────────
function Pricing() {
  const { CheckIcon } = window.VFIcons;
  const tiers = [
    {
      name: "Free",
      price: "$0",
      cadence: "",
      tag: "Get a feel for the tool.",
      features: [
        "Search any creator",
        "Basic engagement score",
        "5 reports per month",
        "No account required",
      ],
      cta: "Try free",
    },
    {
      name: "Pro",
      price: "$19",
      cadence: "/month",
      tag: "For owners who hire creators often.",
      features: [
        "Unlimited reports",
        "Full score breakdown and signals",
        "Deal recommendations",
        "Export to PDF",
        "Track 25 creators over time",
      ],
      cta: "Start Pro",
      filled: true,
      featured: true,
    },
    {
      name: "Business",
      price: "$49",
      cadence: "/month",
      tag: "For agencies and small teams.",
      features: [
        "Everything in Pro",
        "Track 100 creators",
        "Project labels and organization",
        "Brand deal tracking",
        "Side-by-side comparison",
        "Priority support",
      ],
      cta: "Start Business",
    },
  ];
  return (
    <section className="section" id="pricing">
      <div className="container">
        <Reveal className="sec-head-row">
          <span className="eyebrow">Pricing</span>
          <h2 className="h-section">One real tier. Two for the edges.</h2>
        </Reveal>
        <Reveal className="price-row">
          {tiers.map((t) => (
            <div className={`price-card${t.featured ? " price-card--featured" : ""}`} key={t.name}>
              {t.featured && <div className="price-badge">Most popular</div>}
              <div className="price-name">{t.name}</div>
              <div className="price-amount">{t.price}<small>{t.cadence}</small></div>
              <div className="price-tag">{t.tag}</div>
              <ul className="price-features">
                {t.features.map((f) => (
                  <li key={f}><CheckIcon size={18} stroke={2.2} /> <span>{f}</span></li>
                ))}
              </ul>
              <button className={`price-cta${t.filled ? " price-cta--filled" : ""}`}>{t.cta}</button>
            </div>
          ))}
        </Reveal>
        <div className="price-note">Cancel anytime. No contracts.</div>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────
function FAQ() {
  const { ChevronDown } = window.VFIcons;
  const [open, setOpen] = useStateM(0);
  const items = [
    {
      q: "How accurate is the risk score?",
      a: "The model weights five components: engagement consistency, velocity, comment quality, audience quality, and sponsored performance. It flags patterns that correlate with inauthentic engagement. No tool can definitively prove purchased likes, so treat the score as one strong input in your vetting process, not the final word.",
    },
    {
      q: "Which platforms do you support?",
      a: "Instagram and TikTok. We analyze public Business and Creator accounts on Instagram, and public profiles on TikTok.",
    },
    {
      q: "Do creators know I'm checking them?",
      a: "No. We use publicly available data. Creators are not notified.",
    },
    {
      q: "What if a creator looks risky?",
      a: "We recommend safer deal structures: affiliate terms, promo codes, or comped products instead of fixed fees. We never tell you to avoid a creator entirely. We help you structure a deal that matches the risk.",
    },
    {
      q: "Can I track multiple creators over time?",
      a: "Yes, on Pro and Business plans. Add creators to your watchlist and we will track their engagement metrics over time, flagging unusual changes when they happen.",
    },
  ];
  return (
    <section className="section" id="faq">
      <div className="container" style={{ maxWidth: 760 }}>
        <Reveal className="sec-head-row">
          <span className="eyebrow">FAQ</span>
          <h2 className="h-section">Common questions.</h2>
        </Reveal>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item${open === i ? " is-open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="chev"><ChevronDown size={16} stroke={2} /></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Footer CTA ─────────────────────────────────────────────
function FooterCTA({ onSearch }) {
  return (
    <section className="footer-cta">
      <div className="container">
        <Reveal>
          <h2 className="h-section">Stop guessing.<br />Start vetting.</h2>
          <p className="sec-intro sub" style={{ margin: "20px auto 40px" }}>
            Check your first creator for free. No account required.
          </p>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <SearchBlock onSearch={onSearch} includeDisclaimer={false} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Nav & footer end ───────────────────────────────────────
function Nav({ onCta }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <div className="brand">
          <span className="brand-dot"></span>
          Vetfluence
        </div>
        <nav className="nav-links">
          <a href="#how" onClick={smoothScroll("how")}>How it works</a>
          <a href="#pricing" onClick={smoothScroll("pricing")}>Pricing</a>
          <a href="#faq" onClick={smoothScroll("faq")}>FAQ</a>
        </nav>
        <button className="nav-cta" onClick={onCta}>Try it free</button>
      </div>
    </header>
  );
}

function FooterEnd() {
  return (
    <div className="footer-end">
      <div>© 2026 Vetfluence</div>
      <div className="links">
        <a href="privacy.html">Privacy</a>
        <span>Terms</span>
        <span>Contact</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  Hero, HowItWorks, ExampleReport, WhatWeCheck, WhoFor, Pricing, FAQ,
  FooterCTA, Nav, FooterEnd, Reveal,
});