// Ecosystem — Bold "SERVICES"-style oversized header, then a horizontal-row
// services list inspired by the editorial reference (number, title, micro-meta, blurb).

const Ecosystem = () => {
  const services = [
  { num: "01", title: copyText("home.ecosystem.service1_title"), meta: ["Brand Architecture & Naming", "Competitive Positioning", "Audience Intelligence & Segmentation", "Go-To-Market Strategy", "Messaging Frameworks"], blurb: copyText("home.ecosystem.service1_blurb"), icon: "target" },
  { num: "02", title: copyText("home.ecosystem.service2_title"), meta: ["Campaign Concept & Ideation", "Content Strategy", "Copywriting & Storytelling", "Performance Creative", "Social & Digital Content"], blurb: copyText("home.ecosystem.service2_blurb"), icon: "lightbulb" },
  { num: "03", title: copyText("home.ecosystem.service3_title"), meta: ["Paid Media Strategy", "Programmatic & Display", "Search & Social Advertising", "Attribution Modeling & Optimization"], blurb: copyText("home.ecosystem.service3_blurb"), icon: "megaphone" },
  { num: "04", title: copyText("home.ecosystem.service4_title"), meta: ["Brand Identity Development", "Brand Guidelines", "UI Design Systems", "Motion Design", "Packaging & Print", "Environmental Design"], blurb: copyText("home.ecosystem.service4_blurb"), icon: "quill" },
  { num: "05", title: copyText("home.ecosystem.service5_title"), meta: ["Custom AI Marketing Tools", "Generative AI Integration", "Predictive Analytics & Modeling", "AI Workflow Automation", "LLM-Powered Content Systems"], blurb: copyText("home.ecosystem.service5_blurb"), icon: "brain" },
  { num: "06", title: copyText("home.ecosystem.service6_title"), meta: ["Strategy & UX Architecture", "Design & Front-End Development", "Product Design", "CMS Integration", "Performance Optimization & CRO"], blurb: copyText("home.ecosystem.service6_blurb"), icon: "network" },
  { num: "07", title: copyText("home.ecosystem.service7_title"), meta: ["Photo & Video Production", "Post-Production & Editing", "Studio & Remote Capability", "AI-Accelerated Content Production"], blurb: copyText("home.ecosystem.service7_blurb"), icon: "eye" },
  { num: "08", title: copyText("home.ecosystem.service8_title"), meta: ["Event Strategy & Production", "Immersive Brand Experiences", "Sponsorship Activation", "Live + Virtual Integration"], blurb: copyText("home.ecosystem.service8_blurb"), icon: "spark" }];


  return (
    <section id="services" className="r-ecosystem" style={{ background: "var(--paper)", padding: "80px 0 0" }}>
      <div className="container" style={{ position: "relative" }}>
        <div className="r-section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <SectionEyebrow index="(04)" label={copyText("home.ecosystem.eyebrow")} />
          <div className="mono" style={{ color: "var(--muted)" }}>{copyText("home.ecosystem.meta")}</div>
        </div>

        {/* Oversized headline wordmark */}
        <h2 className="display r-h2-massive" style={{
          fontSize: "clamp(40px, 6.6vw, 108px)",
          margin: 0,
          marginTop: 12,
          fontWeight: 700,
          letterSpacing: "-0.04em",
          lineHeight: 0.86,
          fontVariationSettings: '"opsz" 96'
        }}>
          {copyText("home.ecosystem.headline")}<span style={{ color: "var(--blue)" }}>.</span>
        </h2>

        <p style={{ marginTop: 24, marginBottom: 0, maxWidth: 620, fontSize: 17, lineHeight: 1.5, color: "var(--ink)", letterSpacing: "-0.005em" }}>
          {copyText("home.ecosystem.intro")}
        </p>
      </div>

      {/* Service rows */}
      <div style={{ marginTop: 56, borderTop: "1px solid var(--rule)" }}>
        {services.map((s, i) =>
        <ServiceRow key={s.num} {...s} expanded={i === 0} />
        )}
      </div>
    </section>);

};

const ServiceRow = ({ num, title, meta, blurb, expanded: defaultExpanded }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="r-service-row"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "80px 1.6fr 1.4fr",
        gap: 40,
        alignItems: "center",
        padding: "28px 32px",
        borderBottom: "1px solid var(--rule)",
        background: hover ? "var(--white)" : "transparent",
        cursor: "default",
        transition: "background .2s ease",
        maxWidth: 1480,
        margin: "0 auto"
      }}>
      
      <div className="r-service-num" style={{ position: "relative", width: 64, height: 64, display: "grid", placeItems: "center" }}>
        <svg width="64" height="64" viewBox="0 0 64 64" style={{ position: "absolute", inset: 0, overflow: "visible" }}>
          <path
            d="M 8 30 C 8 16, 22 8, 32 8 C 46 8, 56 18, 56 30 C 56 44, 44 54, 32 54 C 20 54, 6 46, 8 30 C 9 18, 22 10, 33 10 C 47 10, 56 20, 55 32"
            stroke="#0A0A0F" strokeWidth="1.75" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          
        </svg>
        <span style={{ fontFamily: "Caveat, cursive", fontSize: 30, fontWeight: 600, color: "var(--ink)", lineHeight: 1, position: "relative" }}>{num}</span>
      </div>
      <div>
        <div className="display r-service-title" style={{
          fontSize: "clamp(36px, 4.4vw, 64px)",
          lineHeight: 0.95,
          letterSpacing: "-0.025em",
          fontStyle: "italic",
          fontWeight: 500
        }}>
          {title}
        </div>
        <div className="mono" style={{ color: "var(--blue)", lineHeight: 1.6, marginTop: 16, display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0 12px" }}>
          {meta.map((m, idx) =>
          <React.Fragment key={idx}>
              {idx > 0 &&
            <span aria-hidden="true" style={{ display: "inline-block", width: 4, height: 4, borderRadius: "50%", background: "var(--blue)", opacity: 0.55, flexShrink: 0 }} />
            }
              <span>{m}</span>
            </React.Fragment>
          )}
        </div>
      </div>
      <div className="r-service-blurb" style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink)", maxWidth: 420 }}>
        {blurb}
      </div>
    </div>);

};

window.Ecosystem = Ecosystem;