// reseller.jsx — Social Media White Label Reseller Program page
// Route: #social-media-reseller-program

const RESELLER_APPLY_URL = "https://forms.gle/qoEj31NtBDz7NnL9A";

// ── How it works ─────────────────────────────────────────────────────────
const RESELLER_HOW = [
{
  icon: "user",
  label: "01 — Manager",
  title: "One dedicated account manager",
  body:
  "When you sign up as a reseller, every one of your clients is handled by the same account manager on our side. One person, one inbox — no chasing whoever picked up the ticket last."
},
{
  icon: "edit",
  label: "02 — Pricing",
  title: "From $99 per client, per month",
  body:
  "We become your social media department at the same honest pricing we offer everyone else. Mark it up however you like — what you charge your client is between you and them."
},
{
  icon: "calendar",
  label: "03 — Cancel anytime",
  title: "Month-to-month, no lock-in",
  body:
  "Pay-as-you-go. If a client drops off after three months, you're not stuck paying for a year. Cancel any seat anytime — no exit fees, no penalty clauses."
}];


// ── What you can use the program for (4 bullets from the brief) ─────────
const RESELLER_BENEFITS = [
"Add a new recurring-revenue stream without hiring",
"Grow your agency without growing your team or your expenses",
"Land more deals with a stronger \"full-service\" pitch",
"Give clients a one-stop shop — which raises spend and retention"];


// ── Who it's for ─────────────────────────────────────────────────────────
const RESELLER_AUDIENCE = [
{ icon: "target", label: "Marketing agencies" },
{ icon: "chart", label: "SEO firms" },
{ icon: "image", label: "Web design firms" },
{ icon: "user", label: "Business consultants" },
{ icon: "instagram", label: "Social media pros" },
{ icon: "send", label: "Internet marketers" }];


// ── Stats ────────────────────────────────────────────────────────────────
const RESELLER_STATS = [
{ num: "4.7×", label: "Lower cost than hiring in-house" },
{ num: "68%", label: "More deals closed with social bundled" },
{ num: "99%", label: "Happy clients across reseller accounts" },
{ num: "90%", label: "Annual retention rate" }];


function ResellerApplyButton({ children, variant = "primary", style }) {
  const cls = "btn btn--lg " + (variant === "ghost" ? "btn--ghost" : "btn--primary");
  return (
    <a className={cls} href={RESELLER_APPLY_URL} target="_blank" rel="noopener noreferrer" style={style}>
      {children || "Apply for reseller program"} <Icon name="arrow-right" size={16} />
    </a>);

}

function ResellerPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      {/* ── Hero ─────────────────────────────────────────────────────── */}
      <section className="hero centered-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}>
              <span className="dot" /> White label reseller program
            </span>
            <h1>
              We do the work. <span className="display-em">
