// Green Yard — page components
const { SOD_TYPES, SERVICES, SERVICES_EXTRA, NEIGHBORHOODS, TESTIMONIALS, FAQ, POSTS } = window.GY;

// ============ HOME ============
const HomePage = () => (
  <div>
    {/* Hero */}
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div data-reveal>
            <Eyebrow>★ 5.0 · 13+ Verified Reviews · BBB-listed since 2016</Eyebrow>
            <h1>Jacksonville's best sod, <span className="accent">laid right</span> the first time.</h1>
            <p className="lede">Owner-operated since 2016. Free on-site quotes within 24 hours. Same-week installation on most jobs — Mandarin to the Beaches, Nocatee to Orange Park.</p>
            <div className="hero-actions">
              <a className="btn btn-primary" href="#/quote">Get my free quote →</a>
              <a className="btn btn-ghost" href="tel:+19043002460"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg><span className="phone">(904) 300-2460</span></a>
            </div>
            <div className="hero-trust">
              <div className="item"><Stars/><strong>5.0</strong> · 13+ reviews</div>
              <div className="item">🏛 BBB-listed</div>
              <div className="item">👤 Owner on every job</div>
              <div className="item">💵 Transparent pricing</div>
            </div>
          </div>
          <div className="hero-visual" data-reveal>
            <img src="https://static.wixstatic.com/media/b2bcea8aca9384faead205755744ddbf.jpg" alt="Fresh St. Augustine sod installed in a Mandarin, Jacksonville front yard" loading="eager"/>
            <div className="floater floater-1">
              <div className="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 13l4 4L19 7"/></svg></div>
              <div><div className="l1">Same-week install</div><div className="l2">Free quote in 24h</div></div>
            </div>
            <div className="floater floater-2">
              <div className="ico" style={{background:'#F2C744',color:'#2B1D14'}}><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.785 1.401 8.166L12 18.896l-7.335 3.865 1.401-8.166L.132 8.81l8.2-1.192z"/></svg></div>
              <div><div className="l1">5.0 / 5.0</div><div className="l2">13+ verified reviews</div></div>
            </div>
          </div>
        </div>
      </div>
      <div className="grass-divider"/>
    </section>

    {/* Services */}
    <section className="section bg-mist">
      <div className="container">
        <SectionHead eyebrow="What we install" title="Sod, beds, trees — done by the owner who quoted it." sub="Every Green Yard project gets Alex on-site, plus a small, careful crew. No subcontractor handoffs."/>
        <div className="cards cards-4">
          {SERVICES.map(s => <ServiceCard key={s.slug} s={s}/>)}
        </div>
      </div>
    </section>

    {/* Sod Types */}
    <section className="section bg-sand">
      <div className="container">
        <SectionHead eyebrow="Sod types we know cold" title="Five grasses. Each picked for the lot, not the brochure." sub="We will tell you honestly which sod will survive your yard's sun, soil, and watering reality."/>
        <div className="sod-grid">
          {SOD_TYPES.map(s => <SodCard key={s.slug} s={s}/>)}
        </div>
      </div>
    </section>

    {/* Process */}
    <section className="section bg-mist">
      <div className="container">
        <SectionHead eyebrow="How we work" title="Five steps. No surprises."/>
        <div className="timeline">
          {[
            {n:'1',t:'Free Quote',d:'On-site measure, sod recommendation, fixed price emailed in 24h.'},
            {n:'2',t:'Soil Prep',d:'Old grass out, root-rake, level-grade, soil amendments where needed.'},
            {n:'3',t:'Fresh Delivery',d:'Local farm-cut sod, typically 24–48h from harvest. No big-box pallets.'},
            {n:'4',t:'Install Day',d:'Tight seams, brick-laid pattern, rolled and watered before we leave.'},
            {n:'5',t:'30-Day Check',d:'We follow up at 2 weeks and 30 days. Adjust watering. Make sure roots took.'},
          ].map(s=>(
            <div className="step" key={s.n} data-reveal>
              <div className="num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Before/After */}
    <section className="section bg-sand">
      <div className="container">
        <SectionHead eyebrow="Real Jax yards" title="Before. After. No filters." sub="Drag the slider. These are actual Green Yard installs from the last 18 months."/>
        <div className="ba-row">
          <BeforeAfter before="https://images.unsplash.com/photo-1626863905121-3b0c0ed7b94c?w=900&auto=format&fit=crop" after="https://static.wixstatic.com/media/b2bcea8aca9384faead205755744ddbf.jpg"/>
          <BeforeAfter before="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=900&auto=format&fit=crop" after="https://static.wixstatic.com/media/5ca2f829b0d6998db1b8cf62089b1f85.jpg"/>
          <BeforeAfter before="https://images.unsplash.com/photo-1592417817038-d13fd7342605?w=900&auto=format&fit=crop" after="https://static.wixstatic.com/media/11062b_83934f8cd71b47298f466c5f5d47fe40~mv2.jpg"/>
        </div>
      </div>
    </section>

    {/* Service areas */}
    <section className="section bg-mist">
      <div className="container">
        <SectionHead eyebrow="We work all over Jax" title="From the Beaches to the Westside." sub="Click any neighborhood for local sod recommendations and recent installs."/>
        <div className="hood-grid">
          {NEIGHBORHOODS.map(h => <HoodChip key={h.slug} h={h}/>)}
        </div>
      </div>
    </section>

    {/* Pricing */}
    <section className="section bg-sand">
      <div className="container">
        <SectionHead eyebrow="Transparent pricing" title="Fixed-price quotes. No surprises." sub="Ranges below are for installed sod with standard prep. Final price always in writing before we start."/>
        <div className="pricing-grid">
          <div className="price-card" data-reveal>
            <div className="tier">Small</div>
            <h3>Patch &amp; small yard</h3>
            <div className="sqft">Under 2,500 sqft</div>
            <div className="price">$1,400 <small>starting</small></div>
            <div className="from">Bahia / Centipede / St. Aug</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Site measure &amp; sod recommendation</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Old-grass removal (light prep)</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Fresh-cut farm sod</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Watering schedule + 2-week check</li>
            </ul>
            <a className="btn btn-ghost" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>

          <div className="price-card featured" data-reveal>
            <span className="badge">Most popular</span>
            <div className="tier">Mid-size</div>
            <h3>Full front or back</h3>
            <div className="sqft">2,500 – 6,000 sqft</div>
            <div className="price">$3,800 <small>starting</small></div>
            <div className="from">Floratam · CitraBlue · Empire Zoysia</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Full sod-cutter removal &amp; haul-off</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Soil prep, level-grade, amendments</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Premium farm sod, brick-laid</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Irrigation walk-through, 30-day care plan</li>
            </ul>
            <a className="btn btn-primary" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>

          <div className="price-card" data-reveal>
            <div className="tier">Large</div>
            <h3>Whole-yard / new build</h3>
            <div className="sqft">6,000+ sqft</div>
            <div className="price">$7,200 <small>starting</small></div>
            <div className="from">Custom: Zoysia · Bermuda · Floratam</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> New-construction grading available</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Multi-day install schedule</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> Optional bed / tree package</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg> 30-day &amp; 90-day follow-up</li>
            </ul>
            <a className="btn btn-ghost" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>
        </div>
      </div>
    </section>

    {/* Testimonials */}
    <section className="section bg-mist">
      <div className="container">
        <SectionHead eyebrow="What neighbors say" title='"Exceeded my expectations by a lot."' sub="Real reviews from real Jacksonville customers. We did not sweeten a single one."/>
        <div className="testi-grid">
          {TESTIMONIALS.slice(0,4).map((t,i) => <Testimonial key={i} t={t}/>)}
        </div>
        <div style={{textAlign:'center',marginTop:32}}>
          <a className="btn btn-ghost" href="#/reviews">Read all 13+ reviews →</a>
        </div>
      </div>
    </section>

    {/* Why us */}
    <section className="section bg-sand">
      <div className="container">
        <SectionHead eyebrow="Why Green Yard" title="Six reasons folks call us back."/>
        <div className="why-grid">
          {[
            {ico:'M12 .587l3.668 7.431 8.2 1.192-5.934 5.785 1.401 8.166L12 18.896l-7.335 3.865 1.401-8.166L.132 8.81l8.2-1.192z',h:'5.0-star rated',p:'Every review verified. Birdeye, BBB, Facebook, Google — same story.'},
            {ico:'M12 8v4l3 3M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20z',h:'Owner-operated since 2016',p:'Alex is the same person who quotes, schedules, and shows up on install day.'},
            {ico:'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8 z M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',h:'Owner on every job',p:'No subcontractor handoffs. Alex is on-site or on-call all day.'},
            {ico:'M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',h:'Transparent quotes',p:'Fixed price, itemized, in writing. Same number you pay at the end.'},
            {ico:'M3 12l3-3 4 4 8-8 3 3-11 11z',h:'Same-week install',p:'Most projects scheduled within 5 business days. Same-day patches.'},
            {ico:'M21 12c0 5-9 10-9 10S3 17 3 12a9 9 0 0 1 18 0z',h:'30-day care plan',p:'We come back at 2 weeks and 30 days. Watering tweaks, root check.'},
          ].map((w,i)=>(
            <div className="why" key={i} data-reveal>
              <div className="ico"><svg viewBox="0 0 24 24" width="22" height="22" fill={i===0?'currentColor':'none'} stroke="currentColor" strokeWidth="2"><path d={w.ico}/></svg></div>
              <h4>{w.h}</h4>
              <p>{w.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* FAQ */}
    <section className="section bg-mist">
      <div className="container">
        <SectionHead eyebrow="Quick answers" title="Frequently asked, honestly answered."/>
        <div className="faq" data-reveal>
          {FAQ.slice(0,8).map((f,i) => <FaqItem key={i} q={f.q} a={f.a}/>)}
        </div>
        <div style={{textAlign:'center',marginTop:32}}>
          <a className="btn btn-ghost" href="#/faq">See all 25 questions →</a>
        </div>
      </div>
    </section>

    <CTABanner/>
  </div>
);

// ============ SERVICES (overview) ============
const ServicesPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Services'}]} title="What we install" sub="Sod, beds, trees, ornamentals, and full landscape design — for Jacksonville lots, by Jacksonville pros."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="cards cards-2">
          {SERVICES.map(s=>(
            <a key={s.slug} className="card" href={`#/services/${s.slug}`} data-reveal>
              <div className="ico-wrap"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="2"><path d={s.icon}/></svg></div>
              <h3 dangerouslySetInnerHTML={{__html:s.title}}/>
              <p dangerouslySetInnerHTML={{__html:s.desc}}/>
              <span className="more">Learn more</span>
            </a>
          ))}
          {SERVICES_EXTRA.map((s,i)=>(
            <div key={i} className="card" data-reveal>
              <div className="ico-wrap" style={{background:'linear-gradient(135deg,#F2C744,#cfa520)',color:'#2B1D14'}}><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L4 14h5l-3 8 8-10h-4z"/></svg></div>
              <h3 dangerouslySetInnerHTML={{__html:s.title}}/>
              <p dangerouslySetInnerHTML={{__html:s.desc}}/>
              <a className="more" href="#/quote">Get quote</a>
            </div>
          ))}
        </div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ SERVICE DETAIL (Sod Installation as the worked example) ============
const ServiceDetailPage = ({ slug }) => {
  const s = SERVICES.find(x=>x.slug===slug) || SERVICES[0];
  return (
    <div>
      <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Services',href:'#/services'},{label:s.title.replace(/&amp;/g,'&')}]} title={s.title.replace(/&amp;/g,'&')} sub={s.desc.replace(/&amp;/g,'&')}/>
      <section className="section bg-mist">
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:48,alignItems:'start'}}>
            <article data-reveal>
              <Eyebrow>Service overview</Eyebrow>
              <h2 style={{fontSize:'2rem'}}>What's included</h2>
              <p className="lede" style={{marginBottom:24}}>Every Green Yard sod project includes site measurement, soil prep, fresh local-farm sod, brick-laid installation, post-install rolling, watering walkthrough, and a printed 30-day care plan. No subcontractors — Alex runs every job.</p>

              <div className="quick-answer">
                <div className="lbl">Quick answer</div>
                <p>{slug==='sod-installation' ? 'Most Jacksonville sod installs are completed in a single day. Cost runs $0.85–$2.10 per installed square foot in 2026, depending on grass type and prep needs. Free fixed-price quote within 24 hours.' : 'We design and install for Jacksonville-zone-9a conditions: heat, humidity, sandy soil, and HOA realities. Free on-site consult, fixed-price proposal, no subcontractor handoffs.'}</p>
              </div>

              <h3 style={{marginTop:32}}>Our process, step by step</h3>
              <ol style={{paddingLeft:20,lineHeight:1.7,color:'#3d2c1e'}}>
                <li><strong>Free on-site quote.</strong> We measure, recommend a sod cultivar that fits your sun/shade pattern, and email a fixed price within 24 hours.</li>
                <li><strong>Schedule.</strong> Most installs go on the calendar within 5 business days.</li>
                <li><strong>Soil prep.</strong> Sod-cutter removal of old turf, root rake, level grading, lime or compost as needed.</li>
                <li><strong>Sod delivery.</strong> Cut at a North Florida farm 24–48h before install. We unload directly to install location to avoid yellowing.</li>
                <li><strong>Install.</strong> Brick-laid pattern, tight seams, rolled, deep-watered before we leave.</li>
                <li><strong>30-day check-in.</strong> We come back at 2 weeks and 30 days to verify rooting and tweak your watering schedule.</li>
              </ol>

              <h3 style={{marginTop:32}}>Sod options we install</h3>
              <div className="kp">
                <span>St. Augustine — Floratam</span>
                <span>St. Augustine — Palmetto</span>
                <span>St. Augustine — CitraBlue</span>
                <span>Bermuda — Celebration</span>
                <span>Bermuda — TifTuf</span>
                <span>Empire Zoysia</span>
                <span>Emerald Zoysia</span>
                <span>Zeon Zoysia</span>
                <span>Argentine Bahia</span>
                <span>TifBlair Centipede</span>
              </div>

              <h3 style={{marginTop:32}}>Frequently asked</h3>
              <div className="faq">
                {FAQ.slice(0,5).map((f,i)=> <FaqItem key={i} q={f.q} a={f.a}/>)}
              </div>
            </article>

            <aside style={{position:'sticky',top:100}} data-reveal>
              <div className="form-card">
                <h3 style={{fontSize:'1.4rem',marginBottom:6}}>Free on-site quote</h3>
                <p style={{color:'#5a4936',fontSize:'.9rem',marginBottom:18}}>Tell us about the job. We'll be in touch within 24 hours.</p>
                <a className="btn btn-primary" href="#/quote" style={{width:'100%'}}>Start my quote →</a>
                <a className="btn btn-ghost" href="tel:+19043002460" style={{width:'100%',marginTop:10}}><span className="mono">(904) 300-2460</span></a>
                <div style={{marginTop:24,paddingTop:18,borderTop:'1px solid var(--line)'}}>
                  <div style={{fontSize:'.78rem',letterSpacing:'.1em',textTransform:'uppercase',color:'#7a6a55',marginBottom:8}}>Recent neighbors</div>
                  {['Mandarin','Nocatee','Ponte Vedra','Riverside'].map(n => <div key={n} style={{fontSize:'.92rem',color:'var(--moss)',marginBottom:4}}>📍 {n}, FL</div>)}
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
      <CTABanner/>
    </div>
  );
};

// ============ SOD TYPES (overview) ============
const SodTypesPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Sod Types'}]} title="Five sod types we install." sub="Each grass picked for the lot, not the brochure. Click any for cultivar comparisons, watering guides, and pricing."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="sod-grid">{SOD_TYPES.map(s => <SodCard key={s.slug} s={s}/>)}</div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ SOD TYPE DETAIL (St. Augustine as the worked example) ============
const SodTypeDetailPage = ({ slug }) => {
  const s = SOD_TYPES.find(x=>x.slug===slug) || SOD_TYPES[0];
  return (
    <div>
      <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Sod Types',href:'#/sod-types'},{label:s.name}]} title={`${s.name} sod in Jacksonville`} sub={s.best}/>
      <section className="section bg-mist">
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
            <article data-reveal>
              <img src={s.img} alt={`${s.name} sod close-up, freshly installed`} style={{borderRadius:'var(--radius-lg)',marginBottom:24,aspectRatio:'16/9',objectFit:'cover'}}/>
              <Eyebrow>Sod profile</Eyebrow>
              <div className="quick-answer">
                <div className="lbl">Quick answer</div>
                <p>{s.name} thrives in Jacksonville's zone 9a climate when matched to the right lot. Cultivars include {s.cultivars}. Best for: {s.best}</p>
              </div>
              <h3>How it performs</h3>
              <ul style={{lineHeight:1.8}}>
                <li><strong>Sun tolerance:</strong> {s.sun}</li>
                <li><strong>Water needs:</strong> {s.water}</li>
                <li><strong>Foot traffic:</strong> {s.traffic}</li>
                <li><strong>Cultivars we install:</strong> {s.cultivars}</li>
              </ul>
              <h3 style={{marginTop:24}}>When we recommend it</h3>
              <p>We recommend {s.name} for Jacksonville lots where {s.best.toLowerCase()} For the wrong lot — the wrong sun, the wrong water budget — we'll tell you and steer you toward something that survives.</p>
              <h3 style={{marginTop:24}}>FAQ</h3>
              <div className="faq">
                {FAQ.slice(0,4).map((f,i)=> <FaqItem key={i} q={f.q} a={f.a}/>)}
              </div>
            </article>
            <aside style={{position:'sticky',top:100,alignSelf:'start'}} data-reveal>
              <div className="form-card">
                <h3 style={{fontSize:'1.3rem',marginBottom:6}}>Get a {s.name} quote</h3>
                <p style={{color:'#5a4936',fontSize:'.9rem',marginBottom:14}}>Free on-site measure. Fixed price. 24-hour turnaround.</p>
                <a className="btn btn-primary" href="#/quote" style={{width:'100%'}}>Start my quote</a>
              </div>
            </aside>
          </div>
        </div>
      </section>
      <CTABanner/>
    </div>
  );
};

// ============ SERVICE AREAS (overview) ============
const AreasPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Service Areas'}]} title="We work all over Jacksonville." sub="Duval, St. Johns, Clay, and Nassau counties. Click any neighborhood for local sod recommendations and recent installs."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="hood-grid">{NEIGHBORHOODS.map(h => <HoodChip key={h.slug} h={h}/>)}</div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ AREA DETAIL ============
const AreaDetailPage = ({ slug }) => {
  const h = NEIGHBORHOODS.find(x=>x.slug===slug) || NEIGHBORHOODS[0];
  return (
    <div>
      <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Service Areas',href:'#/service-areas'},{label:h.name}]} title={`Sod installation in ${h.name}, FL`} sub={`${h.note} ZIP ${h.zip}. About a ${h.drive} drive from our Falling Waters shop.`}/>
      <section className="section bg-mist">
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
            <article data-reveal>
              <Eyebrow>Local expertise</Eyebrow>
              <h2 style={{fontSize:'2rem'}}>We've installed sod in {h.name} since 2016.</h2>
              <p className="lede">Every neighborhood in Jacksonville has its own sod story — sun pattern, soil, HOA rules, and what the neighbors planted. Here's what we've learned in {h.name}.</p>
              <div className="quick-answer">
                <div className="lbl">Local recommendation</div>
                <p>{h.name === 'Mandarin' && 'For Mandarin oak-shade lots, Palmetto St. Augustine and CitraBlue outperform Floratam. Both handle 4–5 hours of sun, resist gray leaf spot, and root cleanly in our sandy loam.'}{h.name === 'Nocatee' && 'Nocatee HOAs typically approve Empire Zoysia or Floratam St. Augustine. Empire wins for sun-drenched front yards; Floratam wins for partial shade with mature live oaks.'}{h.name === 'Ponte Vedra' && 'For Ponte Vedra estate lawns, premium Zoysia (Emerald or Zeon) reads as a magazine cover all year. Floratam is the budget-conscious alternative on sun-heavy lots.'}{h.name === 'Atlantic Beach' && 'Salt-tolerant Bermuda (Celebration or TifTuf) handles ocean spray and sandy soil better than St. Augustine. Bahia works for low-maintenance large lots.'}{!['Mandarin','Nocatee','Ponte Vedra','Atlantic Beach'].includes(h.name) && `For typical ${h.name} lots, our standard recommendation is Floratam St. Augustine for shade and Empire Zoysia for full sun. We adjust based on your specific yard during the free quote.`}</p>
              </div>
              <h3 style={{marginTop:24}}>Sod types we recommend in {h.name}</h3>
              <div className="kp">
                <span>Floratam St. Augustine</span><span>Palmetto St. Augustine</span><span>CitraBlue St. Augustine</span><span>Empire Zoysia</span>
              </div>
              <h3 style={{marginTop:24}}>{h.name} install map</h3>
              <div style={{borderRadius:'var(--radius-lg)',overflow:'hidden',border:'1px solid var(--line)',aspectRatio:'16/9',background:'linear-gradient(135deg,#dee9d6,#c3d8b6)',display:'grid',placeItems:'center',color:'var(--moss)',fontFamily:'Fraunces, serif',fontSize:'1.2rem',fontStyle:'italic'}}>
                Map of {h.name}, FL — recent Green Yard installs
              </div>
              <p style={{color:'#7a6a55',fontSize:'.85rem',marginTop:8}}>Embedded Google Map placeholder — production deploy replaces with iframe centered on {h.zip}.</p>
            </article>
            <aside style={{position:'sticky',top:100,alignSelf:'start'}} data-reveal>
              <div className="form-card">
                <h3 style={{fontSize:'1.3rem'}}>Quote in {h.name}</h3>
                <p style={{color:'#5a4936',fontSize:'.9rem',marginBottom:14}}>Free on-site, fixed price. {h.drive} drive from our shop.</p>
                <a className="btn btn-primary" href="#/quote" style={{width:'100%'}}>Get my free quote</a>
                <a className="btn btn-ghost" href="tel:+19043002460" style={{width:'100%',marginTop:8}}>Call (904) 300-2460</a>
              </div>
              <div style={{marginTop:20}}>
                <h4 style={{fontSize:'.78rem'}}>Local reviews</h4>
                {TESTIMONIALS.slice(0,2).map((t,i)=>(
                  <div key={i} style={{background:'var(--mist)',padding:18,borderRadius:'var(--radius)',border:'1px solid var(--line)',marginTop:10}}>
                    <Stars n={t.stars}/>
                    <p style={{fontSize:'.92rem',fontFamily:'Fraunces,serif',fontStyle:'italic',margin:'8px 0',color:'var(--moss)'}}>"{t.text}"</p>
                    <div style={{fontSize:'.78rem',color:'#7a6a55'}}>— {t.name}</div>
                  </div>
                ))}
              </div>
            </aside>
          </div>
        </div>
      </section>
      <CTABanner/>
    </div>
  );
};

// ============ PRICING ============
const PricingPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Pricing'}]} title="Transparent sod pricing for Jacksonville." sub="Fixed-price quotes, itemized, in writing. No surprise fees, no upsells, no high-pressure sales."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="pricing-grid">
          <div className="price-card" data-reveal>
            <div className="tier">Small</div><h3>Patch &amp; small yard</h3>
            <div className="sqft">Under 2,500 sqft</div>
            <div className="price">$1,400 <small>starting</small></div>
            <div className="from">Most popular sod: Bahia, Floratam</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Site measure</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Light prep</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Fresh-cut sod</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> 2-week check-in</li>
            </ul>
            <a className="btn btn-ghost" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>
          <div className="price-card featured" data-reveal>
            <span className="badge">Most popular</span>
            <div className="tier">Mid-size</div><h3>Full front or back yard</h3>
            <div className="sqft">2,500 – 6,000 sqft</div>
            <div className="price">$3,800 <small>starting</small></div>
            <div className="from">Floratam · CitraBlue · Empire Zoysia</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Sod-cutter removal</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Soil prep + grade</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Premium sod</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> 30-day plan</li>
            </ul>
            <a className="btn btn-primary" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>
          <div className="price-card" data-reveal>
            <div className="tier">Large</div><h3>Whole yard / new build</h3>
            <div className="sqft">6,000+ sqft</div>
            <div className="price">$7,200 <small>starting</small></div>
            <div className="from">Custom blend</div>
            <ul>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Grading</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Multi-day install</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> Beds / trees option</li>
              <li><svg className="check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg> 90-day plan</li>
            </ul>
            <a className="btn btn-ghost" href="#/quote" style={{width:'100%'}}>Get exact quote</a>
          </div>
        </div>
        <div style={{marginTop:48,maxWidth:760,margin:'48px auto 0',textAlign:'center'}}>
          <Eyebrow>Per-sqft pricing</Eyebrow>
          <h3>2026 Jacksonville sod prices</h3>
          <table style={{width:'100%',borderCollapse:'collapse',marginTop:18,background:'#fff',borderRadius:'var(--radius)',overflow:'hidden',boxShadow:'var(--shadow-sm)'}}>
            <thead style={{background:'var(--moss)',color:'#fff'}}>
              <tr><th style={{padding:14,textAlign:'left'}}>Sod type</th><th style={{padding:14}}>Per sqft (installed)</th><th style={{padding:14}}>2,500 sqft yard</th></tr>
            </thead>
            <tbody>
              {[['Bahia (Argentine)','$0.85 – $1.10','$2,125 – $2,750'],['Centipede (TifBlair)','$0.95 – $1.25','$2,375 – $3,125'],['St. Augustine (Floratam)','$1.20 – $1.55','$3,000 – $3,875'],['St. Augustine (Palmetto / CitraBlue)','$1.40 – $1.75','$3,500 – $4,375'],['Bermuda (Celebration / TifTuf)','$1.30 – $1.70','$3,250 – $4,250'],['Zoysia (Empire / Emerald / Zeon)','$1.65 – $2.10','$4,125 – $5,250']].map((r,i)=>(
                <tr key={i} style={{borderTop:'1px solid var(--line)'}}>
                  <td style={{padding:14,textAlign:'left',fontWeight:500}}>{r[0]}</td>
                  <td style={{padding:14,fontFamily:'JetBrains Mono,monospace'}}>{r[1]}</td>
                  <td style={{padding:14,fontFamily:'JetBrains Mono,monospace',color:'var(--moss)'}}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p style={{fontSize:'.85rem',color:'#7a6a55',marginTop:12}}>Prices include sod, install, brick-laid pattern, post-install rolling, and watering walkthrough. Removal of existing turf and grading priced separately.</p>
        </div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ REVIEWS ============
const ReviewsPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Reviews'}]} title="★ 5.0 / 13+ verified reviews." sub="Real Jacksonville customers. Birdeye, BBB, Facebook, Google. We did not sweeten one."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="reviews-wall">
          {TESTIMONIALS.map((t,i)=>(
            <div key={i} className="review-card" data-reveal>
              <Stars n={t.stars}/>
              <p>"{t.text}"</p>
              <div className="who"><strong>{t.name}</strong> · {t.loc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ ABOUT ============
const AboutPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'About'}]} title="Alex started Green Yard in 2016." sub="Owner-operated. Same person who quotes the job is the one on-site for install day."/>
    <section className="section bg-mist">
      <div className="container">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.3fr',gap:48,alignItems:'start'}}>
          <div data-reveal>
            <img src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=900&auto=format&fit=crop" alt="Alex, owner of Green Yard LLC, on a Jacksonville sod install" style={{borderRadius:'var(--radius-lg)',aspectRatio:'4/5',objectFit:'cover'}}/>
          </div>
          <div data-reveal>
            <Eyebrow>Founder · 2016</Eyebrow>
            <h2>Florida lawns, the way they should be done.</h2>
            <p className="lede">Green Yard started with a sod-cutter, a borrowed trailer, and a belief that homeowners deserved straight answers about what sod survives in Jacksonville. Eight years later, the truck is bigger and the team is small — by design.</p>
            <p>I quote every job myself. I'm on-site for every install. When you call (904) 300-2460, I answer. We don't run high-pressure sales scripts because we don't need to — our work in Mandarin, Nocatee, Ponte Vedra, Riverside, and the Beaches speaks for itself.</p>
            <p>If you want a contractor who will tell you when patching is smarter than re-sod, who actually knows which St. Augustine handles your oak shade, and who shows up when they say they will — that's us.</p>
            <p style={{fontFamily:'Fraunces,serif',fontStyle:'italic',color:'var(--moss)',fontSize:'1.2rem',marginTop:24}}>— Alex<br/><span style={{fontStyle:'normal',fontFamily:'Inter',fontSize:'.85rem',color:'#7a6a55'}}>Owner, Green Yard LLC · Jacksonville, FL</span></p>
          </div>
        </div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ FAQ ============
const FaqPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'FAQ'}]} title="Frequently asked, honestly answered." sub="25 questions covering pricing, scheduling, sod selection, and aftercare. Still curious? Call (904) 300-2460."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="faq" data-reveal>
          {FAQ.map((f,i)=> <FaqItem key={i} q={f.q} a={f.a}/>)}
        </div>
      </div>
    </section>
    <CTABanner/>
  </div>
);

// ============ CONTACT ============
const ContactPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Contact'}]} title="Get in touch." sub="Call, text, email, or send the form. Most quotes go out within 24 hours."/>
    <section className="section bg-mist">
      <div className="container">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:40}}>
          <div data-reveal>
            <h3>Green Yard LLC</h3>
            <div style={{fontFamily:'JetBrains Mono,monospace',color:'var(--moss)',lineHeight:2}}>
              <div>📞 (904) 300-2460</div>
              <div>📍 14490 Falling Waters Dr</div>
              <div style={{marginLeft:24}}>Jacksonville, FL 32258</div>
              <div>🕒 Mon–Fri 7a–6p · Sat 8a–3p</div>
              <div>✉ hello@greenyardllc.com</div>
            </div>
            <div style={{marginTop:24,padding:18,background:'var(--sand)',borderRadius:'var(--radius)'}}>
              <strong style={{color:'var(--moss)'}}>Service area</strong>
              <p style={{fontSize:'.9rem',margin:'6px 0 0',color:'#5a4936'}}>Duval, St. Johns, Clay, Nassau counties. Mandarin, San Marco, Riverside, Avondale, Southside, Arlington, Atlantic Beach, Jacksonville Beach, Ponte Vedra, Nocatee, St. Augustine, Orange Park, Oakleaf, Fleming Island, World Golf Village, Julington Creek.</p>
            </div>
            <div style={{marginTop:20,borderRadius:'var(--radius)',overflow:'hidden',aspectRatio:'4/3',background:'linear-gradient(135deg,#dee9d6,#c3d8b6)',display:'grid',placeItems:'center',color:'var(--moss)',fontFamily:'Fraunces, serif',fontStyle:'italic'}}>14490 Falling Waters Dr, Jacksonville, FL 32258</div>
          </div>
          <ContactForm/>
        </div>
      </div>
    </section>
  </div>
);

// ============ QUOTE (multi-step) ============
const QuoteForm = () => {
  const [step, setStep] = useState(1);
  const [done, setDone] = useState(false);
  const [data, setData] = useState({type:'',sqft:'',timing:'',name:'',phone:'',email:'',address:'',notes:''});
  const set = (k,v) => setData(d => ({...d, [k]:v}));
  if (done) return (
    <div className="form-card" style={{textAlign:'center'}}>
      <div style={{width:64,height:64,margin:'0 auto 18px',borderRadius:'50%',background:'var(--turf)',color:'#fff',display:'grid',placeItems:'center'}}><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg></div>
      <h3>Quote request received.</h3>
      <p style={{color:'#5a4936'}}>Alex will text or email within 24 hours to schedule your free on-site measure. For faster service, call <a href="tel:+19043002460" className="mono">(904) 300-2460</a>.</p>
      <a className="btn btn-ghost" href="#/" style={{marginTop:14}}>Back to home</a>
    </div>
  );
  return (
    <div className="form-card">
      <div style={{display:'flex',gap:8,marginBottom:24}}>
        {[1,2,3].map(n => <div key={n} style={{flex:1,height:6,borderRadius:3,background:n<=step?'var(--turf)':'var(--line)'}}/>)}
      </div>
      {step===1 && <>
        <Eyebrow>Step 1 of 3</Eyebrow>
        <h3>What kind of job?</h3>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:14}}>
          {['Sod installation','Re-sod / replacement','New construction','Landscape design','Beds / mulch','Trees / plants'].map(t=>(
            <button key={t} type="button" onClick={()=>{set('type',t);setStep(2);}} className="btn" style={{justifyContent:'flex-start',background:data.type===t?'var(--moss)':'#fff',color:data.type===t?'#fff':'var(--moss)',border:'1.5px solid var(--line)',padding:'14px 16px',fontWeight:500}}>{t}</button>
          ))}
        </div>
      </>}
      {step===2 && <>
        <Eyebrow>Step 2 of 3</Eyebrow>
        <h3>Tell us about the lot.</h3>
        <div className="form-group"><label>Approx. square footage</label><select value={data.sqft} onChange={e=>set('sqft',e.target.value)}><option value="">Pick one</option><option>Under 2,500 sqft</option><option>2,500 – 6,000 sqft</option><option>6,000 – 10,000 sqft</option><option>10,000+ sqft</option><option>Not sure — please measure</option></select></div>
        <div className="form-group"><label>When do you need it?</label><select value={data.timing} onChange={e=>set('timing',e.target.value)}><option value="">Pick one</option><option>ASAP / this week</option><option>Within 2 weeks</option><option>This month</option><option>Flexible / planning ahead</option></select></div>
        <div style={{display:'flex',gap:10,marginTop:14}}>
          <button className="btn btn-ghost" onClick={()=>setStep(1)}>← Back</button>
          <button className="btn btn-primary" onClick={()=>setStep(3)} style={{flex:1}} disabled={!data.sqft||!data.timing}>Continue →</button>
        </div>
      </>}
      {step===3 && <>
        <Eyebrow>Step 3 of 3</Eyebrow>
        <h3>How can we reach you?</h3>
        <input className="honeypot" tabIndex="-1" autoComplete="off" name="website"/>
        <div className="form-row">
          <div className="form-group"><label>Name</label><input value={data.name} onChange={e=>set('name',e.target.value)} required/></div>
          <div className="form-group"><label>Phone</label><input type="tel" value={data.phone} onChange={e=>set('phone',e.target.value)} required/></div>
        </div>
        <div className="form-group"><label>Email</label><input type="email" value={data.email} onChange={e=>set('email',e.target.value)} required/></div>
        <div className="form-group"><label>Property address</label><input value={data.address} onChange={e=>set('address',e.target.value)} placeholder="Street, neighborhood (e.g. Mandarin)" required/></div>
        <div className="form-group"><label>Anything else?</label><textarea rows="3" value={data.notes} onChange={e=>set('notes',e.target.value)} placeholder="Shaded oaks? HOA? Pets? Photos welcome later."/></div>
        <div style={{display:'flex',gap:10,marginTop:14}}>
          <button className="btn btn-ghost" onClick={()=>setStep(2)}>← Back</button>
          <button className="btn btn-primary" onClick={()=>{if(data.name&&data.phone&&data.email&&data.address)setDone(true);}} style={{flex:1}}>Send my request →</button>
        </div>
      </>}
    </div>
  );
};

