// Footer
function Footer({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <footer style={{background:'var(--ink)', color:'var(--bg-cream)', padding: isMobile ? '80px 0 40px' : '120px 0 48px'}}>
      <div className="container">
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr',
          gap:'48px',
          paddingBottom: isMobile ? '48px' : '72px',
          borderBottom:'1px solid rgba(255,255,255,0.12)'
        }}>
          <div>
            <span className="script" style={{fontSize: isMobile ? '56px' : '72px', lineHeight:1, color:'#e8d6c3'}}>ari joon</span>
            <p style={{color:'#a89a8f', maxWidth:'320px', marginTop:'16px', lineHeight:1.7, fontSize:'14px'}}>
              A boutique vacant home staging studio serving Austin, San Antonio, Kyle, Buda, Pflugerville, New Braunfels, and the Texas Hill Country.
            </p>
            <p style={{color:'#7a6e66', marginTop:'12px', fontSize:'13px', lineHeight:1.6}}>
              <a href="tel:+19562206997" style={{color:'#c9bab0', textDecoration:'none'}}>(956) 220-6997</a>
              <span style={{margin:'0 8px', color:'#4a4037'}}>·</span>
              <a href="mailto:hello@arijoonhome.com" style={{color:'#c9bab0', textDecoration:'none'}}>hello@arijoonhome.com</a>
            </p>
            <button className="btn" style={{marginTop:'32px', background:'var(--bg-cream)', color:'var(--ink)'}} onClick={()=>navigate('inquiry')}>
              Start a project <span>→</span>
            </button>
          </div>
          {isMobile ? (
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'32px'}}>
              <FooterCol title="Explore" links={[
                ['Home','home'],['Work','work'],['Services','services'],['About','about'],['Inquire','inquiry'],
              ]} navigate={navigate}/>
              <FooterCol title="Studio" links={[
                ['hello@arijoonhome.com','mailto:hello@arijoonhome.com'],['(956) 220-6997','tel:+19562206997'],['@arijoonhome',null],['Austin · San Antonio · Kyle · Buda · New Braunfels',null],
              ]}/>
            </div>
          ) : (
            <>
              <FooterCol title="Explore" links={[
                ['Home','home'],['Work','work'],['Services','services'],['About','about'],['Inquire','inquiry'],
              ]} navigate={navigate}/>
              <FooterCol title="Studio" links={[
                ['hello@arijoonhome.com','mailto:hello@arijoonhome.com'],['(956) 220-6997','tel:+19562206997'],['@arijoonhome',null],['Austin · San Antonio · Kyle · Buda · New Braunfels',null],
              ]}/>
            </>
          )}
        </div>
        <div style={{
          display:'flex', flexDirection: isMobile ? 'column' : 'row',
          justifyContent:'space-between', gap: isMobile ? '8px' : '0',
          marginTop:'40px', color:'#a89a8f', fontSize:'11px', letterSpacing:'0.18em', textTransform:'uppercase'
        }}>
          <span>© 2026 Ari Joon Home. All rights reserved.</span>
          <span>Site styled with love in Austin</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links, navigate }) {
  return (
    <div>
      <div className="eyebrow" style={{color:'#a89a8f', marginBottom:'20px'}}>{title}</div>
      <ul style={{listStyle:'none', padding:0, margin:0}}>
        {links.map(([label, to]) => (
          <li key={label} style={{marginBottom:'10px'}}>
            {to && (to.startsWith('mailto:') || to.startsWith('tel:')) ? (
              <a href={to} style={{color:'var(--bg-cream)', fontSize:'14px'}}>{label}</a>
            ) : to ? (
              <a href={`#/${to}`} onClick={(e)=>{e.preventDefault(); navigate(to);}} style={{color:'var(--bg-cream)', fontSize:'14px'}}>{label}</a>
            ) : (
              <span style={{color:'var(--bg-cream)', fontSize:'14px'}}>{label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Footer });