You take the credit.</span>
            </h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>
              Manage your clients' social media accounts behind the scenes —
              without hiring writers, designers, or schedulers. We're a fully
              white-labeled, invisible department inside your agency. Your client
              never sees our name, our emails, or our logo. You own the
              relationship; we just do the work.
            </p>
            <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 28 }}>
              <ResellerApplyButton />
              <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
                <Icon name="calendar" size={16} /> Book a demo
              </button>
            </div>
            <div className="hero-trust" style={{ justifyContent: "center", marginTop: 20 }}>
              <span><strong>Real humans</strong> — top 1% of global talent</span>
              <span className="hero-trust-sep" />
              <span>Month-to-month — cancel anytime</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── How it works ────────────────────────────────────────────── */}
      <section className="section section--bg2">
        <div className="container">
          <div className="section-head">
            <div className="kicker"><span className="dot" /> How it works</div>
            <h2>
              Resell social media services <span className="display-em">on your terms.</span>
            </h2>
            <p>
              If you're already running an agency, we can become your social-media
              department for $99/month per client. No long-term contracts, no
              setup fees, no team to hire.
            </p>
          </div>

          <div className="value-grid">
            {RESELLER_HOW.map((s) => <div key={s.title} className="value-card">
                <div className="value-card-icon"><Icon name={s.icon} size={22} /></div>
                <div className="value-card-num">{s.label}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Program benefits ────────────────────────────────────────── */}
      <section className="section">
        <div className="container">
          <div className="reseller-split">
            <div className="reseller-split-text">
              <div className="kicker" style={{ marginBottom: 22 }}>
                <span className="dot" /> Reseller program
              </div>
              <h2>
                A second revenue stream <span className="display-em">your agency already knows how to sell.</span>
              </h2>
              <p>
                Most of your clients are already asking for social media. With our
                program you can say yes — without hiring a writer, a designer, or a
                scheduler. We handle the work; you handle the relationship.
              </p>
              <ul className="reseller-bullets">
                {RESELLER_BENEFITS.map((b, i) =>
                <li key={i}>
                    <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
                    <span>{b}</span>
                  </li>
                )}
              </ul>
              <div className="hero-ctas" style={{ marginTop: 28 }}>
                <ResellerApplyButton />
              </div>
            </div>

            {/* Visual: stacked cards mocked as a white-label dashboard */}
            <div className="reseller-visual">
              <div className="reseller-dash">
                <div className="reseller-dash-bar">
                  <div className="reseller-dash-dots"><span /><span /><span /></div>
                  <div className="reseller-dash-url">social.<b>youragency</b>.com</div>
                </div>
                <div className="reseller-dash-head">
                  <div className="reseller-dash-logo">YA</div>
                  <div>
                    <div className="reseller-dash-title">Your Agency · Social</div>
                    <div className="reseller-dash-sub">12 clients · 184 posts this month</div>
                  </div>
                  <div className="reseller-dash-pill"><span className="dot" /> All systems go</div>
                </div>
                <div className="reseller-dash-rows">
                  {[
                  ["Bridgewater Cafe", "IG · FB · X", "Approved · 4 of 5"],
                  ["Atlas Dental", "IG · FB · LI", "Approved · 5 of 5"],
                  ["Northwind Realty", "IG · FB · LI · Google", "In review · 3 of 5"],
                  ["Pine & Pearl Salon", "IG · FB", "Approved · 5 of 5"]].
                  map(([name, channels, status], i) =>
                  <div key={i} className="reseller-dash-row">
                      <div className="reseller-dash-row-avatar">{name.split(" ").map((w) => w[0]).slice(0, 2).join("")}</div>
                      <div className="reseller-dash-row-meta">
                        <b>{name}</b>
                        <span>{channels}</span>
                      </div>
                      <div className="reseller-dash-row-status">{status}</div>
                    </div>
                  )}
                </div>
                <div className="reseller-dash-foot">
                  <Icon name="check" size={14} color="var(--primary)" />
                  <span>White-labeled · your branding, your domain</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Quality + White label ───────────────────────────────────── */}
      <section className="section section--bg2">
        <div className="container">
          <div className="section-head">
            <div className="kicker"><span className="dot" /> What you get</div>
            <h2>
              Quality you can put <span className="display-em">your name on.</span>
            </h2>
            <p>
              Custom images, original captions, native scheduling — and a dashboard
              that wears your brand, not ours.
            </p>
          </div>

          <div className="reseller-twoup">
            <div className="reseller-twoup-card">
              <div className="value-card-icon"><Icon name="star" size={22} /></div>
              <h3>Quality guaranteed</h3>
              <p>
                Impress your clients with high-quality social media content —
                planned, created, and published. Custom images for every channel and
                original captions (with hashtag research) written for each network.
              </p>
              <ul className="reseller-checks">
                <li><Icon name="check" size={14} color="var(--primary)" /> Custom visuals across all major channels</li>
                <li><Icon name="check" size={14} color="var(--primary)" /> Original captions &amp; hashtag research</li>
                <li><Icon name="check" size={14} color="var(--primary)" /> Native publishing — no app for clients to babysit</li>
              </ul>
            </div>
            <div className="reseller-twoup-card">
              <div className="value-card-icon"><Icon name="edit" size={22} /></div>
              <h3>White-label dashboard</h3>
              <p>
                Customize the dashboard with your brand and your domain, then share
                it with clients. They see <em>your</em> agency — no 99 Dollar Social
                logo, no co-branding, no footer credit. You and your clients can
                review, leave feedback, and approve content. We take care of all
                the changes from behind the curtain.
              </p>
              <ul className="reseller-checks">
                <li><Icon name="check" size={14} color="var(--primary)" /> Your logo, your colors, your domain</li>
                <li><Icon name="check" size={14} color="var(--primary)" /> Zero 99 Dollar Social branding visible to clients</li>
                <li><Icon name="check" size={14} color="var(--primary)" /> One-click client reviews &amp; revisions</li>
                <li><Icon name="check" size={14} color="var(--primary)" /> Unlimited edits per round</li>
              </ul>
            </div>
          </div>

          <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 40, flexWrap: "wrap" }}>
            <ResellerApplyButton />
            <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
              <Icon name="calendar" size={16} /> Book a demo
            </button>
          </div>
        </div>
      </section>

      {/* ── 100% invisible — confidentiality + relationship ownership ── */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="kicker"><span className="dot" /> 100% invisible</div>
            <h2>
              Your client never knows <span className="display-em">we exist.</span>
            </h2>
            <p>
              Every touchpoint your client sees is branded as <strong>you</strong> — the
              dashboard, the emails, the deliverables, the URL. 99 Dollar Social
              never contacts your client directly, never shows up on an invoice,
              never sends a follow-up that gives the game away. You stay the
              agency. We stay invisible.
            </p>
          </div>

          <div className="reseller-invis-grid">
            <div className="reseller-invis-card">
              <div className="value-card-icon"><Icon name="user" size={22} /></div>
              <h3>You keep the client</h3>
              <p>
                The contract is between you and your client — always. They sign
                with your agency, they pay your agency, they belong to your
                agency. We're a vendor on your side of the wall, never theirs.
              </p>
            </div>
            <div className="reseller-invis-card">
              <div className="value-card-icon"><Icon name="mail" size={22} /></div>
              <h3>We never reach out</h3>
              <p>
                Zero direct contact. Your client will never get an email, a call,
                a notification, or a survey from 99 Dollar Social. Every message
                your client receives appears to come from <em>your</em> domain and
                <em> your</em> team.
              </p>
            </div>
            <div className="reseller-invis-card">
              <div className="value-card-icon"><Icon name="edit" size={22} /></div>
              <h3>Your branding, end to end</h3>
              <p>
                Your logo, your colors, your domain on the review dashboard. No
                "powered by," no co-branding, no footer link back to us. As far as
                your client can tell, you built the whole thing in-house.
              </p>
            </div>
            <div className="reseller-invis-card">
              <div className="value-card-icon"><Icon name="dollar" size={22} /></div>
              <h3>You set the price</h3>
              <p>
                We charge you $99/mo per client. What you charge your client is
                entirely up to you — most agencies mark it up 3–5×. We never see
                your contract, your invoices, or your client's bill.
              </p>
            </div>
          </div>

          <ul className="reseller-invis-list">
            <li>
              <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
              <span><strong>Confidential</strong> Every team member on our side is trained to work on clients without exposing you are using our agency.</span>
            </li>
            <li>
              <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
              <span><strong>No 99 Dollar Social in metadata.</strong> Scheduled posts publish from your client's own social accounts — no third-party app banner, no posting-tool watermark.</span>
            </li>
            <li>
              <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
              <span><strong>You introduce the team as yours.</strong> When you talk to your client, the writer is <em>your</em> writer, the designer is <em>your</em> designer. We're staff augmentation, not a sublet.</span>
            </li>
            <li>
              <span className="hero-bullets-check"><Icon name="check" size={12} /></span>
              <span><strong>You retain the work.</strong> Every post, image, and caption belongs to you and your client. Export anything, anytime — no holdback if you ever stop reselling.</span>
            </li>
          </ul>

          <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 40, flexWrap: "wrap" }}>
            <ResellerApplyButton />
            <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
              <Icon name="calendar" size={16} /> Book a demo
            </button>
          </div>
        </div>
      </section>

      {/* ── End-to-end process + stats ──────────────────────────────── */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="kicker"><span className="dot" /> The whole process</div>
            <h2>
              We handle the <span className="display-em">entire workflow.</span>
            </h2>
            <p>
              99 Dollar Social is the leading low-cost social media management
              partner for agencies. We post highly-relevant content, grow follower
              counts, drive traffic, and bring your clients new customers.
            </p>
          </div>

          <div className="stat-grid">
            {RESELLER_STATS.map((s) =>
            <div key={s.label} className="stat-card">
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            )}
          </div>

          <div className="reseller-process">
            <div className="reseller-process-card">
              <div className="kicker"><span className="dot" /> Social media schedule</div>
              <h3>Preview the content schedule</h3>
              <p>
                Approve content, leave feedback, get changes done. Once approved,
                we publish to your client's social channels on the agreed schedule —
                always on time, no missed dates.
              </p>
            </div>
            <div className="reseller-process-card">
              <div className="kicker"><span className="dot" /> A team you can trust</div>
              <h3>The top 1% of global talent</h3>
              <p>
                A team with wide industry experience, supported by proof-readers
                and editors. Real humans creating content your clients will be
                proud to share — not AI on autopilot.
              </p>
            </div>
          </div>

          <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 40, flexWrap: "wrap" }}>
            <ResellerApplyButton />
            <button className="btn btn--ghost btn--lg" onClick={onBookDemo}>
              <Icon name="calendar" size={16} /> Schedule a call
            </button>
          </div>
        </div>
      </section>

      {/* ── Who it's for ────────────────────────────────────────────── */}
      <section className="section section--bg2">
        <div className="container">
          <div className="section-head">
            <div className="kicker"><span className="dot" /> Perfect for</div>
            <h2>
              We have resellers in <span className="display-em">almost every industry.</span>
            </h2>
            <p>The teams below are the most common — but if you serve clients, the program likely fits.</p>
          </div>
          <div className="reseller-audience">
            {RESELLER_AUDIENCE.map((a) =>
            <div key={a.label} className="reseller-audience-card">
                <div className="reseller-audience-icon"><Icon name={a.icon} size={20} /></div>
                <div className="reseller-audience-label">{a.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>);

}

Object.assign(window, { ResellerPage });