const EXPERTISE_ITEMS = [
  {
    name: "Creative",
    tag: "Your Story, Your Impact.",
    copy: "From a single social post to a national campaign, we craft stories built around how real audiences feel and behave. Every idea gets the same strategic rigour — a LinkedIn post deserves as much thought as an OOH billboard.",
  },
  {
    name: "Strategy",
    tag: "Cultivating Inspirational Bonds with the End Consumer.",
    copy: "We shape business strategy, marketing plans, campaigns and PR around one goal: a stronger, more inspiring bond between your brand and the people it serves. Every decision maps to the outcomes that grow the relationship — and the business.",
  },
  {
    name: "Consulting",
    tag: "Our Minds for the Taking.",
    copy: "Our minds are yours for the taking. We decode consumer attention, cultural shifts and changing behaviour, then turn them into clear opportunities and practical, do-this-next roadmaps.",
  },
  {
    name: "Paid Media",
    tag: "Business Returns. Not Just Reach & Clicks.",
    copy: "We plan, create, buy, optimise and analyse paid campaigns across search, social and display. Everything is measured against real business returns — the actions that move your numbers, not vanity reach and clicks.",
  },
  {
    name: "Platform Build",
    tag: "Building Digital Platforms That Drive Impact.",
    copy: "We design and build the digital platforms your business runs on — websites, portals, e-commerce and internal tools. Each one balances visual quality, performance and measurable value, and is built to grow with you.",
  },
  {
    name: "Digital Enablement",
    tag: "Empowering Growth Through Digital Transformation.",
    copy: "We put practical technology to work — custom apps, MarTech, automation, AI, CRM and analytics. From bespoke web and mobile applications to the tools that run behind them, we build what solves a genuine problem and unlocks growth — not tech for its own sake.",
  },
];

// Official platform partnerships. Drop an official badge PNG at assets/partners/<slug>.png
// and it replaces the styled fallback automatically.
const PARTNERS = [
  { slug: "shopify", name: "Shopify Partner", note: "Design, build & scale on Shopify", img: "assets/clients/shopify-partners.png", dots: ["#95BF47"] },
  { slug: "wix", name: "Wix Partner", note: "Wix Studio — Creator partner", img: "assets/clients/wix-partner-creator.png", dots: ["#0C6EFC"] },
  { slug: "google", name: "Google Partner", note: "Google Ads & Analytics certified", img: "assets/partners/google.png", dots: ["#4285F4", "#EA4335", "#FBBC05", "#34A853"] },
  { slug: "bing", name: "Microsoft Advertising", note: "Bing / Microsoft Ads partner", img: "assets/partners/bing.png", dots: ["#F25022", "#7FBA00", "#00A4EF", "#FFB900"] },
];

function PartnerBadge({ p }) {
  const [imgOk, setImgOk] = React.useState(true);
  return (
    <div className="jmk-lift" style={{ background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: "28px 24px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, textAlign: "center", minHeight: 168 }}>
      {imgOk ? (
        <img src={p.img} alt={p.name} onError={() => setImgOk(false)} style={{ maxWidth: "78%", maxHeight: 72, objectFit: "contain" }} />
      ) : (
        <React.Fragment>
          <div style={{ display: "flex", gap: 6 }}>
            {p.dots.map((d, i) => (
              <span key={i} style={{ width: 14, height: 14, borderRadius: p.dots.length > 1 ? 3 : "50%", background: d }} />
            ))}
          </div>
          <div style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-xl)", color: "var(--ink-900)" }}>{p.name}</div>
        </React.Fragment>
      )}
      <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-500)" }}>{p.note}</div>
    </div>
  );
}

function Expertise({ bare }) {
  const { Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [activeIdx, setActiveIdx] = React.useState(null);

  return (
    <section id="our-expertise" className="jmk-stage" style={{ background: "#ffffff", padding: "clamp(80px,12vw,140px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      {!bare && (
      <Reveal from="left" distance={44}>
        <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(36px,5vw,64px)", margin: "0 0 16px", color: "var(--ink-900)" }}>
          Our Expertise
        </h2>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", maxWidth: 620, margin: "0 0 clamp(48px,8vw,72px)" }}>
          Six disciplines, one studio. Here's exactly what each one means — and what it does for you.
        </p>
      </Reveal>
      )}

      <div style={{ borderTop: "1px solid var(--color-border)" }}>
        {EXPERTISE_ITEMS.map((item, i) => (
          <Reveal key={item.name} from={isMobile ? "up" : (i % 2 === 0 ? "left" : "right")} distance={40} delay={i * 40}>
            <div
              onMouseEnter={() => setActiveIdx(i)}
              onMouseLeave={() => setActiveIdx(null)}
              style={{
                display: "grid",
                gridTemplateColumns: isMobile ? "40px 1fr" : "60px 1.1fr 1.4fr",
                alignItems: isMobile ? "baseline" : "start",
                gap: isMobile ? "8px 16px" : 32,
                padding: isMobile ? "32px 0" : "44px 0",
                borderBottom: "1px solid var(--color-border)",
                transition: "padding-left 300ms var(--ease-confident)",
                paddingLeft: activeIdx === i ? (isMobile ? 8 : 16) : 0,
              }}
            >
              <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-xs)", color: "var(--ink-300)", paddingTop: isMobile ? 0 : 12 }}>0{i + 1}</span>
              <div>
                <div style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(26px,3.4vw,44px)", color: activeIdx === i ? "var(--color-primary)" : "var(--ink-900)", transition: "color 200ms", lineHeight: 1.05 }}>
                  {item.name}
                </div>
                <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", fontStyle: "italic", color: "var(--color-secondary)", marginTop: 8 }}>
                  {item.tag}
                </div>
              </div>
              <p style={{
                fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)",
                margin: 0, gridColumn: isMobile ? "2" : "auto", marginTop: isMobile ? 12 : 0, maxWidth: 520,
              }}>
                {item.copy}
              </p>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Official platform partnerships */}
      <Reveal>
        <div style={{ marginTop: "clamp(64px,9vw,96px)" }}>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600, marginBottom: 12 }}>
            Certified &amp; Trusted Partners
          </div>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", margin: "0 0 36px", maxWidth: 560 }}>
            Officially partnered with the platforms that power modern marketing and commerce.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 20 }}>
            {PARTNERS.map((p) => (<PartnerBadge key={p.slug} p={p} />))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Expertise = Expertise;