/* global React */

function Visit() {
  return (
    <section id="visit-page" style={{
      maxWidth: 1280,
      margin: "0 auto",
      padding: "32px 32px 96px"
    }}>

      <header style={{ marginBottom: 32, maxWidth: 760 }}>
        <span className="dh-eyebrow">Find us</span>
        <img
          src="logo-dimis-cropped.png"
          alt="Dimi's Greek House"
          style={{
            width: "100%",
            maxWidth: 380,
            height: "auto",
            display: "block",
            margin: "16px 0 20px"
          }}
        />
        <p style={{
          fontFamily: "var(--font-body)",
          fontStyle: "italic",
          fontSize: 19,
          lineHeight: 1.55,
          color: "var(--ink-700)",
          margin: 0,
          maxWidth: 560
        }}>
        </p>
      </header>

      {/* map + details grid */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.6fr 1fr",
        gap: 32,
        alignItems: "stretch"
      }} className="dh-visit-grid">

        {/* embedded google map */}
        <div style={{
          borderRadius: 14,
          overflow: "hidden",
          border: "1px solid var(--border)",
          boxShadow: "var(--shadow-md)",
          minHeight: 460,
          background: "var(--beige-100)"
        }}>
          <iframe
            title="Map to Dimi's Greek House, Tequesta"
            src="https://maps.google.com/maps?q=157+US-1,+Tequesta,+FL+33469&t=&z=16&ie=UTF8&iwloc=&output=embed"
            style={{ width: "100%", height: "100%", minHeight: 460, border: 0, display: "block" }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen
          />
        </div>

        {/* details column */}
        <aside style={{
          display: "flex",
          flexDirection: "column",
          gap: 22,
          padding: "8px 4px"
        }}>

          {/* address */}
          <div>
            <p style={detailLabel}>Address</p>
            <p style={detailValue}>
              157 US-1<br/>
              Tequesta, FL 33469
            </p>
            <a
              href="https://maps.google.com/?q=Dimi%27s+Greek+House+Tequesta"
              target="_blank"
              rel="noopener"
              style={detailLink}
            >
              Open in Google Maps &nbsp;→
            </a>
          </div>

          {/* hours */}
          <div>
            <p style={detailLabel}>Hours</p>
            <p style={detailValue}>
              Open Tue&ndash;Sun &middot; 12 &ndash; 10 pm<br/>
              Closed Mondays
            </p>
            <p style={{ ...detailValue, fontStyle: "italic", color: "var(--ink-700)", fontSize: 14 }}>
              Happy Hour, Daily &middot; 3 &ndash; 6 pm<br/>
              Bar walk-ins welcome until close.
            </p>
          </div>

          {/* contact */}
          <div>
            <p style={detailLabel}>Contact</p>
            <p style={detailValue}>
              <a href="tel:+15615103381" style={detailLink}>(561) 510-3381</a>
              <span style={{ fontStyle: "italic", fontSize: 13, color: "var(--ink-500)", marginLeft: 8 }}>(call or text)</span><br/>
              <a href="mailto:info@dimisgreekhouse.com" style={detailLink}>info@dimisgreekhouse.com</a>
            </p>
          </div>

          {/* parking */}
          <div>
            <p style={detailLabel}>Parking</p>
            <p style={{ ...detailValue, fontStyle: "italic", color: "var(--ink-700)", fontSize: 14 }}>
              Free in Tequesta Shoppes Plaza.
            </p>
          </div>

        </aside>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .dh-visit-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

const detailLabel = {
  fontFamily: "var(--font-display)",
  fontSize: 10,
  letterSpacing: ".18em",
  textTransform: "uppercase",
  color: "var(--ink-500)",
  margin: "0 0 6px"
};
const detailValue = {
  fontFamily: "var(--font-body)",
  fontSize: 16,
  lineHeight: 1.5,
  color: "var(--olive-900)",
  margin: "0 0 6px"
};
const detailLink = {
  fontFamily: "var(--font-body)",
  fontSize: 15,
  color: "var(--olive-900)",
  textDecoration: "none",
  borderBottom: "1px solid var(--olive-900)"
};

window.Visit = Visit;