// Page: Home — BJO Automation

// Canonical service-photo mapping. Same photo per service across Home, Services, and ServiceDetail.
// If you change a service's photo, change it in all three files: Home.jsx (here), Services.jsx (svcPhotos), and ServiceDetail.jsx (per-slug `photo`).
const photos = {
  hero: 'assets/photos/painting-vineyard-clouds.png',
  about: 'assets/photos/bennett-portrait.jpg',
  closing: 'assets/photos/painting-vineyard-river.png',
  // Service photos (must match Services.jsx svcPhotos and ServiceDetail.jsx photo fields):
  s1: 'assets/photos/painting-mission-vines.png',   // 01 Lead Response & Follow-Up
  s2: 'assets/photos/painting-beach-dunes.png',     // 02 Missed Call Text-Back
  s3: 'assets/photos/painting-cliffs-sunset.png',   // 03 Reviews & Reputation (now position 05 on home grid)
  s4: 'assets/photos/painting-sea-stack.png',       // 04 Internal Reporting
  s5: 'assets/photos/painting-vineyard-rows.png',   // 05 Document Processing (now position 03 on home grid)
};

function Home() {
  return <>
    {/* 1 — Hero — two autoplay looping videos, one for desktop one for mobile (portrait-cropped to avoid edge cutoff).
         CSS media queries in index.html show/hide the right one. muted+playsInline are required for autoplay on iOS. */}
    <section style={{position:'relative', minHeight:'88vh', display:'flex', alignItems:'center', overflow:'hidden', background:`url(${photos.hero}) center / cover no-repeat`}}>
      <video
        className="hero-video-desktop"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        poster={photos.hero}
        src="assets/video/hero-loop.mp4"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', zIndex:0, pointerEvents:'none'}}
      />
      <video
        className="hero-video-mobile"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        poster={photos.hero}
        src="assets/video/hero-loop-mobile.mp4"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', zIndex:0, pointerEvents:'none', display:'none'}}
      />
      <div style={{position:'absolute',inset:0,background:'linear-gradient(to right, var(--bg-cream) 0%, rgba(248,244,237,0.9) 32%, rgba(248,244,237,0.15) 60%, rgba(248,244,237,0) 85%)', zIndex:1}}/>
      <div style={{position:'relative',maxWidth:'var(--container-max)',margin:'0 auto',padding:'120px var(--container-pad) 80px',width:'100%', zIndex:2}}>
        <div style={{maxWidth:640, display:'flex', flexDirection:'column', gap:28}}>
          <Eyebrow>Built for the 805 / 831</Eyebrow>
          <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(44px, 6vw, 76px)',lineHeight:1.05,letterSpacing:'-0.02em',color:'var(--text-charcoal)',margin:0}}>
            AI automations for Central Coast businesses.
          </h1>
          <p style={{fontFamily:'var(--font-body)',fontSize:21,lineHeight:1.55,color:'var(--text-charcoal)',opacity:0.85,maxWidth:560,margin:0}}>
            I build practical AI systems that handle the manual work eating your week &mdash; the follow-ups, paperwork, and reporting that quietly cost you hours and revenue when they slip. Built once, run quietly, owned by you.
          </p>
          <div style={{display:'flex',gap:12,marginTop:8,flexWrap:'wrap'}}>
            <Button to="/book" variant="primary" icon="calendar">Book a 45-min call</Button>
            <Button to="/services" variant="secondary">See what gets built</Button>
          </div>
          <div className="home-promise" style={{marginTop:8,display:'inline-flex',alignSelf:'flex-start',alignItems:'flex-start',gap:10,padding:'10px 14px',background:'rgba(248,244,237,0.92)',border:'1px solid rgba(196,154,108,0.35)',borderRadius:10,fontFamily:'var(--font-body)',fontSize:13.5,lineHeight:1.5,color:'var(--text-muted)',letterSpacing:'0.01em',backdropFilter:'blur(2px)',maxWidth:'100%'}}>
            <span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'var(--accent-clay)',marginTop:7,flexShrink:0}}/>
            <span><strong style={{color:'var(--text-charcoal)',fontWeight:600}}>The promise:</strong> 5 hours back in your week within 30 days &mdash; or your money back.</span>
          </div>
        </div>
      </div>
    </section>

    {/* stat strip */}
    <section style={{background:'var(--bg-cream)',borderTop:'1px solid var(--border-hair)',borderBottom:'1px solid var(--border-hair)'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'32px var(--container-pad)',display:'flex',gap:32,flexWrap:'wrap'}} className="home-stat-strip">
        {[
          ['21\u00d7','More qualified leads when you respond inside 5 minutes'],
          ['62%','Of calls to small businesses go unanswered during the day'],
          ['98%','Read reviews before calling a local business'],
          ['60+ hrs','Per month most offices waste on manual invoice entry'],
        ].map(([n,l],i,a)=>
          <Reveal key={n} delay={i*90} style={{flex:'1 1 220px',minWidth:200}}>
            <HomeStat number={n} label={l} divider={i<a.length-1}/>
          </Reveal>
        )}
      </div>
    </section>

    {/* 2 — Objection block */}
    <section style={{background:'var(--bg-cream)',padding:'120px var(--container-pad)'}}>
      <div style={{maxWidth:780, margin:'0 auto', textAlign:'center'}}>
        <div style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:'clamp(40px,5.2vw,68px)',lineHeight:1.12,color:'var(--text-charcoal)',letterSpacing:'-0.018em'}}>
          &ldquo;I don&rsquo;t need AI in my business.&rdquo;
        </div>
        <div style={{textAlign:'left',marginTop:56,fontFamily:'var(--font-body)',fontSize:18,lineHeight:1.7,color:'var(--text-charcoal)',maxWidth:680,marginLeft:'auto',marginRight:'auto'}}>
          <p>That&rsquo;s what most owners on the Central Coast say when the topic comes up. And they&rsquo;re half right.</p>
          <p>You don&rsquo;t need AI. What you need is the six hours a day you&rsquo;re spending on work that any system could handle in ten minutes.</p>
          <p style={{marginBottom:0}}>The lead that came in at 9 p.m. should get a real reply at 9:01 &mdash; not sit in your inbox until Thursday morning. The invoice from a Templeton vendor should land in your books on its own, not ride home with you to the kitchen table at midnight. You&rsquo;re not bad at this. You&rsquo;re just the only person doing it, and that math stops working eventually.</p>
        </div>
      </div>
      <div style={{maxWidth:1180, margin:'72px auto 0', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20}} className="stat-grid">
        {[
          ['33%','Of small business owners work 50+ hours a week. A quarter break 60.', 'Patriot Software / SCORE'],
          ['82%','Of businesses under 5 employees say AI isn\u2019t relevant to them. They\u2019re thinking of the wrong kind of AI.', 'SBA'],
          ['95%','Of corporate AI pilots failed. What\u2019s being sold to you has almost nothing in common with what actually works.', 'MIT'],
          ['55%','Cite cost as the reason they don\u2019t automate. The real barrier is nobody\u2019s shown them a system built for a business their size.', 'Bipartisan Policy Center'],
        ].map(([n,l,src],i)=>
          <Reveal key={src} delay={i*110}>
            <div style={{background:'var(--accent-clay-soft)',borderRadius:16,padding:'28px 26px',display:'flex',flexDirection:'column',gap:14,height:'100%'}}>
              <div style={{fontFamily:'var(--font-display)',fontSize:56,fontWeight:500,lineHeight:1,letterSpacing:'-0.02em',color:'var(--text-charcoal)'}}><CountUp value={n}/></div>
              <div style={{fontFamily:'var(--font-body)',fontSize:14.5,lineHeight:1.5,color:'var(--text-charcoal)',opacity:0.88}}>{l}</div>
              <div style={{fontFamily:'var(--font-body)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'#7a5a2f',fontWeight:500,marginTop:'auto',paddingTop:10,borderTop:'1px solid rgba(122,90,47,0.25)'}}>{src}</div>
            </div>
          </Reveal>
        )}
      </div>
      <div style={{textAlign:'center',marginTop:56,fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:22,lineHeight:1.5,color:'var(--text-muted)'}}>
        These aren't predictions. They're problems already inside your week.
      </div>
    </section>

    {/* 3 — Services preview — section breaks out of the standard container width so the 5 cards have real visual presence */}
    <section style={{background:'var(--bg-forest)',padding:'140px var(--container-pad)'}}>
      <div style={{maxWidth:'min(1560px, 95vw)',margin:'0 auto'}}>
        <div style={{textAlign:'center'}}><Eyebrow color="var(--accent-clay)">The five systems</Eyebrow></div>
        <h2 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(36px,5vw,58px)',lineHeight:1.1,letterSpacing:'-0.02em',color:'var(--text-cream)',margin:'18px auto 64px',maxWidth:880,textAlign:'center'}}>
          Each one fixes a specific bleed in your system.
        </h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:24}} className="service-grid">
          <Reveal delay={0}><HomeServiceCard slug="lead-response-followup" num="01" name="Lead Response & Follow-Up" desc="Reply in under a minute. Then stay in front of them until they buy." img={photos.s1}/></Reveal>
          <Reveal delay={70}><HomeServiceCard slug="missed-call-textback" num="02" name="Missed Call Text-Back" desc="Every missed call gets a 30-second text. The lead never goes cold." img={photos.s2}/></Reveal>
          <Reveal delay={140}><HomeServiceCard slug="document-processing" num="03" name="Document Processing" desc="Invoices send themselves out and read themselves in. Both ends of the loop." img={photos.s5}/></Reveal>
          <Reveal delay={210}><HomeServiceCard slug="internal-reporting" num="04" name="Internal Reporting" desc="One daily summary instead of opening five tools to check the same numbers." img={photos.s4}/></Reveal>
          <Reveal delay={280}><HomeServiceCard slug="reviews-reputation" num="05" name="Reviews & Reputation" desc="More 5-star reviews. Faster responses. Without ever opening Google." img={photos.s3}/></Reveal>
        </div>
        {/* Audit-first block — addresses "what if none of these fit me" objection */}
        <div style={{marginTop:80, padding:'48px 40px', borderRadius:18, background:'rgba(248,244,237,0.06)', border:'1px solid rgba(248,244,237,0.14)', maxWidth:880, marginLeft:'auto', marginRight:'auto'}} className="home-audit-block">
          <div style={{textAlign:'center'}}><Eyebrow color="var(--accent-clay)">Audit first, build second</Eyebrow></div>
          <h3 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(28px,3.4vw,40px)',lineHeight:1.18,letterSpacing:'-0.018em',color:'var(--text-cream)',margin:'14px auto 20px',maxWidth:680,textAlign:'center'}}>
            Not sure which one fits? Start with the call.
          </h3>
          <p style={{fontFamily:'var(--font-body)',fontSize:17,lineHeight:1.65,color:'rgba(248,244,237,0.82)',maxWidth:640,margin:'0 auto',textAlign:'center'}}>
            Every engagement opens with a 45-minute audit. We look at where your week is actually bleeding hours and come back with three to seven specific fixes &mdash; ranked by what saves the most time. The five systems above are what I build most. If your problem isn&rsquo;t on the list, book the call anyway. Most of what gets built isn&rsquo;t what people thought they needed when they first reached out.
          </p>
        </div>
        <div style={{textAlign:'center',marginTop:48,display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
          <Button to="/book" variant="cream" icon="calendar">Book the audit call</Button>
          <Button to="/services" variant="onForest" icon="arrow-up-right">See how each one works</Button>
        </div>
      </div>
    </section>

    {/* 4 — About preview */}
    <section style={{background:'var(--bg-cream)',padding:'120px var(--container-pad)'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'0.85fr 1.15fr',gap:72,alignItems:'center'}} className="about-grid">
        <Reveal y={32}><div style={{aspectRatio:'4/5',background:`url(${photos.about}) center / cover no-repeat`,borderRadius:16,boxShadow:'var(--shadow-photo)'}}/></Reveal>
        <Reveal delay={140}>
          <Eyebrow>Who you&rsquo;re working with</Eyebrow>
          <h2 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(34px,4.4vw,54px)',lineHeight:1.08,letterSpacing:'-0.02em',color:'var(--text-charcoal)',margin:'16px 0 28px',maxWidth:560}}>
            Local. Honest about it.
          </h2>
          <p style={{fontFamily:'var(--font-body)',fontSize:18,lineHeight:1.7,color:'var(--text-charcoal)',maxWidth:540,margin:'0 0 1.1em'}}>
            I grew up on the Central Coast. I know the businesses here because they&rsquo;re the ones I grew up next to. When you hire me, you get me. My phone, my email, my time. If something breaks at 6pm on a Saturday, you&rsquo;re not waiting until Monday. You&rsquo;re not getting passed off to someone else. The job doesn&rsquo;t end when the system goes live. That&rsquo;s where it starts.
          </p>
          <p style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:19,lineHeight:1.55,color:'var(--text-muted)',maxWidth:540,margin:0}}>
            Below is what to expect during and after our call.
          </p>
          <div style={{marginTop:32}}>
            <Button to="/about" variant="link">More about how it works &rarr;</Button>
          </div>
        </Reveal>
      </div>
    </section>

    {/* 5 — Closing CTA — guarantee-led */}
    <section style={{position:'relative',padding:'200px var(--container-pad)',overflow:'hidden',
      background:`linear-gradient(rgba(30,38,26,0.62),rgba(30,38,26,0.62)), url(${photos.closing}) center / cover no-repeat`,
      textAlign:'center'}}>
      <Reveal style={{maxWidth:900,margin:'0 auto',position:'relative'}}>
        <div style={{display:'inline-flex',alignItems:'center',gap:10,padding:'8px 16px',borderRadius:999,border:'1px solid rgba(248,244,237,0.35)',background:'rgba(248,244,237,0.06)',fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--accent-clay)',fontWeight:500,marginBottom:28}}>
          <span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'var(--accent-clay)'}}/>
          The guarantee
        </div>
        <h2 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(36px,5vw,60px)',lineHeight:1.12,letterSpacing:'-0.02em',color:'#fff',margin:'0 0 24px'}}>
          5 hours back in your week within 30 days &mdash; or your money back.
        </h2>
        <p style={{fontFamily:'var(--font-body)',fontSize:20,lineHeight:1.55,color:'rgba(255,255,255,0.9)',fontWeight:300,maxWidth:680,margin:'0 auto 44px'}}>
          One call. One report. Three to seven specific things you can fix this month.
        </p>
        <Button to="/book" variant="cream" icon="calendar">Book a 45-min call</Button>
      </Reveal>
    </section>
  </>;
}

