// ============================================================
// autoclient.io — ABOUT
// ============================================================

const TEAM = [
  { name: "Monique Santos", role: "Client Success Coordinator", hue: "pink", d: "Keeps every engagement on track and clients in the loop." },
  { name: "Miguel Gaspar", role: "Design & Web Development", hue: "coral", d: "Builds the high-converting sites and brand that does real work." },
  { name: "Chase Mercer", role: "Performance Marketing Specialist", hue: "violet", d: "Runs paid acquisition tuned to revenue, not vanity metrics." },
  { name: "Axel Parra", role: "CRM & Email Marketing", hue: "purple", d: "Owns the lifecycle flows that nurture leads into booked calls." },
];

const DISCIPLINES = [
  { icon: "target", name: "Performance Media", d: "Paid acquisition across Google, Meta, and the open web." },
  { icon: "search", name: "SEO & Local SEO", d: "Organic pipeline that compounds month over month." },
  { icon: "mail", name: "CRM & Email/SMS", d: "Lifecycle flows that nurture leads into booked calls." },
  { icon: "megaphone", name: "Paid Social", d: "Creative-led campaigns tuned to revenue, not vanity." },
  { icon: "palette", name: "Design & Web", d: "High-converting sites and brand that does real work." },
  { icon: "workflow", name: "Automation & AI", d: "The follow-up and reporting grind, handled for you." },
];

function AboutHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "176px 0 96px" }}>
      <Aura color="#8784FD" size={620} top={-220} left={"24%"} opacity={0.42} drift={1} />
      <Aura color="#FF6666" size={460} top={0} right={-180} opacity={0.3} drift={2} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <span className="overline-grad fade-up">About autoclient</span>
        <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.2vw,4.6rem)", lineHeight: 1.06, letterSpacing: "-0.03em", margin: "20px 0 0", maxWidth: 980 }}>
          We help businesses scale smarter with <span className="gt" style={{ fontWeight: 300 }}>high-impact marketing &amp; automation</span>.
        </h1>
      </div>
    </section>
  );
}

