// Area + contact + footer
function BayMap() {
  // Stylized SVG of Vourvourou bay with islets and the property marker
  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid meet" style={{display: "block"}}>
      {/* Sea */}
      <rect width="400" height="500" fill="var(--paper-2)" />
      {/* Land masses - main Sithonia coast on left */}
      <path d="M0,0 L120,0 L150,80 L130,160 L160,240 L140,320 L165,400 L150,500 L0,500 Z"
            fill="var(--paper)" stroke="var(--line)" strokeWidth="1" />
      {/* Islets */}
      <circle cx="220" cy="100" r="22" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="270" cy="160" r="14" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="240" cy="220" r="35" fill="var(--paper)" stroke="var(--line)" />
      <text x="240" y="225" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="11" fill="var(--muted)">Diaporos</text>
      <circle cx="310" cy="260" r="10" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="200" cy="300" r="9" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="250" cy="350" r="18" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="290" cy="400" r="12" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="220" cy="430" r="8" fill="var(--paper)" stroke="var(--line)" />
      <circle cx="320" cy="340" r="7" fill="var(--paper)" stroke="var(--line)" />

      {/* Property marker */}
      <circle cx="135" cy="240" r="6" fill="var(--terracotta)" />
      <circle cx="135" cy="240" r="14" fill="none" stroke="var(--terracotta)" strokeWidth="1" opacity="0.5" />
      <line x1="135" y1="240" x2="180" y2="200" stroke="var(--terracotta)" strokeWidth="1" />
      <text x="184" y="200" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="var(--terracotta)">SIMON KING</text>

      {/* Karydi beach */}
      <circle cx="155" cy="380" r="3" fill="var(--ink)" />
      <text x="162" y="384" fontFamily="Cormorant Garamond" fontSize="11" fill="var(--ink-soft)">Karydi</text>

      {/* Compass */}
      <g transform="translate(50, 60)">
        <circle r="14" fill="none" stroke="var(--line)" />
        <line x1="0" y1="-14" x2="0" y2="14" stroke="var(--ink)" strokeWidth="0.5" />
        <text y="-18" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="var(--muted)">N</text>
      </g>
    </svg>
  );
}

function Area() {
  return (
    <section id="area">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="mono" style={{color:"var(--terracotta)"}}>05 — Around the property</div>
            <h2>What's<br/>nearby.</h2>
          </div>
          <p>
            Vourvourou is the rare Greek bay where you can be in the sea in five minutes and on a forest trail in ten. Below, the places we send guests to most often.
          </p>
        </div>

        <div className="area-grid">
          <div className="area-map">
            <BayMap />
          </div>

          <div className="area-list">
            {window.SK_DATA.area.map((a, i) => (
              <div className="area-item" key={i}>
                <div className="idx">0{i + 1}</div>
                <div>
                  <div className="t">{a.t}</div>
                  <div className="n">{a.note}</div>
                </div>
                <div className="km">{a.km}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const c = window.SK_DATA.contact;
  return (
    <section className="contact" id="contact">
      <div className="shell">
        <div className="contact-grid">
          <div>
            <div className="mono" style={{color:"color-mix(in srgb, var(--paper) 60%, transparent)"}}>06 — Reach us</div>
            <h3>Write,<br/>call, or<br/>just turn up.</h3>
            <p className="lede">We pick up the phone between 8 and 9 in the morning and again at sunset. If you want to be sure of a room next August, mail us in February.</p>
          </div>

          <div className="contact-col">
            <div>
              <div className="lbl">Address</div>
              <div className="val">{c.address}<br/><span style={{opacity:0.6,fontSize:12,fontFamily:"JetBrains Mono, monospace",letterSpacing:"0.1em"}}>GPS {c.gps}</span></div>
            </div>
            <div>
              <div className="lbl">Phone</div>
              <div className="val">
                {c.phones.map(p => <a href={`tel:${p.replace(/\s/g,"")}`} key={p}>{p}</a>)}
              </div>
            </div>
            <div>
              <div className="lbl">Hours</div>
              <div className="val">{c.hours}</div>
            </div>
          </div>

          <div className="contact-col">
            <div>
              <div className="lbl">Email</div>
              <div className="val"><a href={`mailto:${c.email}`}>{c.email}</a></div>
            </div>
            <div>
              <div className="lbl">Instagram</div>
              <div className="val"><a href="https://www.instagram.com/simonking_vourvourou/">{c.instagram}</a></div>
            </div>
            <div>
              <div className="lbl">Open season</div>
              <div className="val">April – October<br/><span style={{opacity:0.6,fontSize:12}}>winter inquiries answered slowly</span></div>
            </div>
          </div>
        </div>

        <div className="footer-bar">
          <div>© 2026 Simon King · Vourvourou</div>
          <div>Family-run since 1974</div>
          <div>EN · ΕΛ</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Area, Contact, BayMap });