function HomeStat({ number, label, divider }) {
  return (
    <div className="home-stat-inner" style={{ display:'flex', alignItems:'center', gap:24, flex:'1 1 220px', minWidth:200 }}>
      <div className="home-stat-text">
        <div style={{ fontFamily:'var(--font-display)', fontSize:40, fontWeight:500, letterSpacing:'-0.02em', lineHeight:1, color:'var(--text-charcoal)' }}>
          <CountUp value={number}/>
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--text-muted)', marginTop:8, lineHeight:1.45, maxWidth:240 }}>
          {label}
        </div>
      </div>
      {divider && <div className="home-stat-divider" style={{ width:1, height:60, background:'var(--border-hair)', marginLeft:'auto' }} />}
    </div>
  );
}

function HomeServiceCard({ slug, num, name, desc, img }) {
  const [hover, setHover] = React.useState(false);
  const { Link } = ReactRouterDOM;
  return (
    <Link to={`/services/${slug}`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position:'relative', aspectRatio:'5/7', borderRadius:18, overflow:'hidden',
        display:'flex', flexDirection:'column', justifyContent:'flex-end',
        padding:28, textDecoration:'none', color:'#fff',
        transition: 'transform 300ms var(--ease-out), box-shadow 300ms',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? 'var(--shadow-lift)' : 'none',
    }}>
      <div style={{ position:'absolute', inset:0,
        backgroundImage:`linear-gradient(to top, rgba(20,28,18,0.8), rgba(20,28,18,0.2) 55%, rgba(20,28,18,0.05)), url(${img})`,
        backgroundSize:'cover', backgroundPosition:'center',
        transition: 'transform 500ms var(--ease-out)',
        transform: hover ? 'scale(1.04)' : 'scale(1)'
      }} />
      <div style={{
        position:'absolute', top:18, left:18,
        fontFamily:'var(--font-body)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
        color:'var(--accent-clay)', fontWeight:500,
      }}>{num}</div>
      <div style={{
        position:'absolute', top:14, right:14, width:38, height:38, borderRadius:'50%',
        border:'1px solid rgba(255,255,255,0.7)', display:'flex', alignItems:'center', justifyContent:'center',
        background: hover ? 'var(--bg-cream)' : 'transparent',
        color: hover ? 'var(--text-charcoal)' : '#fff',
        transition: 'background 300ms, color 300ms',
      }}><i data-lucide="arrow-up-right" style={{width:16, height:16}}></i></div>
      <div style={{ position:'relative', zIndex:1 }}>
        <div style={{ fontFamily:'var(--font-display)', fontSize:'clamp(22px, 1.8vw, 32px)', fontWeight:500, lineHeight:1.12, letterSpacing:'-0.015em' }}>{name}</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:'clamp(13.5px, 0.95vw, 16px)', lineHeight:1.5, color:'rgba(255,255,255,0.88)', marginTop:12 }}>{desc}</div>
      </div>
    </Link>
  );
}

window.Home = Home;
