const { COPY: COPY_L } = window.AF_DATA;
const { Link: LinkL } = ReactRouterDOM;

function Location() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="McKinney, TX"
        title="Visit Us"
        italicWord="Visit"
        lead="Most projects start with a 30-minute consultation — bring your piece, or a photo, and we'll talk through options together."
      />

      {/* Address + Map */}
      <section className="py-16 md:py-24">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-5">
              <div className="border hairline bg-white p-7 md:p-9">
                <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">The Shop</div>
                <div className="font-display ink mt-3 text-[36px] md:text-[44px] leading-[1.05]" style={{ fontWeight: 500 }}>
                  Art &amp; Frame<br/>
                  <span className="text-[#A0522D]">+</span> Signs
                </div>
                <div className="mt-5 body-ink text-[16px]">
                  Downtown McKinney<br/>
                  Collin County, Texas
                </div>
                <div className="mt-2 text-[12px] font-mono text-[#807466]">{/* TODO: Confirm exact street address */}— street address tba —</div>

                <div className="mt-7 pt-6 border-t hairline space-y-3">
                  <div className="flex items-baseline gap-3">
                    <span className="font-mono text-[10px] uppercase tracking-widest text-[#807466] w-12">Call</span>
                    <a href={COPY_L.phoneHref} className="ink font-display text-[20px]" style={{ fontWeight: 500 }}>{COPY_L.phone}</a>
                  </div>
                  <div className="flex items-baseline gap-3">
                    <span className="font-mono text-[10px] uppercase tracking-widest text-[#807466] w-12">Text</span>
                    <a href={COPY_L.smsHref} className="ink font-display text-[20px]" style={{ fontWeight: 500 }}>{COPY_L.phone}</a>
                  </div>
                </div>

                <div className="mt-6 flex flex-wrap gap-3">
                  <a href="https://maps.google.com/?q=Art+%26+Frame+%2B+Signs+McKinney+TX" target="_blank" rel="noopener" className="btn-primary">
                    Get Directions
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </a>
                  <LinkL to="/book" className="btn-ghost">Book Online</LinkL>
                </div>
              </div>
            </div>
            <div className="md:col-span-7">
              <div className="border hairline overflow-hidden bg-white h-full min-h-[420px]">
                <iframe
                  title="Map of McKinney, TX"
                  src="https://www.openstreetmap.org/export/embed.html?bbox=-96.6450%2C33.1755%2C-96.5950%2C33.2155&amp;layer=mapnik&amp;marker=33.1955%2C-96.6200"
                  className="w-full h-full"
                  style={{ minHeight: 460, border: 0, filter: 'sepia(0.18) saturate(0.85)' }}
                  loading="lazy"
                ></iframe>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Hours */}
      <section className="bg-[#EFE5D0]/40 border-y hairline">
        <div className="max-w-container mx-auto px-5 md:px-8 py-16 md:py-20">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-4">
              <Eyebrow>Hours</Eyebrow>
              <h2 className="font-display ink mt-5 text-[clamp(30px,3.8vw,44px)] leading-[1.05]" style={{ fontWeight: 500 }}>
                Monday<br/>through <em style={{ fontStyle:'italic' }}>Saturday</em>.
              </h2>
            </div>
            <div className="md:col-span-8">
              <div className="border hairline bg-white">
                {[
                  { d: 'Monday',    h: 'By appointment & walk-in' },
                  { d: 'Tuesday',   h: 'By appointment & walk-in' },
                  { d: 'Wednesday', h: 'By appointment & walk-in' },
                  { d: 'Thursday',  h: 'By appointment & walk-in' },
                  { d: 'Friday',    h: 'By appointment & walk-in' },
                  { d: 'Saturday',  h: 'By appointment & walk-in' },
                  { d: 'Sunday',    h: 'Closed', closed: true },
                ].map((row, i, arr) => (
                  <div key={row.d} className={`flex items-center justify-between px-6 py-4 ${i < arr.length - 1 ? 'border-b hairline' : ''}`}>
                    <span className="font-display ink text-[19px]" style={{ fontWeight: 500 }}>{row.d}</span>
                    <span className={`text-[14px] ${row.closed ? 'text-[#807466]' : 'body-ink'}`}>{row.h}</span>
                  </div>
                ))}
              </div>
              <div className="mt-3 text-[12px] font-mono text-[#807466]">{/* TODO: Confirm specific opening / closing times with client */}— specific times tba —</div>

              <div className="mt-7">
                <ClosureNotice />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How to reach us */}
      <section className="py-20 md:py-24">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <Eyebrow>How to reach us</Eyebrow>
          <h2 className="font-display ink mt-5 text-[clamp(30px,4.2vw,48px)] leading-[1.05]" style={{ fontWeight: 500 }}>
            Four easy ways to <em className="text-[#A0522D]" style={{ fontStyle:'italic' }}>start a project</em>.
          </h2>

          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { icon: 'phone', label: 'Call',         val: COPY_L.phone,   href: COPY_L.phoneHref, note: 'Quickest answer' },
              { icon: 'text',  label: 'Text',         val: COPY_L.phone,   href: COPY_L.smsHref,   note: 'Send us a photo' },
              { icon: 'cal',   label: 'Book online',  val: 'Open calendar',href: '#/book',         note: '30-min consultation' },
              { icon: 'door',  label: 'Drop in',      val: 'Mon–Sat',      href: '#/location',     note: 'During shop hours' },
            ].map(item => (
              <a key={item.label} href={item.href} className="card-lift border hairline bg-white p-6 block">
                <div className="w-10 h-10 border hairline flex items-center justify-center mb-5">
                  {item.icon === 'phone' && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#A0522D" strokeWidth="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>}
                  {item.icon === 'text' && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#A0522D" strokeWidth="1.8"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>}
                  {item.icon === 'cal' && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#A0522D" strokeWidth="1.8"><rect x="3" y="4" width="18" height="18" rx="0"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>}
                  {item.icon === 'door' && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#A0522D" strokeWidth="1.8"><path d="M3 21h18M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16M14 12h.01"/></svg>}
                </div>
                <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">{item.label}</div>
                <div className="font-display ink mt-1 text-[22px]" style={{ fontWeight: 500 }}>{item.val}</div>
                <div className="text-[13px] text-[#807466] mt-1">{item.note}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.Location = Location;