// Finding Us — editorial map section.
// Left: travel-times list + postcode card. Right: Google Maps embed in a deep frame.
const FindingUs = () => {
  // TA23 0SB · Slowley Farm, Luxborough, Watchet, Somerset
  const mapsEmbedSrc =
    'https://www.google.com/maps?q=Slowley+Farm,+Luxborough,+Watchet,+Somerset,+TA23+0SB&output=embed';
  const directionsHref =
    'https://www.google.com/maps/dir/?api=1&destination=Slowley+Farm,+Luxborough,+Watchet,+Somerset,+TA23+0SB';

  const travel = [
    { from: 'Tiverton Parkway',  by: 'by car',   t: '40 min' },
    { from: 'Taunton',           by: 'by car',   t: '55 min' },
    { from: 'Exeter',            by: 'by car',   t: '1 hr'   },
    { from: 'Bristol',           by: 'by car',   t: '1 hr 50' },
    { from: 'London (Paddington)', by: 'by train + car', t: '3 hr 30' },
  ];

  const landmarks = [
    'Dunster Castle — 15 min',
    'Watchet harbour — 20 min',
    'Porlock Weir — 30 min',
    'Tarr Steps — 25 min',
    'Dunkery Beacon — 25 min',
  ];

  return (
    <section id="finding-us" style={{
      padding: '120px 56px',
      background: 'var(--bg)',
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>

        {/* Header */}
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--sage-deep)' }}>Finding us</div>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>
            A narrow lane, a five-bar gate, the farm.
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>
            We're tucked into a quiet fold of the Brendon Hills, on the eastern edge of Exmoor.
            The lane up is single-track but tarmac all the way; once you turn off the B3224
            you're three minutes from the gate.
          </p>
        </div>

        {/* Two-column layout */}
        <div className="slf-finding-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 56,
          alignItems: 'stretch',
        }}>

          {/* === LEFT: address + travel times === */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>

            {/* Address card */}
            <div style={{
              background: 'var(--bg-2)',
              border: '1px solid var(--border)',
              borderRadius: 12,
              padding: '28px 30px',
              boxShadow: 'var(--shadow-1)',
            }}>
              <div className="eyebrow" style={{ color: 'var(--sage-deep)', marginBottom: 12 }}>The address</div>
              <div style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 22, lineHeight: 1.5,
                color: 'var(--fg)',
              }}>
                Slowley Farm<br/>
                Luxborough<br/>
                Watchet<br/>
                Somerset<br/>
                <span style={{ fontWeight: 600, letterSpacing: '0.04em' }}>TA23 0SB</span>
              </div>
              <a href={directionsHref} target="_blank" rel="noopener noreferrer"
                className="slf-btn slf-btn-sage"
                style={{ marginTop: 20, textDecoration: 'none' }}>
                Open in Google Maps →
              </a>
            </div>

            {/* Travel times */}
            <div>
              <div className="eyebrow" style={{ color: 'var(--sage-deep)', marginBottom: 16 }}>How long it takes</div>
              <ul className="slf-finding-travel" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {travel.map((row, i) => (
                  <li key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '1fr auto',
                    alignItems: 'baseline',
                    gap: 16,
                    padding: '14px 0',
                    borderBottom: i < travel.length - 1 ? '1px dashed var(--border)' : 'none',
                  }}>
                    <span>
                      <span style={{
                        fontFamily: 'var(--font-serif)', fontSize: 18,
                        color: 'var(--fg)',
                      }}>{row.from}</span>
                      <span style={{
                        fontFamily: 'var(--font-sans)', fontSize: 12,
                        color: 'var(--fg-3)', marginLeft: 8,
                      }}>{row.by}</span>
                    </span>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
                      color: 'var(--sage-deep)',
                      letterSpacing: '0.02em',
                    }}>{row.t}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Landmarks chips */}
            <div>
              <div className="eyebrow" style={{ color: 'var(--sage-deep)', marginBottom: 14 }}>From the gate</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {landmarks.map((l, i) => (
                  <span key={i} style={{
                    fontFamily: 'var(--font-sans)', fontSize: 13,
                    color: 'var(--fg-2)',
                    background: 'var(--bg-3)',
                    border: '1px solid var(--border)',
                    borderRadius: 999,
                    padding: '7px 14px',
                  }}>{l}</span>
                ))}
              </div>
            </div>
          </div>

          {/* === RIGHT: framed map === */}
          <div className="slf-finding-map" style={{
            position: 'relative',
            borderRadius: 14,
            overflow: 'hidden',
            border: '1px solid var(--border)',
            boxShadow: 'var(--shadow-2)',
            minHeight: 540,
            background: 'var(--bg-3)',
          }}>
            <iframe
              title="Slowley Farm on Google Maps"
              src={mapsEmbedSrc}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                border: 0, display: 'block',
                filter: 'saturate(0.92) contrast(0.98)',
              }}
            />
            {/* Inset corner pin label */}
            <div style={{
              position: 'absolute', left: 16, top: 16,
              background: 'var(--cream)',
              border: '1px solid var(--border)',
              borderRadius: 8,
              padding: '8px 12px',
              boxShadow: 'var(--shadow-1)',
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--sage-deep)',
              pointerEvents: 'none',
            }}>
              <span style={{
                display: 'inline-block', width: 8, height: 8, borderRadius: 999,
                background: 'var(--sage)', marginRight: 8, verticalAlign: 'middle',
              }}/>
              Slowley Farm · TA23 0SB
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.FindingUs = FindingUs;