// Green Yard — shared React components
const { useState, useEffect, useRef } = React;
const GY = window.GY;

// Icon helper
const Icon = ({ d, size=24, ...rest }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    <path d={d}/>
  </svg>
);

const Stars = ({ n=5 }) => <span className="stars" aria-label={`${n} of 5 stars`}>{'★'.repeat(n)}</span>;

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

const SectionHead = ({ eyebrow, title, sub, align='center' }) => (
  <div className={`section-head ${align==='left'?'left':''}`} data-reveal>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    <h2>{title}</h2>
    {sub && <p>{sub}</p>}
  </div>
);

// Service card
const ServiceCard = ({ s }) => (
  <a 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" strokeLinecap="round" strokeLinejoin="round"><path d={s.icon}/></svg>
    </div>
    <h3 dangerouslySetInnerHTML={{__html:s.title}}/>
    <p dangerouslySetInnerHTML={{__html:s.desc}}/>
    <span className="more">Learn more</span>
  </a>
);

// Sod card
const SodCard = ({ s }) => (
  <a className="sod-card" href={`#/sod-types/${s.slug}`} data-reveal>
    <div className="img" style={{backgroundImage:`url(${s.img})`}} role="img" aria-label={`${s.name} sod close-up`}>
      <span className="name">{s.name}</span>
    </div>
    <div className="body">
      <div className="specs">
        <div className="spec"><div className="lbl">Sun</div><div className="val">{s.sun}</div></div>
        <div className="spec"><div className="lbl">Water</div><div className="val">{s.water}</div></div>
        <div className="spec"><div className="lbl">Traffic</div><div className="val">{s.traffic}</div></div>
        <div className="spec"><div className="lbl">Cultivars</div><div className="val">{s.cultivars.split('·')[0].trim()}</div></div>
      </div>
      <div className="best"><strong>Best for:</strong> {s.best}</div>
    </div>
  </a>
);

// Before/After slider
const BeforeAfter = ({ before, after, label }) => {
  const ref = useRef(null);
  const [pct, setPct] = useState(50);
  const drag = useRef(false);
  const move = (e) => {
    if (!drag.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = (e.touches?e.touches[0].clientX:e.clientX) - rect.left;
    setPct(Math.max(2, Math.min(98, (x / rect.width) * 100)));
  };
  useEffect(()=>{
    const up = () => drag.current = false;
    window.addEventListener('mouseup', up); window.addEventListener('touchend', up);
    window.addEventListener('mousemove', move); window.addEventListener('touchmove', move, {passive:true});
    return () => { window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); };
  },[]);
  return (
    <div className="ba" ref={ref}
      onMouseDown={e=>{drag.current=true;move(e);}}
      onTouchStart={e=>{drag.current=true;move(e);}}
      data-reveal>
      <div className="layer" style={{backgroundImage:`url(${before})`}}/>
      <div className="layer after" style={{backgroundImage:`url(${after})`, clipPath:`inset(0 0 0 ${pct}%)`}}/>
      <span className="lbl before">Before</span>
      <span className="lbl after">After</span>
      <div className="handle" style={{left:`${pct}%`}}/>
    </div>
  );
};

// Testimonial
const Testimonial = ({ t }) => (
  <div className="testi" data-reveal>
    <Stars n={t.stars}/>
    <blockquote>"{t.text}"</blockquote>
    <div className="who">
      <div className="avatar">{t.name.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
      <div>
        <div className="who-name">{t.name}</div>
        <div className="who-loc">{t.loc}</div>
      </div>
    </div>
  </div>
);

// Hood chip
const HoodChip = ({ h }) => (
  <a className="hood" href={`#/service-areas/${h.slug}`} data-reveal>
    <div className="pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> {h.zip}</div>
    <strong>{h.name}</strong>
    <small>{h.note}</small>
  </a>
);

// FAQ item
const FaqItem = ({ q, a }) => (
  <details>
    <summary>{q}</summary>
    <div className="answer"><p>{a}</p></div>
  </details>
);

// Page hero
const PageHero = ({ crumbs, title, sub }) => (
  <section className="page-hero">
    <div className="container">
      <div className="crumbs">{crumbs.map((c,i)=>(
        <React.Fragment key={i}>
          {i>0 && <span> · </span>}
          {c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}
        </React.Fragment>
      ))}</div>
      <h1>{title}</h1>
      {sub && <p>{sub}</p>}
    </div>
  </section>
);

// Final CTA banner
const CTABanner = () => (
  <section className="cta-banner">
    <div className="container">
      <div data-reveal>
        <h2>Ready for the best lawn on your block?</h2>
        <p>Free on-site quote. Same-week install on most jobs. No high-pressure sales — Alex measures, recommends a sod, and emails you a fixed price.</p>
        <div className="actions">
          <a className="btn btn-primary" href="#/quote">Get my free quote</a>
          <a className="btn btn-ghost" href="tel:+19043002460" style={{borderColor:'rgba(255,255,255,0.4)',color:'#fff'}}>Call (904) 300-2460</a>
        </div>
      </div>
      <div className="stats-col" data-reveal>
        <div className="stat"><strong>5.0 ★</strong><span>13+ verified reviews</span></div>
        <div className="stat"><strong>2016</strong><span>Owner-operated since</span></div>
        <div className="stat"><strong>10+</strong><span>Jax neighborhoods served</span></div>
        <div className="stat"><strong>24h</strong><span>Quote turnaround</span></div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Icon, Stars, Eyebrow, SectionHead, ServiceCard, SodCard, BeforeAfter, Testimonial, HoodChip, FaqItem, PageHero, CTABanner });