/* Footer — three columns on parchment, split by vertical rules: identity,
   Instagram grid, and the newsletter. Mirrors the reference layout. */
function Footer({ onNav }) {
  const { Eyebrow } = window.DomumDesignSystem_84ba75;
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);

  const IG_HANDLE = 'springstreetdesignandbuild';
  const IG_URL = `https://instagram.com/${IG_HANDLE}`;
  /* Live feed: Instagram no longer serves a public feed without a token, so this
     reads a hosted JSON endpoint (Behold.so, EmbedSocial, or your own Graph API
     proxy). Set IG_FEED_URL and the grid shows the four most recent posts and
     refreshes on every page load. Until then it falls back to the images below. */
  const IG_FEED_URL = 'https://feeds.behold.so/4yudOX8KS2HiIdcdbMJK';
  const [posts, setPosts] = React.useState(null);
  React.useEffect(() => {
    if (!IG_FEED_URL) return;
    let live = true;
    fetch(IG_FEED_URL)
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((data) => {
        const list = Array.isArray(data) ? data : (data.posts || data.data || []);
        const mapped = list.slice(0, 4).map((p) => ({
          image: (p.sizes && (p.sizes.medium || p.sizes.small) || {}).mediaUrl || p.mediaUrl || p.media_url,
          permalink: p.permalink || p.link || IG_URL,
          caption: (p.prunedCaption || p.caption || '').slice(0, 120),
        })).filter((p) => p.image);
        if (live && mapped.length) setPosts(mapped);
      })
      .catch(() => {});
    return () => { live = false; };
  }, []);

  const social = [
    ['Instagram', IG_URL],
    ['Facebook', 'https://facebook.com/springstreetdesignandbuild'],
  ];

  const fallback = [
    { image: './assets/photo-founders-kitchen.jpg', position: 'center 26%' },
    { image: './assets/photo-founders-samples.jpg', position: 'center' },
    { image: './assets/texture-walnut-plain.png', position: 'center' },
    { image: './assets/texture-cornice-dentil.png', position: 'center' },
  ];
  const grid = posts || fallback;

  const boxStyle = {
    width: '100%', boxSizing: 'border-box',
    background: 'transparent', border: '1px solid var(--espresso)',
    borderRadius: 0, padding: '15px 12px',
    fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
    letterSpacing: '.12em', textTransform: 'uppercase',
    color: 'var(--text-primary)', outline: 'none',
  };

  return (
    <footer>
      <div style={{ background: 'var(--site-ground)', color: 'var(--text-primary)', borderTop: '1px solid var(--border-strong)' }}>
        <div style={{
          maxWidth: 'var(--page-max)', margin: '0 auto',
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))',
          gap: '1px', background: 'var(--border-strong)',
        }}>
          {/* Identity */}
          <div style={{ background: 'var(--site-ground)', padding: 'var(--space-7) var(--space-5)', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            <img src="./assets/logo-seal-espresso.png" alt="Spring Street Design and Build"
                 style={{ width: '230px', height: 'auto', display: 'block' }} />
            <p style={{
              fontFamily: 'var(--font-display)', fontSize: '17px', lineHeight: 1.9,
              color: 'var(--text-secondary)', margin: 'var(--space-6) 0 0', maxWidth: '34ch',
            }}>
              A boutique design and build studio serving Little Rock and Central Arkansas.
            </p>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
              letterSpacing: '.14em', textTransform: 'uppercase', lineHeight: 2,
              color: 'var(--text-muted)', margin: 'var(--space-5) 0 0', maxWidth: '30ch',
            }}>
              Little Rock · West Little Rock · North Little Rock · Roland · Maumelle · Conway · Bryant · Sherwood · Cabot
            </p>
            <div style={{ display: 'flex', gap: '26px', marginTop: 'var(--space-6)' }}>
              {social.map(([label, href]) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer"
                   style={{
                     border: 'none', fontFamily: 'var(--font-sans)', fontSize: '11px',
                     fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase',
                     color: 'var(--text-muted)',
                   }}>{label}</a>
              ))}
            </div>
          </div>

          {/* Instagram grid */}
          <div style={{
            background: 'var(--site-ground)',
            padding: 'var(--space-7) var(--space-5)',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
          }}>
            <a href={IG_URL} target="_blank" rel="noopener noreferrer"
               style={{
                 border: 'none', display: 'block', textAlign: 'center',
                 fontFamily: 'var(--font-sans)', fontSize: '11.5px', fontWeight: 500,
                 letterSpacing: '.22em', textTransform: 'uppercase',
                 color: 'var(--text-primary)', marginBottom: 'var(--space-6)',
               }}>
              Follow @{IG_HANDLE}
            </a>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', width: '100%', maxWidth: '300px' }}>
              {grid.map((g, i) => (
                <a key={g.permalink || i} href={g.permalink || IG_URL} target="_blank" rel="noopener noreferrer"
                   aria-label={g.caption || `Instagram post from @${IG_HANDLE}`}
                   style={{ border: 'none', display: 'block' }}>
                  <div style={{
                    width: '100%', aspectRatio: '1 / 1',
                    backgroundImage: `url(${g.image})`,
                    backgroundSize: 'cover', backgroundPosition: g.position || 'center',
                    backgroundRepeat: 'no-repeat',
                  }} />
                </a>
              ))}
            </div>
          </div>

          {/* Newsletter */}
          <div style={{ background: 'var(--site-ground)', padding: 'var(--space-7) var(--space-5)', textAlign: 'center' }}>
            <h2 style={{ fontSize: '1.9rem', fontWeight: 400, margin: 0 }}>Among the Details</h2>
            {subscribed ? (
              <p style={{ fontFamily: 'var(--font-display)', fontSize: '17px', lineHeight: 1.9, color: 'var(--text-secondary)', margin: 'var(--space-5) 0 0' }}>
                Thank you. You are on the list. Look for the next letter at the turn of the month.
              </p>
            ) : (
              <React.Fragment>
                <p style={{
                  fontFamily: 'var(--font-display)', fontSize: '17px', lineHeight: 1.9,
                  color: 'var(--text-secondary)', margin: 'var(--space-5) 0 var(--space-6)',
                }}>
                  Notes from the work: materials we are drawn to, decisions worth making early,
                  and what we are learning on site. A short letter, once a month.
                </p>
                <form name="newsletter" method="POST" data-netlify="true" netlify-honeypot="bot-field"
                      onSubmit={(e) => {
                        e.preventDefault();
                        const form = e.currentTarget;
                        if (!email.trim()) return;
                        window.submitNetlifyForm('newsletter', form)
                          .then(() => { setSubscribed(true); setEmail(''); })
                          .catch(() => setSubscribed(true));
                      }}
                      style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                  <input type="hidden" name="form-name" value="newsletter" />
                  <p hidden><input name="bot-field" tabIndex={-1} autoComplete="off" /></p>
                  <input type="email" name="email" required placeholder="Email address" value={email}
                         onChange={(e) => setEmail(e.target.value)} style={boxStyle} />
                  <button type="submit" style={{ ...boxStyle, cursor: 'pointer', transition: 'background var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet)' }}
                          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--espresso)'; e.currentTarget.style.color = 'var(--ivory)'; }}
                          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-primary)'; }}>
                    Subscribe
                  </button>
                </form>
              </React.Fragment>
            )}
          </div>
        </div>

        {/* Base bar */}
        <div style={{ borderTop: '1px solid var(--border-strong)' }}>
          <div style={{
            maxWidth: 'var(--page-max)', margin: '0 auto', padding: '22px var(--space-7)',
            display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '14px',
            fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
            letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--text-muted)',
          }}>
            <span>© 2026 Spring Street Design &amp; Build</span>
            <div style={{ display: 'flex', gap: '26px', flexWrap: 'wrap' }}>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav('contact'); }} style={{ border: 'none', color: 'var(--text-muted)' }}>info@springstreetbuild.com</a>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav('contact'); }} style={{ border: 'none', color: 'var(--text-muted)' }}>501.733.5253</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;