// Visit — address, hours, map.

function HoursRow({ d, h, today = false }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr auto", gap: 12,
      padding: "10px 0",
      borderTop: "1px dashed color-mix(in oklab, var(--c-dark-green) 22%, transparent)",
      fontSize: 14,
      color: "var(--c-dark-green)",
      fontWeight: today ? 700 : 400,
    }}>
      <span>{d} {today && <span className="mono" style={{ color: "var(--c-sea-green)", marginLeft: 8 }}>Today</span>}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>{h}</span>
    </div>
  );
}

function Visit() {
  return (
    <section id="visit">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
          gap: 48, alignItems: "stretch",
        }}>
          {/* Left — info */}
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>Visit</p>
              <h2 style={{ color: "var(--c-dark-green)" }}>
                516 S Hampton Rd. <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>Oak Cliff.</em>
              </h2>
            </div>

            <div style={{ fontSize: 16, lineHeight: 1.7, color: "var(--c-dark-green)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3 }}>
                516 S Hampton Rd, Suite 180<br/>
                Dallas, TX 75208
              </div>
              <div style={{ marginTop: 8 }}>
                <a href="tel:+12146136074" style={{ color: "var(--c-dark-green)", textDecoration: "none",
                                                       fontFamily: "var(--font-mono)", fontSize: 13 }}>
                  214 · 613 · 6074
                </a>
              </div>
            </div>

            <div>
              <div className="mono" style={{ color: "var(--c-dark-green)", marginBottom: 6 }}>Hours</div>
              <HoursRow d="Mon – Fri" h="6:00 am – 4:00 pm" today />
              <HoursRow d="Saturday" h="7:00 am – 5:00 pm" />
              <HoursRow d="Sunday" h="8:00 am – 5:00 pm" />
              <div style={{ marginTop: 10, fontSize: 13,
                             color: "color-mix(in oklab, var(--c-dark-green) 70%, transparent)" }}>
                Weekend kitchen by Chef Frank · Sat + Sun · 10 am – 2 pm
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <a href="https://maps.google.com/?q=516+S+Hampton+Rd+Suite+180,+Dallas,+TX+75208" target="_blank" rel="noopener" className="btn btn-primary">Get directions →</a>
              <a href="#parking" className="btn btn-ghost">Parking notes</a>
            </div>
          </div>

          {/* Right — map */}
          <div style={{
            background: "var(--c-cream-deep)", borderRadius: 10, overflow: "hidden",
            border: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
            position: "relative", minHeight: 520,
          }}>
            {/* Stylized map */}
            <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"
                 style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <rect width="800" height="600" fill="var(--c-cream-deep)" />
              {/* Streets */}
              <g stroke="color-mix(in oklab, var(--c-dark-green) 22%, transparent)" strokeWidth="22" strokeLinecap="round" fill="none">
                <line x1="-20" y1="180" x2="820" y2="220" />
                <line x1="-20" y1="420" x2="820" y2="380" />
                <line x1="220" y1="-20" x2="180" y2="620" />
                <line x1="560" y1="-20" x2="600" y2="620" />
              </g>
              <g stroke="color-mix(in oklab, var(--c-dark-green) 12%, transparent)" strokeWidth="3" fill="none">
                <line x1="0" y1="300" x2="800" y2="290" />
                <line x1="400" y1="0" x2="395" y2="600" />
              </g>
              {/* Park / green block */}
              <rect x="240" y="240" width="180" height="120" rx="6"
                    fill="color-mix(in oklab, var(--c-sea-green) 30%, transparent)" />
              {/* Pin */}
              <g transform="translate(380, 250)">
                <circle r="32" fill="var(--c-sea-green)" opacity="0.18" />
                <circle r="18" fill="var(--c-dark-green)" />
                <circle cx="0" cy="-4" r="5" fill="var(--c-cream)" />
                <path d="M-8 4 L8 4 L4 14 L-4 14 Z" fill="var(--c-cream)" />
              </g>
            </svg>
            <div style={{
              position: "absolute", left: 18, top: 18,
              background: "var(--c-cream)", padding: "10px 14px", borderRadius: 6,
              border: "1px solid color-mix(in oklab, var(--c-dark-green) 14%, transparent)",
              boxShadow: "0 4px 12px rgba(31,77,58,.1)",
              fontFamily: "var(--font-mono)", fontSize: 10.5,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--c-dark-green)",
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <img src="assets/basket-mark.png" alt="" style={{ width: 20, height: 20 }} />
              Everyday Works · 75208
            </div>
            <div style={{
              position: "absolute", left: 18, bottom: 18, right: 18,
              background: "var(--c-cream)", padding: "14px 18px", borderRadius: 6,
              border: "1px solid color-mix(in oklab, var(--c-dark-green) 14%, transparent)",
              display: "grid", gridTemplateColumns: "1fr auto auto", gap: 14, alignItems: "center",
              fontSize: 13, color: "var(--c-dark-green)",
            }}>
              <span><strong>516 S Hampton Rd, Suite 180</strong> · Dallas TX 75208</span>
              <a href="https://maps.google.com/?q=516+S+Hampton+Rd+Suite+180,+Dallas,+TX+75208" target="_blank" rel="noopener" className="mono" style={{ color: "var(--c-sea-green)", textDecoration: "none" }}>Open in Maps ↗</a>
              <a href="https://maps.google.com/?q=516+S+Hampton+Rd+Suite+180,+Dallas,+TX+75208" target="_blank" rel="noopener" className="mono" style={{ color: "var(--c-sea-green)", textDecoration: "none" }}>Get directions ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Visit = Visit;