// Experience.jsx — "Where I've Been" — typographic timeline, no illustrations
function Experience() {
  const stops = [
    {
      company: "PE-Backed Pet Portfolio Company",
      role: "VP of Marketing",
      dates: "2024 — Present",
      stat: "16", statCap: "person team, built from scratch",
      lead: "Built a multi-brand marketing function from nothing and ran it lean.",
      proof: [
        "Hired and led a 16-person team across a 4-brand pet-health portfolio — SaaS, employee benefits, D2C insurance, and a vet network, each with its own buyer.",
        "Launched a new D2C insurance product and kicked off a brand consolidation for product clarity.",
        "Early to AI-search optimization, so the brands show up when buyers ask ChatGPT and Claude, not just Google.",
      ],
      skills: ["Marketing org design", "Multi-brand GTM", "Growth modeling", "Brand consolidation", "Market research", "AI marketing workflows", "Generative engine optimization", "RevOps"]
    },
    {
      company: "VC-Backed Real Estate Portfolio Company",
      role: "VP of Marketing",
      dates: "2021 — 2024",
      stat: "830%", statCap: "organic traffic growth in two years",
      lead: "Inherited an expensive funnel and turned it into an efficient growth engine.",
      proof: [
        "Cut cost per lead from $1,500 to roughly $200.",
        "Managed a $6M budget across paid, lifecycle, OOH, and a 76ers sponsorship.",
        "Led the marketing integration of a West Coast acquisition and launched a parent brand — growth that fueled a $118M Series B.",
      ],
      skills: ["Full-funnel attribution", "M&A integration", "Brand launch", "7-figure paid media", "CRO", "SEO", "Lifecycle", "CRM migration", "Sponsorship marketing"]
    },
    {
      company: "Growth Agency",
      role: "Director of Marketing Strategy",
      dates: "2012 — 2021",
      stat: "9 → 50", statCap: "states scaled, on organic",
      lead: "Agency operator across wildly different industries, always chasing measurable growth.",
      proof: [
        "Built a concierge-medicine brand from nothing during COVID — seven figures today.",
        "Moved a lending client off paid and onto organic, from 9 states to all 50.",
        "Rebuilt an HVAC company's paid strategy ahead of its private-equity exit.",
      ],
      skills: ["Growth strategy", "GTM planning", "Paid search and social", "Organic growth", "Attribution", "Business consulting", "Brand launches"]
    },
  ];
  return (
    <section id="experience" className="sec" style={{ background: "var(--gm-paper-deep)" }}>
      <div className="wrap">
        <div className="sec-head" style={{ maxWidth: 760 }}>
          <Kicker>Where I've Been & The Skills I Developed</Kicker>
          <h2 className="sec-title">~15 years across agency and brand-side.</h2>
          <p className="sec-sub" style={{ maxWidth: 700 }}>
            SaaS, insurance, real estate, healthcare, HVAC, financial services, manufacturing.
            B2B, B2B2C, and D2C, often at the same time. The thread through all of it is growth
            you can measure and defend.
          </p>
        </div>

        <div style={{ marginTop: 48 }}>
          {stops.map((s, i) => (
            <div key={i} className="exp-row" style={{ display: "grid", gridTemplateColumns: "70px 1fr", marginBottom: i === stops.length - 1 ? 0 : 22 }}>
              {/* timeline rail */}
              <div className="exp-rail" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <div style={{
                  width: 48, height: 48, background: "var(--gm-ink)", color: "var(--gm-orange)",
                  border: "var(--stroke) solid var(--gm-ink)", boxShadow: "var(--shadow-block)",
                  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, zIndex: 1,
                  fontFamily: "var(--font-wide)", fontStretch: "125%", fontWeight: 800, fontSize: 20
                }}>{i + 1}</div>
                {i !== stops.length - 1 && (
                  <div style={{ flex: 1, width: 3, background: "var(--gm-ink)", opacity: .85, marginTop: 4 }}></div>
                )}
              </div>

              {/* card */}
              <div className="card exp-card" style={{ background: "#fff", padding: "26px 30px 28px" }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                  <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 27, lineHeight: 1, color: "var(--gm-ink)", margin: 0 }}>{s.company}</h3>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 15, letterSpacing: ".05em", color: "var(--gm-stone)", whiteSpace: "nowrap" }}>{s.dates}</span>
                </div>
                {/* content */}
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 17, letterSpacing: ".04em", color: "var(--gm-orange)", margin: "6px 0 0" }}>{s.role}</div>
                  <p style={{ fontSize: 16.5, lineHeight: 1.5, color: "var(--gm-ink)", fontWeight: 500, margin: "14px 0 0", maxWidth: 640 }}>{s.lead}</p>

                  <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                    {s.proof.map((p, j) => (
                      <li key={j} style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 10, alignItems: "start" }}>
                        <i className="ph-fill ph-arrow-up-right" style={{ color: "var(--gm-orange)", fontSize: 16, marginTop: 3 }}></i>
                        <span style={{ fontSize: 15, lineHeight: 1.5, color: "var(--fg-2)" }}>{p}</span>
                      </li>
                    ))}
                  </ul>

                  <div style={{ marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--border-soft)" }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 12.5, letterSpacing: ".12em", color: "var(--gm-stone)", marginBottom: 11 }}>Skills sharpened here</div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                      {s.skills.map(sk => (
                        <span key={sk} className="tag" style={{ fontSize: 11.5, fontWeight: 700, padding: "5px 10px", background: "var(--gm-paper)" }}>{sk}</span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Experience });