// Footer + final CTA
function Footer(){
  return (
    <footer style={{borderTop:'1px solid var(--line)'}}>
      {/* Final CTA — photographic */}
      <div style={{
        position:'relative', overflow:'hidden',
        padding:'180px 0 160px',
        textAlign:'center',
        background:'#0a0807',
      }}>
        <img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=2400&q=85&auto=format&fit=crop"
             alt="" style={{
              position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover',
              filter:'saturate(0.7) brightness(0.35) contrast(1.05)',
            }}/>
        {/* color washes */}
        <div style={{
          position:'absolute', inset:0, pointerEvents:'none',
          background:`
            radial-gradient(60% 50% at 50% 20%, rgba(217,119,87,0.22), transparent 60%),
            radial-gradient(60% 60% at 20% 90%, rgba(58,20,20,0.6), transparent 65%),
            linear-gradient(180deg, rgba(10,8,7,0.55), rgba(10,8,7,0.8))
          `,
        }}/>

        <div className="container" style={{position:'relative'}}>
          <span className="mono eyebrow" style={{justifyContent:'center', color:'var(--brass-2)'}}>The final invitation</span>
          <h2 className="serif" style={{
            margin:'24px 0 0', fontWeight:300,
            fontSize:'clamp(64px, 11vw, 180px)', lineHeight:0.9, letterSpacing:'-0.04em',
            color:'var(--ink)', textShadow:'0 2px 40px rgba(0,0,0,0.4)',
          }}>
            Design the room <br/>
            <span style={{
              fontStyle:'italic',
              background:'linear-gradient(180deg, var(--accent-2), var(--accent) 55%, var(--brass) 100%)',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
            }}>you live in.</span>
          </h2>
          <p style={{margin:'32px auto 0', maxWidth:560, color:'var(--ink-2)', fontSize:17, lineHeight:1.6, fontWeight:300}}>
            Free to start. Free to finish. Pay only when you want the room to pay you back.
          </p>
          <div style={{marginTop:44, display:'flex', justifyContent:'center', gap:14, flexWrap:'wrap'}}>
            <a href="Editor.html" style={{
              display:'inline-flex',alignItems:'center',gap:10,
              padding:'18px 28px', borderRadius:999,
              background:'var(--accent)', color:'#1a0907',
              fontSize:14, fontWeight:600,
              boxShadow:'0 14px 36px rgba(217,119,87,0.4)',
            }}>Build your first room <Icon.Arrow size={13}/></a>
            <a href="#" style={{
              padding:'18px 28px', borderRadius:999,
              border:'1px solid rgba(245,238,225,0.3)', color:'var(--ink)', fontSize:14,
              background:'rgba(12,11,10,0.4)', backdropFilter:'blur(8px)',
            }}>Get the clipper</a>
          </div>
        </div>
      </div>

      {/* footer bar */}
      <div style={{borderTop:'1px solid var(--line)', padding:'56px 0', background:'#0a0807'}}>
        <div className="container" style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:48,
        }}>
          <div>
            <div style={{display:'flex',alignItems:'baseline',gap:10}}>
              <span className="serif" style={{fontSize:28, letterSpacing:'-0.02em'}}>myrooms</span>
              <span className="mono" style={{color:'var(--accent)'}}>.design</span>
            </div>
            <p style={{margin:'18px 0 0', maxWidth:340, color:'var(--muted)', fontSize:13, lineHeight:1.6}}>
              A home design platform for individuals. Plan a room, source the products, build a shoppable card,
              share it, earn from it.
            </p>
            <div className="mono" style={{marginTop:28, color:'var(--brass)'}}>
              A Legacy Bridge Holdings product
            </div>
          </div>

          <FootCol title="Product" links={['Floor planner','Canvas builder','Browser clipper','Room cards','Pricing']}/>
          <FootCol title="Explore"  links={['Library','Living','Bedroom','Kitchen','Office','Outdoor']}/>
          <FootCol title="Creators" links={['Sign in','Affiliate guide','For bloggers','For Pinterest','FAQ','Contact']}/>
        </div>

        <div className="container" style={{
          marginTop:64, paddingTop:24, borderTop:'1px solid var(--line-soft)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16,
        }}>
          <div className="mono" style={{color:'var(--muted-2)'}}>© 2026 myrooms.design · Vol. I, Issue 01</div>
          <div style={{display:'flex',gap:24}}>
            <a href="#" style={{fontSize:12, color:'var(--muted)'}}>Privacy</a>
            <a href="#" style={{fontSize:12, color:'var(--muted)'}}>Terms</a>
            <a href="#" style={{fontSize:12, color:'var(--muted)'}}>Press</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FootCol({title, links}){
  const HREF = {
    'Pricing':'Landing Page.html#pricing',
    'Canvas builder':'Editor.html',
    'Room cards':'Room Card.html',
    'Library':'Explore.html',
    'Living':'Explore.html','Bedroom':'Explore.html','Kitchen':'Explore.html','Office':'Explore.html','Outdoor':'Explore.html',
    'Sign in':'Hub.html',
    'FAQ':'How It Works.html',
  };
  return (
    <div>
      <div className="mono" style={{marginBottom:18, color:'var(--brass-2)'}}>{title}</div>
      <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
        {links.map((l,i)=>(<li key={i}><a href={HREF[l] || '#'} style={{fontSize:13.5, color:'var(--ink-2)'}}>{l}</a></li>))}
      </ul>
    </div>
  );
}

window.Footer = Footer;