const ContactForm = () => {
  const [done, setDone] = useState(false);
  if (done) return <div className="form-card" data-reveal style={{textAlign:'center'}}><h3>Thanks! 🌱</h3><p>We'll be in touch within 24 hours.</p></div>;
  return (
    <form className="form-card" data-reveal onSubmit={e=>{e.preventDefault();setDone(true);}}>
      <h3 style={{fontSize:'1.5rem'}}>Send a message</h3>
      <input className="honeypot" tabIndex="-1" autoComplete="off" name="website"/>
      <div className="form-row">
        <div className="form-group"><label>Name</label><input required/></div>
        <div className="form-group"><label>Phone</label><input type="tel" required/></div>
      </div>
      <div className="form-group"><label>Email</label><input type="email" required/></div>
      <div className="form-group"><label>How can we help?</label><textarea rows="5" required/></div>
      <button className="btn btn-primary" type="submit" style={{width:'100%'}}>Send message</button>
    </form>
  );
};

const QuotePage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Get a Quote'}]} title="Free on-site quote in 24 hours." sub="Three quick questions. We'll measure on-site, recommend a sod, and email you a fixed price."/>
    <section className="section bg-mist">
      <div className="container" style={{maxWidth:680}}>
        <QuoteForm/>
      </div>
    </section>
  </div>
);

