// ============================================================
// autoclient.io — EMAIL & SMS MARKETING (new page)
// ============================================================

const EMAIL_SERVICES = [
  { icon: "mail", name: "Email Campaign Design", d: "Branded templates, A/B testing, and deliverability optimization that lands in the inbox." },
  { icon: "workflow", name: "Automated Sequences", d: "Welcome flows, re-engagement, drip campaigns, and behavior-triggered journeys." },
  { icon: "message-square", name: "SMS Marketing", d: "Direct outreach, appointment reminders, and promotional blasts that get read in minutes." },
  { icon: "database", name: "CRM Integration", d: "Connect email and SMS to your CRM for unified, end-to-end lead tracking." },
  { icon: "users", name: "List Building & Segmentation", d: "Grow and organize your audience so every message reaches the right person." },
  { icon: "bar-chart-3", name: "Performance Reporting", d: "Open rates, click-through, and conversions in one always-current analytics dashboard." },
];

const EMAIL_STEPS = [
  { t: "Audit", d: "We review your lists, deliverability, and current flows to find the fastest wins." },
  { t: "Strategy", d: "Segmentation plan, automation map, and a calendar built around your revenue goals." },
  { t: "Build", d: "Branded templates and automated sequences wired straight into your CRM." },
  { t: "Optimize", d: "Continuous A/B testing on subject lines, timing, and offers to lift every metric." },
];

const EMAIL_PLATFORMS = ["Klaviyo", "Mailchimp", "ActiveCampaign", "GoHighLevel", "HubSpot"];

const EMAIL_FAQ = [
  { q: "What email platforms do you work with?", a: "All the majors, Klaviyo, Mailchimp, ActiveCampaign, GoHighLevel, and HubSpot, plus most CRMs. We'll recommend the right tool for your stage, or work within the platform you already love." },
  { q: "How do you grow our email list?", a: "Through high-converting capture forms, lead magnets, and on-site and paid-traffic opt-ins, paired with clean segmentation so your list grows with people who actually want to hear from you." },
  { q: "Can you migrate us from our current platform?", a: "Yes. We handle the full migration, lists, templates, automations, and deliverability setup, so you move without losing data or dropping into spam folders." },
  { q: "How do you measure success?", a: "Open and click-through rates matter, but we report against revenue: pipeline influenced, bookings driven, and return on every send. You get a live dashboard from day one." },
];

/* ---------- stats band ---------- */
function EmailStats() {
  const items = [
    { n: 45, suf: "%", dec: 0, l: "average open rate" },
    { n: 3, suf: "×", dec: 0, l: "industry-average CTR" },
    { n: 10, suf: "k+", dec: 0, l: "emails sent monthly" },
  ];
  return (
    <section className="sec-sm">
      <div className="wrap">
        <div className="reveal" style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--line-on-dark)", background: "var(--bg-elevated)", padding: "52px 48px", position: "relative", overflow: "hidden" }}>
          <Aura color="#FF6666" size={380} top={-160} right={"18%"} opacity={0.26} drift={1} />
          <div className="grid-3" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
            {items.map((it, i) => (
              <div key={i} style={{ textAlign: "center", borderLeft: i ? "1px solid var(--line-on-dark)" : "none" }}>
                <div className="gt" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,4vw,3.6rem)", letterSpacing: "-0.025em" }}>
                  <CountUp to={it.n} suffix={it.suf} decimals={it.dec} />
                </div>
                <div className="overline" style={{ marginTop: 10 }}>{it.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- platform grid ---------- */
function PlatformGrid({ items = EMAIL_PLATFORMS, overline = "Platforms we master", title = "Your tools, expertly run." }) {
  return (
    <section className="sec">
      <div className="wrap" style={{ textAlign: "center" }}>
        <div className="reveal">
          <Overline grad>{overline}</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(1.9rem,3vw,2.5rem)", lineHeight: 1.14, letterSpacing: "-0.02em", margin: "16px auto 44px", maxWidth: 560 }}>{title}</h2>
        </div>
        <div className="reveal platform-row" style={{ display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "center" }}>
          {items.map((p) => (
            <div key={p} className="card" style={{ padding: "20px 30px", display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 10, height: 10, borderRadius: 99, background: "var(--auto-gradient)" }} />
              <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>{p}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- single testimonial block ---------- */
function SingleTestimonial({ t }) {
  return (
    <section className="sec">
      <div className="wrap-narrow">
        <div className="reveal card" style={{ padding: "52px 52px", position: "relative", overflow: "hidden" }}>
          <Aura color="#8784FD" size={340} bottom={-180} left={-60} opacity={0.26} drift={2} />
          <div style={{ position: "relative" }}>
            <Icon name="quote" size={34} style={{ color: "var(--auto-violet)", opacity: 0.6 }} />
            <blockquote style={{ margin: "20px 0 0", fontWeight: 300, fontSize: "clamp(1.4rem,2.4vw,1.95rem)", lineHeight: 1.4, letterSpacing: "-0.015em" }}>
              &ldquo;{t.quote}&rdquo;
            </blockquote>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 30 }}>
              <Avatar name={t.name} hue={t.hue} size={50} />
              <div>
                <div style={{ fontWeight: 600, fontSize: 15.5 }}>{t.name}</div>
                <div style={{ fontSize: 13.5, color: "var(--fg-on-dark-2)" }}>{t.role}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function EmailPage() {
  useReveal();
  const t = TESTIMONIALS.find((x) => x.name === "Alejandro C.") || TESTIMONIALS[0];
  return (
    <main>
      <PageHero
        overline="Email & SMS Marketing"
        title={'Email &amp; SMS marketing<br/>that <span class="gt" style="font-weight:300">converts.</span>'}
        sub="Reach your audience directly in their inbox and on their phone. Automated sequences, personalized campaigns, and measurable results."
        primary="Start Your Email Campaign"
      />
      <EmailStats />
      <TypeGrid overline="What we do" title="Everything your lifecycle needs." cards={EMAIL_SERVICES} cols={3} />
      <PlatformGrid />
      <ProcessTimeline steps={EMAIL_STEPS} title="From audit to optimized, in weeks." />
      <SingleTestimonial t={t} />
      <FaqSection items={EMAIL_FAQ} />
      <CtaBanner title="Start your email campaign." sub="We'll audit your current setup and send back a lifecycle plan, free." primary="Start Your Email Campaign" secondary="Book a Call" />
    </main>
  );
}

Object.assign(window, { EmailPage, PlatformGrid, SingleTestimonial });