// Community — Oak Cliff lives here. Events list + host-with-us CTA + IG strip.

function EventCard({ pill, day, month, title, sub, tag }) {
  return (
    <div className="card" style={{ minHeight: 240, padding: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "start" }}>
        <div style={{
          background: "var(--c-yellow)", color: "var(--c-dark-green)",
          borderRadius: 6, padding: "10px 14px", textAlign: "center", minWidth: 64,
        }}>
          <div className="mono" style={{ fontSize: 9 }}>{month}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1 }}>{day}</div>
        </div>
        <div>
          <span className="mono" style={{ color: "var(--c-sea-green)" }}>{pill}</span>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.15,
                         color: "var(--c-dark-green)", marginTop: 4 }}>{title}</div>
        </div>
      </div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55,
                   color: "color-mix(in oklab, var(--c-charcoal) 82%, transparent)" }}>
        {sub}
      </p>
      <div className="mono" style={{ color: "var(--c-dark-green)", opacity: 0.7,
                                       marginTop: "auto" }}>
        {tag}
      </div>
    </div>
  );
}

const IG_PHOTOS = {
  "bar at 9am": "web/img/shop/bo9a-3778.jpg",
  "pop-up sat": "web/img/shop/bo9a-8773.jpg",
  "frank plating": "web/img/shop/bo9a-2099.jpg",
  "matcha pour": "web/img/shop/lucky_charm_matcha.jpg",
  "kids drawing": "web/img/shop/bo9a-8691.jpg",
  "run club start": "web/img/shop/bo9a-0470.jpg",
};

function IGTile({ caption }) {
  const src = IG_PHOTOS[caption] || "web/img/shop/bo9a-3778.jpg";
  return (
    <div style={{
      aspectRatio: "1/1", borderRadius: 6, overflow: "hidden",
      background: "var(--c-cream-deep)",
    }}>
      <img src={src} alt={`${caption} at Everyday Works`}
           style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  );
}

function Community() {
  return (
    <section id="community">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)",
          gap: 56, alignItems: "end", marginBottom: 48,
        }}>
          <div>
            <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>Community</p>
            <h2 style={{ color: "var(--c-dark-green)" }}>
              Oak Cliff <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>lives</em> here.
            </h2>
          </div>
          <p className="lede" style={{
            color: "color-mix(in oklab, var(--c-dark-green) 80%, transparent)",
            maxWidth: "40ch",
          }}>
            Run clubs, vendor pop-ups, study nights, small-business meetups. The space is
            yours after hours too — host an event, partner on a market, bring the neighborhood
            in.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 48 }}>
          <EventCard pill="Run club"
                      day="18" month="May"
                      title="Hampton Run Club"
                      sub="3-mile loop from the front door. Coffee on us when you're back. 8 am."
                      tag="Sundays · Free · BYO water" />
          <EventCard pill="Pop-up market"
                      day="24" month="May"
                      title="Oak Cliff Makers Market"
                      sub="Twelve local makers on the sidewalk. Live DJ. Kid-friendly."
                      tag="Saturday · 10 am – 4 pm" />
          <EventCard pill="Study night"
                      day="29" month="May"
                      title="Quiet hours · finals week"
                      sub="Phones off, headphones on. Free refills. DCC students get 10% off snacks."
                      tag="Wed · 6 pm – close" />
        </div>

        {/* Host with us + IG strip */}
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)",
          gap: 16,
        }}>
          <div style={{
            background: "var(--c-dark-green)", color: "var(--c-cream)",
            padding: "32px 36px", borderRadius: 8,
            display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 22,
            minHeight: 280,
          }}>
            <div>
              <p className="eyebrow">Host with us</p>
              <h3 style={{ color: "var(--c-cream)", maxWidth: "16ch" }}>
                Your wellness morning, our space. Sunday — closed to the public, open to you.
              </h3>
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55,
                         color: "color-mix(in oklab, var(--c-cream) 78%, transparent)", maxWidth: "44ch" }}>
              Small-business meetups, wellness mornings, vendor pop-ups, birthday brunches. We
              do coffee + light food and let you bring the rest.
            </p>
            <a href="host.html" className="btn btn-cream" style={{ alignSelf: "flex-start" }}>
              Host an event →
            </a>
          </div>
          <div style={{
            background: "var(--c-cream-deep)", borderRadius: 8, padding: 16,
            border: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
          }}>
            <div className="mono" style={{ color: "var(--c-dark-green)", marginBottom: 12 }}>
              @everydayworkscoffee · last week
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
              {[
                "bar at 9am", "pop-up sat", "frank plating",
                "matcha pour", "kids drawing", "run club start",
              ].map(c => <IGTile key={c} caption={c} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Community = Community;