// Social — small "follow us" strip with Instagram / TikTok / Facebook.

function SocialStrip() {
  const D = "var(--c-dark-green)";
  const C = "var(--c-cream)";
  const S = "var(--c-sea-green)";
  const Y = "var(--c-yellow)";

  const links = [
    { l: "Instagram", handle: "@everydayworkscoffee", h: "https://www.instagram.com/everydayworkscoffee",
      icon: "IG", color: S },
    { l: "TikTok", handle: "@everydayworkscoffee", h: "https://www.tiktok.com/@everydayworkscoffee",
      icon: "TT", color: D },
    { l: "Facebook", handle: "@everydayworkscoffee", h: "https://www.facebook.com/everydayworkscoffee",
      icon: "FB", color: D },
  ];

  return (
    <section style={{
      padding: "72px 0", background: D, color: C,
    }}>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
        gap: 48, alignItems: "center",
      }}>
        <div>
          <p className="eyebrow" style={{ color: Y }}>Stay close</p>
          <h2 style={{ color: C, maxWidth: "14ch" }}>
            See us every day. <em style={{ fontStyle: "italic", color: Y }}>Tag us when you do.</em>
          </h2>
          <p style={{ margin: "16px 0 0", fontSize: 15, lineHeight: 1.6,
                       color: "color-mix(in oklab, " + C + " 80%, transparent)",
                       maxWidth: "44ch" }}>
            Drink shots, weekend kitchen drops, pop-up dates, run-club mornings — everything
            lands on our socials first.
          </p>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
        }}>
          {links.map(s => (
            <a key={s.l} href={s.h} target="_blank" rel="noopener" style={{
              background: "color-mix(in oklab, " + C + " 6%, transparent)",
              color: C, textDecoration: "none",
              borderRadius: 12, padding: "26px 22px 24px",
              border: "1px solid color-mix(in oklab, " + C + " 18%, transparent)",
              display: "flex", flexDirection: "column", gap: 10,
              minHeight: 160, position: "relative",
              transition: "background 0.2s ease",
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: s.color, color: C,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-wordmark)", fontSize: 14, letterSpacing: "0.02em",
              }}>{s.icon}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.05 }}>
                {s.l}
              </div>
              <div className="mono" style={{ color: Y, opacity: 0.85 }}>{s.handle}</div>
              <span style={{
                position: "absolute", right: 18, top: "50%",
                transform: "translateY(-50%)", fontSize: 28,
                fontFamily: "var(--font-display)", color: Y,
              }}>↗</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SocialStrip = SocialStrip;