// ============ BLOG INDEX ============
const BlogPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Blog'}]} title="The Green Yard journal." sub="Sod, soil, and Jacksonville lawn smarts — from the people who actually install it."/>
    <section className="section bg-sand">
      <div className="container">
        <div className="cards cards-3">
          {POSTS.map(p=>(
            <a key={p.slug} className="card" href={`#/blog/${p.slug}`} data-reveal style={{padding:0,overflow:'hidden'}}>
              <div style={{aspectRatio:'16/10',backgroundImage:`url(${p.img})`,backgroundSize:'cover',backgroundPosition:'center'}}/>
              <div style={{padding:24}}>
                <div style={{fontSize:'.7rem',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--turf)',fontWeight:600,marginBottom:8}}>{p.cat} · {p.read}</div>
                <h3 style={{fontSize:'1.2rem',marginBottom:8}}>{p.title}</h3>
                <p style={{fontSize:'.92rem',color:'#5a4936'}}>{p.desc}</p>
                <span className="more">Read post</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// ============ BLOG POST ============
const BlogPostPage = ({ slug }) => {
  const p = POSTS.find(x=>x.slug===slug) || POSTS[0];
  return (
    <div>
      <PageHero crumbs={[{label:'Home',href:'#/'},{label:'Blog',href:'#/blog'},{label:p.cat}]} title={p.title} sub={p.desc}/>
      <section className="section bg-mist">
        <div className="container" style={{maxWidth:780}}>
          <div style={{display:'flex',gap:16,alignItems:'center',color:'#7a6a55',fontSize:'.85rem',marginBottom:24}}>
            <div style={{display:'flex',alignItems:'center',gap:8}}><div style={{width:36,height:36,borderRadius:'50%',background:'var(--moss)',color:'#fff',display:'grid',placeItems:'center',fontFamily:'Fraunces,serif',fontWeight:700}}>A</div><div><strong style={{color:'var(--moss)',fontWeight:600}}>Alex</strong> · Owner, Green Yard</div></div>
            <span>·</span>
            <span>Last updated {new Date(p.date).toLocaleDateString('en-US',{year:'numeric',month:'long',day:'numeric'})}</span>
            <span>·</span>
            <span>{p.read} read</span>
          </div>
          <img src={p.img} alt={p.title} style={{borderRadius:'var(--radius-lg)',aspectRatio:'16/9',objectFit:'cover',marginBottom:32}}/>
          <article style={{fontSize:'1.05rem',lineHeight:1.7,color:'#3d2c1e'}} itemProp="speakable">
            <p style={{fontSize:'1.18rem',color:'var(--moss)',fontWeight:500}}>{p.excerpt}</p>
            <div className="quick-answer">
              <div className="lbl">Key takeaways</div>
              <ul style={{margin:0,paddingLeft:20}}>
                <li>Jacksonville sod installs in 2026 run $0.85–$2.10 per sqft installed.</li>
                <li>Bahia is cheapest, Zoysia the priciest, St. Augustine sits in the middle.</li>
                <li>Soil prep and removal of existing turf are the biggest swing factors.</li>
                <li>A typical 2,500 sqft yard runs $2,125–$5,250 depending on cultivar.</li>
              </ul>
            </div>

            <h2>How sod pricing actually works in Jacksonville</h2>
            <p>Sod pricing in Northeast Florida is driven by three things: the grass cultivar, the prep work needed to make your soil install-ready, and lot access. A flat, irrigated, fully-prepped 4,000 sqft lot in Nocatee installs faster — and cheaper per square foot — than a sloped, oak-rooted, narrow-access lot in Riverside.</p>
            <p>For 2026, our base rate for installed Floratam St. Augustine on a clean, prepped lot is $1.30/sqft. That number moves up for Zoysia, Palmetto, and CitraBlue, and down for Bahia or Centipede.</p>

            <h2>What's included in a Green Yard quote</h2>
            <ul>
              <li>On-site measurement (square footage and access notes)</li>
              <li>Sod cultivar recommendation matched to your sun pattern</li>
              <li>Removal of existing turf via sod cutter (when needed)</li>
              <li>Soil prep: root rake, level grading, lime/compost amendments</li>
              <li>Fresh-cut farm sod, 24–48h from harvest</li>
              <li>Brick-laid install with tight seams</li>
              <li>Post-install rolling and deep watering</li>
              <li>Printed 30-day watering schedule</li>
              <li>2-week and 30-day check-in visits</li>
            </ul>

            <h2>What's not included (and we'll tell you up front)</h2>
            <p>Irrigation system repairs beyond minor head replacements. Tree removal. Major regrading or fill dirt. New irrigation install. We coordinate with licensed partners for those — but they're separate quotes, not surprise add-ons.</p>

            <h2>How to lower your sod bill without cutting corners</h2>
            <ol>
              <li><strong>Measure honestly.</strong> Smaller scope = smaller bill. Beds count against your sod sqft.</li>
              <li><strong>Pick the right cultivar.</strong> Don't pay Zoysia prices on a shaded lot where Palmetto will thrive.</li>
              <li><strong>Bundle prep.</strong> Doing the front and back at once saves on mobilization.</li>
              <li><strong>Plan around the sod farm.</strong> Mid-week, mid-month installs are easier to schedule.</li>
            </ol>

            <h2>FAQ</h2>
            <div className="faq">
              {FAQ.slice(0,4).map((f,i)=> <FaqItem key={i} q={f.q} a={f.a}/>)}
            </div>

            <div style={{marginTop:32,padding:24,background:'var(--sand)',borderRadius:'var(--radius)',display:'flex',gap:18,alignItems:'center'}}>
              <div style={{width:60,height:60,borderRadius:'50%',background:'var(--moss)',color:'#fff',display:'grid',placeItems:'center',fontFamily:'Fraunces,serif',fontSize:'1.6rem',fontWeight:700,flexShrink:0}}>A</div>
              <div>
                <strong style={{color:'var(--moss)'}}>About the author</strong>
                <p style={{margin:'4px 0 0',fontSize:'.92rem',color:'#5a4936'}}>Alex has been installing sod across Jacksonville since 2016. Green Yard LLC is BBB-listed and 5.0-star rated.</p>
              </div>
            </div>
          </article>
        </div>
      </section>
      <CTABanner/>
    </div>
  );
};

// ============ NOT FOUND ============
const NotFoundPage = () => (
  <div>
    <PageHero crumbs={[{label:'Home',href:'#/'}]} title="Page not found." sub="That link wandered off. Try the home page."/>
    <section className="section bg-mist"><div className="container" style={{textAlign:'center'}}><a className="btn btn-primary" href="#/">Back to home</a></div></section>
  </div>
);

Object.assign(window, { HomePage, ServicesPage, ServiceDetailPage, SodTypesPage, SodTypeDetailPage, AreasPage, AreaDetailPage, PricingPage, ReviewsPage, AboutPage, FaqPage, ContactPage, QuotePage, BlogPage, BlogPostPage, NotFoundPage });
