// components/footer.jsx — site footer with Dark Sky pledge mini, columns, legal

function Footer({ go, onBook }) {
  return (
    <footer className="ftr">
      <div className="wrap">
        {/* Pre-footer wonder strip */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr auto',
          alignItems: 'end',
          gap: 32,
          paddingBottom: 56,
          borderBottom: '1px solid var(--c-line-night)',
          marginBottom: 64,
        }}>
          <div>
            <div className="eyebrow on-night" style={{ marginBottom: 18 }}>Step outside tonight</div>
            <div className="display" style={{ fontSize: 'clamp(38px, 5.5vw, 76px)', maxWidth: 820 }}>
              The stars are <em>already waiting</em>.<br/>
              Reserve a telescope.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn--moon" onClick={onBook}>
              Book a Star Show <IconArrow size={16} />
            </button>
          </div>
        </div>

        <div className="ftr-grid">
          {/* Brand col */}
          <div>
            <div className="hdr-logo" style={{ marginBottom: 18 }}>
              <StarMark size={26} />
              <div className="hdr-logo-stack">
                <span>Sedona Star Show</span>
                <small style={{ color: 'rgba(248,244,232,0.55)' }}>Dark Sky · Est. 2019</small>
              </div>
            </div>
            <p style={{
              fontFamily: 'var(--f-body)',
              fontSize: 15,
              lineHeight: 1.6,
              color: 'rgba(248,244,232,0.7)',
              maxWidth: 320,
              fontWeight: 300,
            }}>
              A locally owned, small-group telescope tour beneath one of Arizona's most
              protected night skies.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
              <span className="tag" style={{ color: 'rgba(248,244,232,0.8)', borderColor: 'rgba(248,244,232,0.2)' }}>
                <IconLeaf size={12} /> Leave No Trace
              </span>
              <span className="tag" style={{ color: 'rgba(248,244,232,0.8)', borderColor: 'rgba(248,244,232,0.2)' }}>
                Dark Sky Member
              </span>
            </div>
          </div>

          <div>
            <h5>Tours</h5>
            <ul>
              <li><a onClick={() => go('tours')}>Public Star Show</a></li>
              <li><a onClick={() => go('tours')}>Private Star Show</a></li>
              <li><a onClick={() => go('tours')}>Moon &amp; Planets Night</a></li>
              <li><a onClick={() => go('tours')}>Meteor Showers</a></li>
              <li><a onClick={() => go('booking')}>Gift a Tour</a></li>
            </ul>
          </div>

          <div>
            <h5>Plan your night</h5>
            <ul>
              <li><a onClick={() => go('sky')}>What You'll See</a></li>
              <li><a onClick={() => go('prepare')}>What to Bring</a></li>
              <li><a onClick={() => go('prepare')}>FAQ</a></li>
              <li><a onClick={() => go('prepare')}>Weather Policy</a></li>
              <li><a onClick={() => go('prepare')}>Accessibility</a></li>
            </ul>
          </div>

          <div>
            <h5>Reach us</h5>
            <ul>
              <li style={{ color: 'rgba(248,244,232,0.85)', display: 'flex', gap: 8, alignItems: 'center', fontFamily: 'var(--f-ui)', fontSize: 14 }}>
                <IconPhone size={14} stroke={1.6} /> (928) 282 – 0000
              </li>
              <li style={{ color: 'rgba(248,244,232,0.85)', display: 'flex', gap: 8, alignItems: 'center', fontFamily: 'var(--f-ui)', fontSize: 14 }}>
                <IconChat size={14} stroke={1.6} /> hello@sedonastarshow.com
              </li>
              <li style={{ color: 'rgba(248,244,232,0.7)', fontFamily: 'var(--f-ui)', fontSize: 13, marginTop: 6, fontStyle: 'italic' }}>
                We reply within 4 hours, 8am–9pm AZ time.
              </li>
              <li style={{ marginTop: 14 }}>
                <a className="btn btn--sm btn--ghost-night" onClick={() => go('prepare')}>
                  Hotel &amp; resort partners <IconArrow size={14} />
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="ftr-legal">
          <span>© 2026 Sedona Star Show LLC · Sedona, Arizona · AZ TPT licensed</span>
          <span style={{ display: 'flex', gap: 22 }}>
            <a>Privacy</a><a>Terms</a><a>Cancellation</a><a>Accessibility</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });