// HausHero — full-width editorial hero

const ImgPlaceholder = ({ aspect='4/3', radius=24, gradient='linear-gradient(135deg,#ede0ce 0%,#d4bfa3 100%)', label='' }) => (
  <div style={{aspectRatio:aspect, borderRadius:radius, background:gradient, display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden', position:'relative'}}>
    <div style={{textAlign:'center', opacity:0.28}}>
      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
        <rect x="5" y="5" width="38" height="38" rx="4" stroke="#a08060" strokeWidth="2"/>
        <circle cx="17" cy="17" r="4.5" stroke="#a08060" strokeWidth="2"/>
        <path d="M5 34l11-11 9 9 7-7 11 9" stroke="#a08060" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      {label && <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, color:'#a08060', marginTop:8, fontWeight:500, letterSpacing:'0.07em'}}>{label}</div>}
    </div>
  </div>
);
Object.assign(window, { ImgPlaceholder });

const HausHero = ({ onStartProject }) => {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []);

  const fadeUp = (delay=0) => ({
    opacity: loaded ? 1 : 0,
    transform: loaded ? 'none' : 'translateY(20px)',
    transition: `opacity 700ms ${delay}ms cubic-bezier(0.25,0.46,0.45,0.94), transform 700ms ${delay}ms cubic-bezier(0.25,0.46,0.45,0.94)`,
  });

  return (
    <section style={{minHeight:'100svh', background:'#fffaf3', display:'flex', alignItems:'flex-start', paddingTop:68, overflow:'hidden', position:'relative'}}>
      {/* Soft warm radial glow */}
      <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse 70% 60% at 72% 44%, #f0e5d2 0%, transparent 65%)', pointerEvents:'none'}} />

      <div style={{maxWidth:1280, margin:'0 auto', padding:'clamp(28px,4vh,52px) clamp(20px,5vw,48px)', width:'100%', position:'relative'}}>
        <div className="hero-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px,5vw,88px)', alignItems:'center'}}>

          {/* Left — copy */}
          <div>
            {/* Badge pill */}
            <div style={{...fadeUp(0), display:'inline-flex', alignItems:'center', gap:8, background:'#f5ede0', border:'1px solid #e8d9c5', borderRadius:9999, padding:'7px 14px 7px 10px', marginBottom:28}}>
              <span style={{width:6, height:6, borderRadius:'50%', background:'#899e7b', display:'inline-block', flexShrink:0}}/>
              <span style={{fontFamily:"'Montserrat',sans-serif", fontSize:11, fontWeight:600, letterSpacing:'0.1em', color:'#5a5248', textTransform:'uppercase'}}>Perth, Western Australia</span>
            </div>

            <h1 style={{...fadeUp(100), fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(32px,8vw,76px)', lineHeight:1.02, letterSpacing:'-0.025em', color:'#1f1f1f', marginBottom:4, textWrap:'pretty'}}>
              Kids don't need
            </h1>
            <h1 style={{...fadeUp(150), fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(32px,8vw,76px)', lineHeight:1.02, letterSpacing:'-0.025em', color:'#1f1f1f', marginBottom:4}}>
              another screen.
            </h1>
            <h1 style={{...fadeUp(200), fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(32px,8vw,76px)', lineHeight:1.02, letterSpacing:'-0.025em', color:'#1f1f1f', marginBottom:4}}>
              They need a wall
            </h1>
            <div style={{...fadeUp(250), fontFamily:"'Railey',cursive", fontWeight:400, fontSize:'clamp(32px,7.5vw,72px)', lineHeight:1.1, color:'#899e7b', marginBottom:28}}>
              to climb.
            </div>

            <p style={{...fadeUp(320), fontFamily:"'Montserrat',sans-serif", fontWeight:300, fontSize:'clamp(14px,1.4vw,17px)', lineHeight:1.8, color:'#5a5248', maxWidth:420, marginBottom:40, textWrap:'pretty'}}>
              Haus & Play designs and installs custom play walls and movement corners for family homes — climbing walls, monkey bars, sensory swings, ropes — built to look beautiful in your home, not bolted on top of it.
            </p>

            <div className="hero-btns" style={{...fadeUp(400), display:'flex', gap:12, flexWrap:'wrap', marginBottom:52}}>
              <button onClick={onStartProject} style={{fontFamily:"'Montserrat',sans-serif", fontSize:13, fontWeight:600, letterSpacing:'0.05em', background:'#5a7a4a', color:'#fff', border:'none', borderRadius:9999, padding:'15px 32px', cursor:'pointer', transition:'background 220ms', whiteSpace:'nowrap'}}
                onMouseEnter={e=>e.currentTarget.style.background='#496840'}
                onMouseLeave={e=>e.currentTarget.style.background='#5a7a4a'}>Start your project</button>
              <button onClick={()=>document.getElementById('work')?.scrollIntoView({behavior:'smooth'})} style={{fontFamily:"'Montserrat',sans-serif", fontSize:13, fontWeight:500, letterSpacing:'0.04em', background:'transparent', color:'#5a5248', border:'1.5px solid #c4b49e', borderRadius:9999, padding:'15px 32px', cursor:'pointer', transition:'background 220ms, border-color 220ms'}}
                onMouseEnter={e=>{e.currentTarget.style.background='#f5ede0'; e.currentTarget.style.borderColor='#a08060';}}
                onMouseLeave={e=>{e.currentTarget.style.background='transparent'; e.currentTarget.style.borderColor='#c4b49e';}}>See our spaces</button>
            </div>

            {/* Stats */}
            <div style={{...fadeUp(480), display:'flex', gap:'clamp(20px,4vw,44px)'}}>
              {[['Custom','Designed for your room'],['Built to last','Premium materials, made to grow'],['Perth','Local studio']].map(([n,l])=>(
                <div key={n}>
                  <div style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:26, color:'#1f1f1f', lineHeight:1}}>{n}</div>
                  <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:500, letterSpacing:'0.07em', color:'#9a9088', marginTop:4, textTransform:'uppercase'}}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — image */}
          <div style={{...fadeUp(150), position:'relative'}}>
            <div style={{aspectRatio:'3/4', borderRadius:28, overflow:'hidden', boxShadow:'0 16px 64px rgba(31,24,16,0.14)'}}>
              <img src="/assets/modular/5.jpg"
                alt="Custom indoor climbing wall installation"
                width="900" height="1200"
                loading="eager"
                style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center'}}
                onError={e=>{e.target.style.display='none'; e.target.parentNode.style.background='linear-gradient(145deg,#e8d9c5,#c4a88a)';}}
              />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media(max-width:720px){
          .hero-grid{display:flex!important;flex-direction:column;gap:24px!important;}
          .hero-grid > div:first-child{order:1;}
          .hero-grid > div:last-child{order:2;display:block!important;}
          .hero-grid > div:last-child > div:first-child{aspect-ratio:4/3!important;border-radius:20px!important;}
          .hero-btns{flex-wrap:nowrap!important;}
          .hero-btns button{padding:12px 18px!important;font-size:12px!important;}
        }
      `}</style>
    </section>
  );
};
Object.assign(window, { HausHero, ImgPlaceholder });