// Home page
function Home({ navigate }) {
  return (
    <main>
      <HomeHero navigate={navigate} />
      <HomeIntro />
      <HomeServices navigate={navigate} />
      <HomeApproach />
      <HomeTestimonials />
      <HomePress />
      <HomeCTA navigate={navigate} />
    </main>
  );
}

function HomeHero({ navigate }) {
  const [y, setY] = useState(0);
  const isMobile = useIsMobile();
  useEffect(() => {
    const on = () => setY(window.scrollY);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <section style={{
      position:'relative', minHeight: '100vh',
      display: 'grid', gridTemplateColumns: '1fr',
      alignItems: 'stretch', overflow: 'hidden',
    }}>
      <div style={{position:'relative', overflow:'hidden', gridColumn:'1 / -1', minHeight:'100vh'}}>
        <div style={{
          position:'absolute', inset:0,
          transform: `translateY(${y * 0.08}px) scale(1.06)`,
          transformOrigin: 'center top',
        }}>
          <img
            src="assets/hero.jpg"
            alt="Ari Joon Home — styled living room"
            style={{ width:'100%', height:'110vh', objectFit:'cover', objectPosition:'center', display:'block' }}
          />
        </div>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(to bottom, rgba(30,26,23,0.18) 0%, rgba(30,26,23,0.52) 100%)'}} />
        <div style={{
          position:'absolute', inset:0,
          display:'flex', flexDirection:'column',
          alignItems:'center', justifyContent:'center',
          textAlign:'center', padding: isMobile ? '0 24px' : '0 40px',
          color:'var(--bg-cream)',
        }}>
          <Reveal>
            <span className="script" style={{fontSize:'clamp(72px, 18vw, 200px)', lineHeight:1, display:'block', color:'#f4ede3'}}>ari joon</span>
          </Reveal>
          <Reveal delay={120}>
            <div className="eyebrow" style={{color:'rgba(244,237,227,0.7)', marginTop:'16px', letterSpacing: isMobile ? '0.2em' : '0.42em', fontSize: isMobile ? '10px' : '11px'}}>Home Staging · Interior Curation · Austin & San Antonio</div>
          </Reveal>
          <Reveal delay={240}>
            <div style={{display:'flex', gap:'12px', marginTop:'40px', flexWrap:'wrap', justifyContent:'center'}}>
              <button className="btn" style={{background:'rgba(244,237,227,0.15)', backdropFilter:'blur(8px)', border:'1px solid rgba(244,237,227,0.5)', color:'#f4ede3'}} onClick={()=>navigate('inquiry')}>
                Book a Consultation <span>→</span>
              </button>
              <button className="btn btn-ghost" style={{borderColor:'rgba(244,237,227,0.5)', color:'#f4ede3'}} onClick={()=>navigate('work')}>
                See the Work
              </button>
            </div>
          </Reveal>
        </div>
        <div style={{position:'absolute', bottom:'32px', left:'50%', transform:'translateX(-50%)', color:'rgba(244,237,227,0.6)', textAlign:'center'}}>
          <div className="eyebrow" style={{fontSize:'9px', color:'rgba(244,237,227,0.6)'}}>Scroll</div>
          <div style={{fontSize:'18px', marginTop:'6px'}}>↓</div>
        </div>
      </div>
    </section>
  );
}

function HomeIntro() {
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '80px 0 64px' : '160px 0 120px'}}>
      <div className="container">
        <Reveal>
          <h1 className="serif" style={{
            fontSize: 'clamp(36px, 5.5vw, 80px)',
            lineHeight: 1.05, letterSpacing: '-0.025em',
            fontWeight: 300, margin: '0 0 56px', maxWidth: '900px',
          }}>
            Vacant Home Staging for<br/>
            <em style={{fontWeight: 400}}>Austin & San Antonio</em> Realtors
          </h1>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? '24px' : '80px', alignItems:'start'}}>
          <Reveal>
            <div className="eyebrow" style={{display:'flex', alignItems:'center', gap:'14px'}}>
              <span style={{width:'24px', height:'1px', background:'var(--ink-3)'}}/>
              The studio
            </div>
          </Reveal>
          <div>
            <Reveal delay={80}>
              <p className="serif" style={{
                fontSize: 'clamp(24px, 3.2vw, 44px)',
                lineHeight: 1.28, letterSpacing: '-0.01em',
                fontWeight: 300, margin: 0, textWrap: 'pretty',
              }}>
                We style homes the way a writer edits a paragraph —
                <em> removing everything that isn't essential</em>, until only
                what matters is left. A buyer walks in and feels it, before they
                can name it. That feeling is <span className="script" style={{color:'var(--accent-2)', fontSize:'1.1em'}}>home</span>.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{display:'flex', gap:'32px', marginTop:'40px', color:'var(--ink-3)', fontSize:'13px', letterSpacing:'0.04em'}}>
                <span>— Ariana Khaledi, founder</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeServices({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '80px 0' : '160px 0', background:'var(--bg)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? '48px' : '80px'}}>
          <Reveal>
            <div style={isMobile ? {} : {position:'sticky', top:'140px'}}>
              <div className="eyebrow" style={{display:'flex', alignItems:'center', gap:'14px'}}>
                <span style={{width:'24px', height:'1px', background:'var(--ink-3)'}}/>
                Services
              </div>
              <h2 className="serif" style={{fontSize:'clamp(40px, 5vw, 72px)', lineHeight:1, letterSpacing:'-0.02em', margin:'24px 0 32px', fontWeight:300}}>
                Three<br/><em style={{fontWeight:400}}>ways</em> we<br/>work.
              </h2>
              <button className="btn btn-ghost" onClick={()=>navigate('services')}>Our Process</button>
            </div>
          </Reveal>
          <div>
            {SERVICES.map((s, i) => (
              <Reveal key={s.key} delay={i*80}>
                <div style={{
                  padding: isMobile ? '32px 0' : '48px 0',
                  borderTop: i===0 ? '1px solid var(--rule)' : 'none',
                  borderBottom:'1px solid var(--rule)',
                  display:'grid', gridTemplateColumns:'60px 1fr', gap:'24px', alignItems:'start',
                }}>
                  <div className="serif" style={{fontSize:'32px', color:'var(--ink-3)', fontStyle:'italic', fontWeight:300}}>{s.number}</div>
                  <div>
                    <h3 className="serif" style={{fontSize: isMobile ? '28px' : '34px', margin:0, fontWeight:400, letterSpacing:'-0.01em'}}>{s.name}</h3>
                    <p style={{margin:'10px 0 0', color:'var(--ink-2)', maxWidth:'520px'}}>{s.blurb}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeApproach() {
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '80px 0' : '160px 0', background:'var(--ink)', color:'var(--bg-cream)', position:'relative', overflow:'hidden'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '48px' : '80px', alignItems:'center'}}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{color:'#a89a8f'}}>The approach</div>
              <h2 className="serif" style={{fontSize:'clamp(36px, 5vw, 76px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'24px 0 32px', fontWeight:300}}>
                We don't furnish rooms.<br/>
                <em style={{fontWeight:400, color:'#e8d6c3'}}>We furnish feelings.</em>
              </h2>
              <p style={{color:'#c9baae', maxWidth:'480px', lineHeight:1.75}}>
                Each piece in an Ari Joon install — whether in Austin, San Antonio, Kyle, Buda, Pflugerville, or New Braunfels — is chosen to invoke the feeling a buyer has always dreamed of. The bedroom you actually want to lounge in. The kitchen where you'll finally attempt sourdough.
              </p>
              <div style={{marginTop:'40px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: isMobile ? '20px' : '24px'}}>
                {[
                  ['Customer Experience', 'You\'ll always know what\'s next'],
                  ['Seasonal Pricing', 'Pricing that moves with the market'],
                  ['Zero-hassle removal', 'We come back when it sells'],
                  ['Styled to sell, not just furnished', 'Every piece earns its place'],
                ].map(([t,d]) => (
                  <div key={t}>
                    <div style={{fontFamily:'Manrope, sans-serif', fontSize:'13px', color:'#e8d6c3', marginBottom:'4px'}}>{t}</div>
                    <div style={{fontSize:'12px', color:'#8a7d71'}}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{position:'relative', marginTop: isMobile ? '0' : '0', paddingBottom: isMobile ? '0' : '40px'}}>
              <img src="assets/portfolio/p01.jpg" alt="Styled living room with horse painting"
                style={{width:'100%', display:'block', objectFit:'cover', aspectRatio: isMobile ? '4/3' : '4/5'}}/>
              {!isMobile && (
                <div style={{position:'absolute', bottom:'-40px', right:'-40px', width:'60%', boxShadow:'0 24px 60px rgba(0,0,0,0.3)'}}>
                  <img src="assets/approach-overlay.jpg" alt="Styled dining room"
                    style={{width:'100%', display:'block', objectFit:'cover', objectPosition:'center bottom', aspectRatio:'1/1'}}/>
                </div>
              )}
            </div>
          </Reveal>
          {isMobile && (
            <Reveal>
              <img src="assets/approach-overlay.jpg" alt="Styled dining room"
                style={{width:'100%', display:'block', objectFit:'cover', objectPosition:'center bottom', aspectRatio:'4/3'}}/>
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}

function HomeTestimonials() {
  const [i, setI] = useState(0);
  const isMobile = useIsMobile();
  useEffect(() => {
    const t = setInterval(() => setI(x => (x+1) % TESTIMONIALS.length), 6500);
    return () => clearInterval(t);
  }, []);
  return (
    <section style={{padding: isMobile ? '100px 0' : '200px 0', textAlign:'center', position:'relative'}}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{justifyContent:'center', display:'flex', alignItems:'center', gap:'14px'}}>
            <span style={{width:'24px', height:'1px', background:'var(--ink-3)'}}/>
            Kind words
            <span style={{width:'24px', height:'1px', background:'var(--ink-3)'}}/>
          </div>
        </Reveal>
        <div style={{minHeight: isMobile ? '280px' : '220px', marginTop:'48px', position:'relative'}}>
          {TESTIMONIALS.map((t, idx) => (
            <div key={idx} style={{
              position: idx===0 ? 'relative' : 'absolute', inset: 0,
              opacity: i===idx ? 1 : 0,
              transform: i===idx ? 'translateY(0)' : 'translateY(16px)',
              transition: 'opacity .8s, transform .8s',
              pointerEvents: i===idx ? 'auto':'none',
            }}>
              <p className="serif" style={{
                fontSize:'clamp(22px, 3.4vw, 48px)',
                lineHeight: 1.35, letterSpacing:'-0.01em',
                maxWidth: '980px', margin: '0 auto',
                fontStyle:'italic', fontWeight: 300, textWrap: 'pretty',
              }}>
                "{t.q}"
              </p>
              <div className="eyebrow" style={{marginTop:'32px', fontSize:'10px'}}>— {t.a}</div>
            </div>
          ))}
        </div>
        <div style={{display:'flex', gap:'8px', justifyContent:'center', marginTop:'40px', alignItems:'center'}}>
          {TESTIMONIALS.map((_, idx) => (
            <button key={idx} onClick={()=>setI(idx)} style={{
              width: i===idx? '32px':'12px', height:'2px', border:'none', background: i===idx?'var(--ink)':'var(--ink-4)',
              transition: 'width .5s, background .5s', cursor:'pointer', padding:0,
            }}/>
          ))}
        </div>
        <Reveal delay={200}>
          <a href="https://share.google/Ez8WP12gNbg8nIQfG" target="_blank" rel="noopener noreferrer"
            className="eyebrow" style={{display:'inline-flex', alignItems:'center', gap:'10px', marginTop:'40px', borderBottom:'1px solid var(--ink)', paddingBottom:'4px', fontSize:'10px'}}>
            Read all reviews on Google
            <span>→</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function HomePress() {
  return <Marquee items={PRESS} speed={48} />;
}

function HomeCTA({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '100px 0 120px' : '160px 0 200px'}}>
      <div className="container" style={{textAlign:'center'}}>
        <Reveal>
          <span className="script" style={{fontSize:'clamp(72px, 10vw, 160px)', color:'var(--accent-2)', lineHeight:1, display:'block'}}>let's begin.</span>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="serif" style={{fontSize:'clamp(32px, 4.4vw, 64px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'24px auto 0', fontWeight:300, maxWidth:'720px'}}>
            Tell us about your home.<br/>
            We'll be in touch <em style={{fontWeight:400}}>promptly</em>.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <button className="btn" style={{marginTop:'48px'}} onClick={()=>navigate('inquiry')}>
            Start your inquiry
            <span>→</span>
          </button>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home });