// About page — founder story, what "Consume with Purpose" means,
// the three pillars, press strip, photo gallery.

function FounderCard({ name, role, ig, lines, photoTag, photoSrc }) {
  return (
    <div style={{
      background: "var(--c-cream)", borderRadius: 10,
      border: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
      padding: 22, display: "flex", flexDirection: "column", gap: 16,
    }}>
      <div style={{ aspectRatio: "1/1", borderRadius: 8, overflow: "hidden",
                     background: "var(--c-cream-deep)" }}>
        <img src={photoSrc || "web/img/shop/bo9a-5794.jpg"} alt={`${name} at Everyday Works`}
             style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1.05,
                       color: "var(--c-dark-green)" }}>
          {name}
        </div>
        <div className="mono" style={{ color: "var(--c-sea-green)", marginTop: 4 }}>
          {role}
        </div>
      </div>
      <div style={{ fontSize: 14.5, lineHeight: 1.65,
                     color: "color-mix(in oklab, var(--c-charcoal) 82%, transparent)",
                     display: "flex", flexDirection: "column", gap: 10 }}>
        {lines.map((p, i) => <p key={i} style={{ margin: 0 }}>{p}</p>)}
      </div>
      <a href={`https://instagram.com/${ig.replace("@","")}`} className="mono"
         style={{ color: "var(--c-dark-green)", textDecoration: "none",
                   opacity: 0.7, marginTop: "auto" }}>
        Follow {ig} ↗
      </a>
    </div>
  );
}

function PressItem({ outlet, headline, date }) {
  return (
    <a href="#" style={{
      display: "flex", flexDirection: "column", gap: 8,
      padding: "22px 24px", textDecoration: "none",
      borderRight: "1px solid color-mix(in oklab, var(--c-cream) 22%, transparent)",
      color: "var(--c-cream)", minHeight: 160,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="mono" style={{ color: "var(--c-yellow)" }}>{outlet}</span>
        <span className="mono" style={{ opacity: 0.55 }}>{date}</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.2,
                     marginTop: "auto" }}>
        "{headline}"
      </div>
    </a>
  );
}

