// Hero — Coffee. Market. Purpose.
// Desktop: split layout with dominant Order CTA + status strip
// Mobile: full-bleed photo overlay (Dutch Bros pattern)

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

  return (
    <section style={{ padding: 0 }} className="hero">
      <div className="hero-grid" style={{
        display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,1fr)",
        minHeight: "calc(100vh - 96px)",
      }}>
        {/* Left — text (desktop) */}
        <div className="hero-text" style={{
          padding: "44px var(--pad-x) 40px",
          display: "flex", flexDirection: "column", justifyContent: "center", gap: 20,
        }}>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <p className="eyebrow" style={{ color: D, margin: 0 }}>
              Built in Oak Cliff for better everyday choices
            </p>
            <a href="apply.html" style={{
              background: Y, color: D,
              padding: "5px 12px", borderRadius: 999,
              fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.16em", textTransform: "uppercase",
              textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: D }} />
              Now hiring baristas →
            </a>
          </div>

          <h1 style={{ color: D, maxWidth: "8ch" }}>
            Coffee.<br/>
            Market.<br/>
            <em style={{ fontStyle: "italic", color: S }}>Purpose.</em>
          </h1>

          <p className="lede" style={{
            color: "color-mix(in oklab, " + D + " 80%, transparent)",
            maxWidth: "40ch", margin: 0,
          }}>
            Specialty coffee, weekend kitchen by Chef Frank May, and a curated market
            of better daily goods. Drop in to work, to meet, or to grab a matcha and walk.
          </p>

          {/* Primary CTA — dominant */}
          <a href="https://www.clover.com/online-ordering/everyday-works-dallas"
             target="_blank" rel="noopener"
             className="hero-primary-cta"
             style={{
               background: S, color: C,
               padding: "20px 28px", borderRadius: 12,
               textDecoration: "none",
               display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18,
               maxWidth: 520,
               boxShadow: "0 14px 36px rgba(47, 143, 107, 0.25)",
               transition: "transform 0.15s ease",
             }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ fontWeight: 700, fontSize: 18, letterSpacing: "0.005em" }}>
                Order pickup on Clover
              </span>
              <span className="mono" style={{ opacity: 0.88, fontSize: 11 }}>
                Skip the line · usually ready in 6–8 minutes
              </span>
            </div>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 34, lineHeight: 0.8 }}>→</span>
          </a>

          {/* Secondary CTAs — compact row */}
          <div className="hero-secondary-row" style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, maxWidth: 520,
          }}>
            {[
              { l: "Order delivery", s: "DoorDash · Uber Eats", h: "order.html" },
              { l: "View menu", s: "Coffee · drinks · kitchen", h: "menu.html" },
              { l: "Visit us", s: "Oak Cliff · 75208", h: "visit.html" },
            ].map(c => (
              <a key={c.l} href={c.h} style={{
                background: "transparent",
                color: D,
                border: "1px solid color-mix(in oklab, " + D + " 22%, transparent)",
                padding: "12px 14px", borderRadius: 10,
                display: "flex", flexDirection: "column", gap: 3,
                textDecoration: "none",
              }}>
                <span style={{ fontWeight: 700, fontSize: 13.5 }}>{c.l} →</span>
                <span className="mono" style={{ opacity: 0.7, fontSize: 9.5 }}>
                  {c.s}
                </span>
              </a>
            ))}
          </div>
        </div>

        {/* Right — photo (desktop background; mobile becomes the overlay) */}
        <div className="hero-photo" style={{
          minHeight: 600, overflow: "hidden", background: "var(--c-cream-deep)",
          position: "relative",
        }}>
          <img src="web/img/shop/bo9a-3778.jpg"
               alt="Barista at the espresso bar at Everyday Works in Oak Cliff"
               style={{ width: "100%", height: "100%", minHeight: 600,
                        objectFit: "cover", objectPosition: "center", display: "block" }} />

          {/* Status pill on photo — visible on both desktop + mobile */}
          <div className="hero-desktop-status-pill">
            <span className="hero-status-dot" />
            Open today · 6 AM – 4 PM
          </div>

          {/* Mobile overlay (hidden on desktop) */}
          <div className="hero-mobile-overlay">
            <div className="hero-status-pill">
              <span className="hero-status-dot" />
              Open today · 6 AM – 4 PM
            </div>

            <div className="hero-overlay-bottom">
              <a href="apply.html" className="hero-hiring-chip">
                <span className="hero-hiring-dot" />
                Now hiring baristas →
              </a>
              <h1 className="hero-overlay-h1">
                Coffee. Market.
                <br/>
                <em style={{ fontStyle: "italic", color: Y }}>Purpose.</em>
              </h1>
              <p className="hero-overlay-sub">
                Oak Cliff coffee + market. Weekend kitchen by Chef Frank May.
              </p>
              <a href="https://www.clover.com/online-ordering/everyday-works-dallas"
                 target="_blank" rel="noopener"
                 className="hero-overlay-cta">
                Order pickup on Clover →
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Status strip — desktop: horizontal 4-card; mobile: 2x2 grid */}
      <div className="hero-status-strip">
        <a href="visit.html" className="hero-status-item">
          <strong>Oak Cliff</strong>
          <span>516 S Hampton Rd</span>
        </a>
        <a href="visit.html#hours" className="hero-status-item">
          <strong>Today</strong>
          <span>6 AM – 4 PM</span>
        </a>
        <a href="order.html" className="hero-status-item">
          <strong>Delivery</strong>
          <span>DoorDash · Uber Eats · Postmates</span>
        </a>
        <a href="menu.html" className="hero-status-item">
          <strong>Menu</strong>
          <span>Coffee · drinks · weekend kitchen</span>
        </a>
      </div>
    </section>
  );
}

window.Hero = Hero;