// HausFooter — dark sage footer
const FOOTER_BG = '#1d2118';
const FOOTER_BORDER = 'rgba(255,250,243,0.08)';

const HausFooter = () => {
  const [email, setEmail] = React.useState('');
  const [subDone, setSubDone] = React.useState(false);

  const handleSub = (e) => {
    e.preventDefault();
    if (email.includes('@')) { setSubDone(true); setEmail(''); }
  };

  const linkStyle = {
    fontFamily:"'Montserrat',sans-serif", fontSize:13, color:'rgba(255,250,243,0.5)',
    textDecoration:'none', display:'block', marginBottom:10, transition:'color 200ms',
    lineHeight:1.6,
  };

  const SocialIcon = ({ label, path }) => (
    <a href="#" aria-label={label} style={{display:'flex', alignItems:'center', justifyContent:'center', width:36, height:36, borderRadius:9999, border:'1px solid rgba(255,250,243,0.15)', color:'rgba(255,250,243,0.4)', transition:'all 200ms', cursor:'pointer', textDecoration:'none'}}
      onMouseEnter={e=>{e.currentTarget.style.borderColor='#aec49e'; e.currentTarget.style.color='#aec49e';}}
      onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,250,243,0.15)'; e.currentTarget.style.color='rgba(255,250,243,0.4)';}}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d={path}/>
      </svg>
    </a>
  );

  return (
    <footer style={{background:FOOTER_BG, color:'#fffaf3', overflow:'hidden', borderTop:`1px solid ${FOOTER_BORDER}`}}>

      {/* Brand statement band */}
      <div style={{borderBottom:`1px solid ${FOOTER_BORDER}`, padding:'clamp(48px,7vw,100px) clamp(20px,5vw,48px) clamp(44px,6vw,88px)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(32px,5vw,72px)', lineHeight:1.0, letterSpacing:'-0.025em', color:'#fffaf3', maxWidth:800, marginBottom:8}}>
            The wall they
          </div>
          <div style={{fontFamily:"'Railey',cursive", fontWeight:400, fontSize:'clamp(32px,4.8vw,68px)', lineHeight:1.1, color:'#aec49e', marginBottom:36}}>
            grew up climbing.
          </div>
          <p style={{fontFamily:"'Montserrat',sans-serif", fontWeight:300, fontSize:'clamp(14px,1.2vw,15px)', lineHeight:1.8, color:'rgba(255,250,243,0.55)', maxWidth:420, marginBottom:0}}>
            Custom-built indoor play walls and movement corners for family homes across Western Australia. Designed for real homes. Built to last a childhood.
          </p>
        </div>
      </div>

      {/* Links grid */}
      <div style={{padding:'clamp(40px,5vw,64px) clamp(20px,5vw,48px)'}}>
        <div className="footer-grid" style={{maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1.4fr', gap:'clamp(24px,4vw,64px)'}}>

          {/* Brand col */}
          <div>
            <div style={{marginBottom:20, lineHeight:1}}>
              <div style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:20, letterSpacing:'-0.02em', color:'#fffaf3'}}>HAUS</div>
              <div style={{fontFamily:"'Railey',cursive", fontWeight:400, fontSize:17, color:'#aec49e', marginTop:-1}}>& play</div>
            </div>
            <p style={{fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:300, lineHeight:1.85, color:'rgba(255,250,243,0.45)', maxWidth:220, marginBottom:24}}>
              Less screen. More climb.
            </p>
            <div style={{display:'flex', gap:8}}>
              <SocialIcon label="Instagram" path="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01M7.5 2h9a5.5 5.5 0 0 1 5.5 5.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2z"/>
              <SocialIcon label="Pinterest" path="M12 2C6.48 2 2 6.48 2 12c0 4.24 2.65 7.86 6.39 9.29-.09-.78-.17-1.98.03-2.83.19-.77 1.29-5.49 1.29-5.49s-.33-.66-.33-1.63c0-1.53.89-2.67 1.99-2.67.94 0 1.39.71 1.39 1.56 0 .95-.61 2.38-.92 3.7-.26 1.1.55 2 1.63 2 1.96 0 3.27-2.5 3.27-5.46 0-2.26-1.52-3.95-4.27-3.95-3.1 0-5.03 2.32-5.03 4.9 0 .89.26 1.52.67 2 .07.08.08.15.06.24l-.25.97c-.04.16-.14.19-.32.12-1.2-.49-1.76-1.82-1.76-3.3 0-3.08 2.59-6.75 7.74-6.75 4.14 0 6.88 3 6.88 6.23 0 4.24-2.36 7.4-5.84 7.4-1.17 0-2.27-.63-2.65-1.35l-.76 2.92c-.28 1.04-.88 2.09-1.39 2.9.53.16 1.09.24 1.67.24 5.52 0 10-4.48 10-10S17.52 2 12 2z"/>
              <SocialIcon label="Facebook" path="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
            </div>
          </div>

          {/* Work */}
          <div>
            <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,250,243,0.28)', marginBottom:18}}>Work</div>
            {[['Climbing Walls','#work'],['Movement Corners','#work'],['Swing Setups','#work'],['Custom Installs','#work'],['Gallery','#work']].map(([l,href])=>(
              <a key={l} href={href} style={linkStyle}
                onMouseEnter={e=>e.target.style.color='#fffaf3'}
                onMouseLeave={e=>e.target.style.color='rgba(255,250,243,0.5)'}>{l}</a>
            ))}
          </div>

          {/* Studio */}
          <div>
            <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,250,243,0.28)', marginBottom:18}}>Studio</div>
            {[['About','#about'],['Process','#process'],['Press','#'],['Contact','#contact']].map(([l,href])=>(
              <a key={l} href={href} style={linkStyle}
                onMouseEnter={e=>e.target.style.color='#fffaf3'}
                onMouseLeave={e=>e.target.style.color='rgba(255,250,243,0.5)'}>{l}</a>
            ))}
          </div>

          {/* Email signup */}
          <div>
            <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,250,243,0.28)', marginBottom:18}}>Stay in the loop</div>
            <p style={{fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:300, lineHeight:1.75, color:'rgba(255,250,243,0.45)', marginBottom:16}}>New spaces, design notes, and the occasional behind-the-scenes from the workshop.</p>
            {subDone ? (
              <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:500, color:'#aec49e', padding:'12px 0'}}>You're in. Welcome.</div>
            ) : (
              <form onSubmit={handleSub} style={{display:'flex', flexDirection:'column', gap:8}}>
                <label htmlFor="footer-email" style={{position:'absolute', width:1, height:1, padding:0, margin:-1, overflow:'hidden', clip:'rect(0,0,0,0)', whiteSpace:'nowrap', border:0}}>
                  Email address for newsletter
                </label>
                <input
                  id="footer-email" type="email" name="email" autoComplete="email"
                  spellCheck="false" value={email} onChange={e=>setEmail(e.target.value)}
                  placeholder="your@email.com"
                  style={{width:'100%', fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:400, background:'rgba(255,250,243,0.06)', border:'1.5px solid rgba(255,250,243,0.14)', borderRadius:10, padding:'11px 14px', color:'#fffaf3', transition:'border-color 200ms', boxSizing:'border-box'}}
                  onFocus={e=>e.target.style.borderColor='rgba(174,196,158,0.7)'}
                  onBlur={e=>e.target.style.borderColor='rgba(255,250,243,0.14)'}/>
                <button type="submit" style={{fontFamily:"'Montserrat',sans-serif", fontSize:11, fontWeight:600, letterSpacing:'0.06em', background:'#5a7a4a', color:'#fff', border:'none', borderRadius:9999, padding:'11px 20px', cursor:'pointer', transition:'background 200ms', alignSelf:'flex-start'}}
                  onMouseEnter={e=>e.currentTarget.style.background='#496840'}
                  onMouseLeave={e=>e.currentTarget.style.background='#5a7a4a'}>Subscribe</button>
              </form>
            )}
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <style>{`
        @media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr!important;}}
        @media(max-width:480px){.footer-grid{grid-template-columns:1fr!important;}}
        #footer-email{outline:none;}
        #footer-email:focus-visible{outline:2px solid #aec49e;outline-offset:0;box-shadow:0 0 0 4px rgba(174,196,158,0.15);}
      `}</style>
      <div style={{borderTop:`1px solid ${FOOTER_BORDER}`, padding:'20px clamp(20px,5vw,48px)'}}>
        <div style={{maxWidth:1280, margin:'0 auto', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
          <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:11, color:'rgba(255,250,243,0.28)', letterSpacing:'0.04em'}}>© 2025 Haus & Play. All rights reserved. Perth, WA.</div>
          <div style={{display:'flex', gap:20}}>
            {['Privacy','Terms','Cookies'].map(l=>(
              <a key={l} href="#" style={{fontFamily:"'Montserrat',sans-serif", fontSize:11, color:'rgba(255,250,243,0.28)', textDecoration:'none', transition:'color 200ms'}}
                onMouseEnter={e=>e.target.style.color='rgba(255,250,243,0.7)'}
                onMouseLeave={e=>e.target.style.color='rgba(255,250,243,0.28)'}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};
Object.assign(window, { HausFooter });