function GalleryTile({ caption, span = 1, src }) {
  return (
    <div style={{
      gridColumn: `span ${span}`, aspectRatio: span === 2 ? "16/9" : "1/1",
      borderRadius: 6, minHeight: 200, overflow: "hidden",
      background: "var(--c-cream-deep)",
    }}>
      <img src={src || "web/img/shop/bo9a-3778.jpg"} alt={caption}
           style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  );
}

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

  return (
    <>
      {/* Hero */}
      <section style={{ padding: "96px 0 64px" }} className="cream-deep">
        <div className="wrap">
          <p className="eyebrow" style={{ color: D }}>About</p>
          <h1 style={{ color: D, maxWidth: "12ch",
                        fontSize: "clamp(64px, 9vw, 144px)" }}>
            Built in Oak Cliff for <em style={{ fontStyle: "italic", color: S }}>better</em> everyday choices.
          </h1>
          <p className="lede" style={{
            color: "color-mix(in oklab, " + D + " 82%, transparent)",
            maxWidth: "60ch", marginTop: 28,
          }}>
            Everyday Works is a coffee shop and market built around a simple idea: every cup,
            every snack, every product you reach for is a small choice — and those choices add up.
            The shop exists to make the better choice the easy choice.
          </p>
        </div>
      </section>

      {/* Wide photo */}
      <section style={{ padding: "0 0 96px" }} className="cream-deep">
        <div className="wrap">
          <div style={{
            height: "min(60vh, 540px)", borderRadius: 10, overflow: "hidden",
            background: "var(--c-cream-deep)",
          }}>
            <img src="web/img/shop/bo9a-3778.jpg"
                 alt="The bar at Everyday Works in Oak Cliff"
                 style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </section>

      {/* Founders */}
      <section style={{ padding: "120px 0" }}>
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
            gap: 56, alignItems: "end", marginBottom: 56,
          }}>
            <div>
              <p className="eyebrow" style={{ color: D }}>The founders</p>
              <h2 style={{ color: D }}>
                Two Oak Cliff natives who'd rather <em style={{ fontStyle: "italic", color: S }}>build it</em> than buy it.
              </h2>
            </div>
            <p className="lede" style={{
              color: "color-mix(in oklab, " + D + " 80%, transparent)",
              maxWidth: "44ch",
            }}>
              Local-led, family-run. Not a franchise, not a licensee — every detail of this
              place is a choice we made and stand behind.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            <FounderCard
              name="Armando Gonzalez"
              role="Founder · Brand + Growth"
              ig="@mandospotboss"
              photoTag="Mando · at the bar"
              photoSrc="web/img/shop/bo9a-3778.jpg"
              lines={[
                "Mando grew up four blocks from the shop. He left for a corporate marketing job, missed Oak Cliff the whole time, and came back to build something his neighbors would feel like they owned.",
                "Mornings he's at the bar. Afternoons he's chasing the next vendor. Most days he's in a hat.",
              ]}
            />
            <FounderCard
              name="Melonie Mendoza"
              role="Co-founder · Operations"
              ig="@everydaybrewwithmel"
              photoTag="Mel · in the kitchen"
              photoSrc="web/img/shop/bo9a-0470.jpg"
              lines={[
                "Mel runs the floor — staff, suppliers, the food truck window, the cold case at 6 am. If something works at Everyday Works, it's because Mel built the system behind it.",
                "Born in 75208, two streets over from Mando. They've known each other since middle school.",
              ]}
            />
          </div>
        </div>
      </section>

      {/* What "Consume with Purpose" means */}
      <section className="dark">
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)",
            gap: 56, alignItems: "start",
          }}>
            <div style={{ position: "sticky", top: 120 }}>
              <p className="eyebrow">Mission</p>
              <h2 style={{ color: C, maxWidth: "10ch" }}>
                Consume <em style={{ fontStyle: "italic", color: "var(--c-yellow)" }}>with</em> Purpose.
              </h2>
              <div style={{ marginTop: 22, fontFamily: "var(--font-script)", fontSize: 28,
                             color: "var(--c-yellow)", transform: "rotate(-2deg)",
                             display: "inline-block" }}>
                — our mantra, since day one
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 28,
                           color: C, fontSize: 17, lineHeight: 1.7 }}>
              <p style={{ margin: 0 }}>
                We live by the mantra <em style={{ fontStyle: "italic", color: "var(--c-yellow)" }}>"Consume with Purpose."</em>
                {" "}We believe that every bite you take and every sip you make can be a step
                toward a healthier, more sustainable lifestyle.
              </p>
              <p style={{ margin: 0 }}>
                Everyday Works is more than a coffee shop and market — it's a movement.
                It's about saying "yes" to convenience without sacrificing quality, "yes" to
                supporting local, and "yes" to that second cup of coffee
                <span style={{ opacity: 0.7 }}> (we won't tell).</span>
              </p>
              <p style={{ margin: 0,
                           color: "color-mix(in oklab, " + C + " 85%, transparent)" }}>
                Let's consume mindfully, live joyfully, and support locally — all while
                enjoying some killer coffee.
              </p>

              {/* Three pillars in a row */}
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22,
                paddingTop: 22,
                borderTop: "1px solid color-mix(in oklab, " + C + " 22%, transparent)",
              }}>
                {[
                  { tag: "Quality", body: "Well-made coffee, real food, curated goods. No filler." },
                  { tag: "Local", body: "Oak Cliff first. Local makers, local crowd, local pride." },
                  { tag: "Mindful", body: "Better daily choices. Healthier, more intentional." },
                ].map(p => (
                  <div key={p.tag}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1,
                                   color: "var(--c-yellow)", marginBottom: 8 }}>{p.tag}.</div>
                    <div style={{ fontSize: 14, lineHeight: 1.55,
                                   color: "color-mix(in oklab, " + C + " 78%, transparent)" }}>
                      {p.body}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo gallery */}
      <section style={{ padding: "120px 0" }}>
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
            gap: 48, alignItems: "end", marginBottom: 36,
          }}>
            <div>
              <p className="eyebrow" style={{ color: D }}>Gallery</p>
              <h2 style={{ color: D, maxWidth: "14ch" }}>
                The shop, the team, the regulars.
              </h2>
            </div>
            <p style={{
              margin: 0, fontSize: 15.5, lineHeight: 1.6,
              color: "color-mix(in oklab, " + D + " 78%, transparent)",
              maxWidth: "44ch",
            }}>
              All shot in-house. Real Everyday Works, real Oak Cliff, real morning light. No
              stock photos here.
            </p>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
            gridAutoRows: "minmax(180px, auto)", gap: 12,
          }}>
            <GalleryTile caption="bar at 9am" span={2} src="web/img/shop/bo9a-3778.jpg" />
            <GalleryTile caption="market shelves" src="web/img/shop/bo9a-1819.jpg" />
            <GalleryTile caption="team outside" src="web/img/shop/bo9a-0470.jpg" />
            <GalleryTile caption="local goods" span={2} src="web/img/shop/bo9a-2099.jpg" />
            <GalleryTile caption="weekend pop-up market" src="web/img/shop/bo9a-8773.jpg" />
            <GalleryTile caption="kombucha selection" src="web/img/shop/bo9a-3334.jpg" />
            <GalleryTile caption="community moment" span={2} src="web/img/shop/bo9a-8691.jpg" />
          </div>
        </div>
      </section>

      {/* Visit CTA */}
      <section style={{ padding: "80px 0", background: "var(--c-cream-deep)" }}>
        <div className="wrap" style={{
          background: D, color: C, borderRadius: 12, padding: "48px 56px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto",
          gap: 36, alignItems: "center",
        }}>
          <div>
            <p className="eyebrow">Visit</p>
            <h2 style={{ color: C, maxWidth: "16ch" }}>
              Come see for yourself. We're at 516 S Hampton.
            </h2>
          </div>
          <a href="visit.html" className="btn btn-primary">Get directions →</a>
        </div>
      </section>
    </>
  );
}

window.AboutPage = AboutPage;