// Shared.jsx — reusable section building blocks
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function SectionHead({ eyebrow, title, sub, align='split' }){
  if (align === 'center'){
    return (
      <div style={{textAlign:'center', maxWidth:720, margin:'0 auto 60px'}}>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h2 className="display" style={{fontSize:'clamp(36px,4.5vw,60px)', marginTop:12}}>{title}</h2>
        {sub && <p className="text-dim" style={{fontSize:17, marginTop:16}}>{sub}</p>}
      </div>
    );
  }
  return (
    <div className="sec-head">
      <div>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h2>{title}</h2>
      </div>
      {sub && <p>{sub}</p>}
    </div>
  );
}

function Reveal({ children, delay=0 }){
  const ref = useRefS();
  const [seen, setSeen] = useStateS(false);
  useEffectS(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting){ setSeen(true); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className={`reveal ${seen?'in':''}`} style={{transitionDelay: `${delay}ms`}}>{children}</div>;
}

function CTABand({ setPage, title="Ready to cut your power bill?", sub="Get a free, no-obligation quote tailored to your property. Most Christchurch homes see payback within 5–7 years." }){
  return (
    <div className="container">
      <div className="cta-band">
        <div>
          <div className="eyebrow">Get started</div>
          <h2 style={{marginTop:12}}>{title}</h2>
          <p>{sub}</p>
        </div>
        <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
          <button className="btn btn-primary" onClick={() => setPage('contact')}>Book a site visit <Icons.Arrow/></button>
          <button className="btn btn-ghost" onClick={() => setPage('process')}>See how it works</button>
        </div>
      </div>
    </div>
  );
}

function TrustMarquee(){
  const items = ['SEANZ Approved','EWRB Licensed','Sigenergy Certified','Enphase Installer','10-yr Workmanship Warranty','Fronius Approved','BYD Premium','Bank Green Loan Partner'];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((t,i) => (
          <span key={i} className="marquee-item"><span className="marquee-dot"/>{t}</span>
        ))}
      </div>
    </div>
  );
}

window.SectionHead = SectionHead;
window.Reveal = Reveal;
window.CTABand = CTABand;
window.TrustMarquee = TrustMarquee;