function MissionBlock() {
  return (
    <section className="sec-sm">
      <div className="wrap">
        <div className="reveal" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)", padding: "2px" }}>
          <div style={{ position: "absolute", inset: 0, background: "var(--auto-gradient)", opacity: 0.9 }} />
          <div style={{ position: "relative", borderRadius: "calc(var(--radius-xl) - 2px)", background: "var(--auto-black)", padding: "64px 56px", textAlign: "center" }}>
            <Overline dot>Our belief</Overline>
            <p style={{ fontWeight: 300, fontSize: "clamp(1.8rem,3.4vw,2.8rem)", lineHeight: 1.28, letterSpacing: "-0.02em", margin: "22px auto 0", maxWidth: 820 }}>
              We believe in strategy that <span className="gt">delivers</span>, not one-size-fits-all solutions.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsRow() {
  const items = [
    { n: 28, suf: "+", l: "projects delivered" },
    { n: 44, suf: "+", l: "years combined experience" },
    { n: 6, suf: "", l: "dedicated specialists" },
  ];
  return (
    <section className="sec-sm">
      <div className="wrap-wide">
        <div className="grid-3 reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: "40px 36px", textAlign: "center" }}>
              <div className="gt" style={{ fontWeight: 400, fontSize: "clamp(3rem,5vw,4.4rem)", letterSpacing: "-0.03em" }}><CountUp to={it.n} suffix={it.suf} /></div>
              <div className="overline" style={{ marginTop: 12 }}>{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Founder + cross-disciplinary team ---------- */
function OneTeam() {
  return (
    <section className="sec on-light">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 50 }}>
          <Overline grad>The team</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 0", color: "var(--fg-on-light-1)" }}>
            One senior team. Every growth channel.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--fg-on-light-2)", margin: "18px 0 0", maxWidth: 560 }}>
            No silos, no handoffs to junior staff. The specialists who plan your strategy are the ones who run it, with AI handling the busywork so senior attention stays on your growth.
          </p>
        </div>
        <div className="on-team-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 24, alignItems: "stretch" }}>
          {/* founder card */}
          <div className="reveal" style={{ background: "#fff", border: "1px solid var(--line-on-light)", borderRadius: "var(--radius-lg)", padding: 32, boxShadow: "var(--shadow-md)" }}>
            <div style={{ position: "relative", width: "100%", paddingTop: "62%", borderRadius: "var(--radius-md)", overflow: "hidden", background: HUES.purple, marginBottom: 24 }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 120% at 70% 20%, rgba(255,255,255,0.4), transparent 50%)" }} />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 300, fontSize: 56, letterSpacing: "-0.02em" }}>AK</div>
            </div>
            <h3 style={{ fontWeight: 600, fontSize: 22, margin: "0 0 4px", color: "var(--fg-on-light-1)" }}>Alex Kelly</h3>
            <div style={{ fontSize: 14.5, fontWeight: 500, color: "var(--auto-purple)", marginBottom: 14 }}>Founder &amp; CEO</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-on-light-2)", margin: 0 }}>
              A former enterprise marketer at Fortune 500 technology and retail brands, Alex started autoclient to bring that same performance rigor to service companies and local businesses, powered by AI.
            </p>
          </div>
          {/* disciplines */}
          <div className="reveal" data-delay={80} style={{ background: "#fff", border: "1px solid var(--line-on-light)", borderRadius: "var(--radius-lg)", padding: "32px 32px 12px" }}>
            <div className="overline-dark" style={{ marginBottom: 6 }}>Everything under one plan</div>
            <div className="disc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 12 }}>
              {DISCIPLINES.map((d, i) => (
                <div key={d.name} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "18px 0", borderTop: i >= 2 ? "1px solid var(--line-on-light)" : "none" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 10, flexShrink: 0, background: "var(--auto-gradient)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 6px 16px rgba(135,132,253,.28)" }}><Icon name={d.icon} size={19} /></span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15.5, color: "var(--fg-on-light-1)" }}>{d.name}</div>
                    <div style={{ fontSize: 13.5, color: "var(--fg-on-light-2)", marginTop: 3, lineHeight: 1.45 }}>{d.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="reveal" style={{ marginTop: 64, marginBottom: 30 }}>
          <Overline grad>Meet the team</Overline>
          <h3 style={{ fontWeight: 300, fontSize: "clamp(1.6rem,2.6vw,2.2rem)", lineHeight: 1.14, letterSpacing: "-0.02em", margin: "14px 0 0", color: "var(--fg-on-light-1)" }}>
            The specialists behind your growth.
          </h3>
        </div>
        <div className="team-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {TEAM.map((m, i) => (
            <div key={m.name} className="reveal" data-delay={i * 70} style={{ background: "#fff", border: "1px solid var(--line-on-light)", borderRadius: "var(--radius-lg)", padding: 28, boxShadow: "var(--shadow-md)" }}>
              <div style={{ position: "relative", width: "100%", paddingTop: "78%", borderRadius: "var(--radius-md)", overflow: "hidden", background: HUES[m.hue], marginBottom: 20 }}>
                <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 120% at 70% 20%, rgba(255,255,255,0.4), transparent 50%)" }} />
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 300, fontSize: 48, letterSpacing: "-0.02em" }}>{initials(m.name)}</div>
              </div>
              <h4 style={{ fontWeight: 600, fontSize: 19, margin: "0 0 4px", color: "var(--fg-on-light-1)" }}>{m.name}</h4>
              <div style={{ fontSize: 14, fontWeight: 500, color: "var(--auto-purple)", marginBottom: 12 }}>{m.role}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.58, color: "var(--fg-on-light-2)", margin: 0 }}>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  useReveal();
  return (
    <main>
      <AboutHero />
      <MissionBlock />
      <StatsRow />
      <OneTeam />
      <FaqSection />
      <CtaBanner title="Let's build your growth engine." sub="Start a project or book a call. We'll bring the strategy." primary="Book a Call" />
    </main>
  );
}

Object.assign(window, { AboutPage });