// Nexsol — site shell. Shared tokens + components for every page.
// Brand colours and typography per Brand Style Guide (Brand Style Guide.pdf):
//   #0B0D10 ink · #3A4350 slate · #FF8A1F orange · #B7E3F6 sky · #F5F1E8 cream · #FFFFFF white
//   Font: Instrument Sans only (400/500/600/700).

const { useState, useEffect, useRef } = React;

const WH = {
  // Primary palette
  ink:        '#0B0D10',
  slate:      '#3A4350',
  orange:     '#FF8A1F',
  sky:        '#B7E3F6',
  cream:      '#F5F1E8',
  white:      '#FFFFFF',

  // Legacy aliases so existing pages still resolve. Mapped to brand-exact values.
  sand:       '#FFFFFF',
  paper:      '#FFFFFF',
  clay:       '#FF8A1F',
  terracotta: '#FF8A1F',
  sun:        '#FF8A1F',
  forest:     '#0B0D10',
  earth:      '#0B0D10',
  moss:       '#3A4350',
  muted:      '#3A4350',

  // Brand gradient (sky → cream → orange) per p22 of the brand guide.
  gradient:   'linear-gradient(135deg,#FF8A1F 0%,#F5F1E8 50%,#B7E3F6 100%)',

  // Typography — Instrument Sans only.
  display:    '"Instrument Sans", system-ui, sans-serif',
  sans:       '"Instrument Sans", system-ui, sans-serif',
  hand:       '"Instrument Sans", system-ui, sans-serif',
};
window.WH = WH;

// ── Cottage illustration ──
// Sky uses brand sky-blue; roof brand orange; walls cream; ground slate.
function WHCottage({ panels=0, size=220, style }) {
  // Lay panels in a grid centred on the roof ridge (apex 110,55; base
  // 55,100 → 165,100) so every panel sits inside the triangle. Rows fill
  // 4-wide from the bottom up; any remainder forms a shorter, centred top row.
  const COLS=4, PW=7, PH=4, GAP=2, CELL_H=6, CX=110, Y_BOTTOM=90;
  const placed = Array.from({length:panels},(_,i)=>{
    const row=Math.floor(i/COLS), col=i%COLS;
    const inRow=Math.min(COLS, panels-row*COLS);
    const rowW=inRow*PW+(inRow-1)*GAP;
    return { x: CX-rowW/2+col*(PW+GAP), y: Y_BOTTOM-row*CELL_H };
  });
  return (
    <svg viewBox="0 0 220 180" width={size} style={{ display:'block', ...style }}>
      <rect width="220" height="180" fill={WH.sky}/>
      <path d="M0 140 Q 60 120, 120 135 T 220 130 L 220 180 L 0 180 Z" fill={WH.slate} opacity="0.4"/>
      <path d="M0 155 Q 80 145, 160 150 T 220 152 L 220 180 L 0 180 Z" fill={WH.slate} opacity="0.85"/>
      <rect x="60" y="100" width="100" height="55" fill={WH.cream} stroke={WH.ink} strokeWidth="1.5"/>
      <polygon points="55,100 110,55 165,100" fill={WH.orange} stroke={WH.ink} strokeWidth="1.5"/>
      <rect x="100" y="125" width="20" height="30" fill={WH.ink}/>
      <circle cx="116" cy="140" r="1.2" fill={WH.cream}/>
      <rect x="72" y="115" width="18" height="18" fill={WH.sky} stroke={WH.ink} strokeWidth="1.5"/>
      <line x1="81" y1="115" x2="81" y2="133" stroke={WH.ink} strokeWidth="1"/>
      <line x1="72" y1="124" x2="90" y2="124" stroke={WH.ink} strokeWidth="1"/>
      <rect x="130" y="115" width="18" height="18" fill={WH.sky} stroke={WH.ink} strokeWidth="1.5"/>
      <line x1="139" y1="115" x2="139" y2="133" stroke={WH.ink} strokeWidth="1"/>
      <line x1="130" y1="124" x2="148" y2="124" stroke={WH.ink} strokeWidth="1"/>
      <rect x="135" y="65" width="10" height="20" fill={WH.cream} stroke={WH.ink} strokeWidth="1.5"/>
      {placed.map((p,i)=>(
        <rect key={i} x={p.x} y={p.y} width={PW} height={PH} fill={WH.ink} opacity="0.9" style={{ transition:'all .35s', transitionDelay:`${i*60}ms` }}/>
      ))}
    </svg>
  );
}
window.WHCottage = WHCottage;

// ── Sun-stamp brand accent — radial gradient orange disc with rays ──
function SunStamp({ size=140, style }) {
  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size} style={{ display:'block', ...style }}>
      <defs>
        <radialGradient id="ss-fill" cx="0" cy="0" r="50">
          <stop offset="0%" stopColor="#FFB060"/>
          <stop offset="60%" stopColor={WH.orange}/>
          <stop offset="100%" stopColor="#D86A1A"/>
        </radialGradient>
      </defs>
      {Array.from({length:18}).map((_,i)=>{
        const a=(i/18)*Math.PI*2;
        return <line key={i} x1={Math.cos(a)*42} y1={Math.sin(a)*42} x2={Math.cos(a)*88} y2={Math.sin(a)*88} stroke={WH.orange} strokeWidth="3" strokeLinecap="round"/>;
      })}
      <circle r="40" fill="url(#ss-fill)"/>
    </svg>
  );
}
window.SunStamp = SunStamp;

// ── Callout card (brand-clean replacement for the speech bubble) ──
function WHBubble({ children, side='left', style }) {
  return (
    <div style={{ background:WH.cream, padding:'16px 20px', borderRadius:14, border:`1px solid ${WH.ink}15`,
      fontFamily:WH.sans, fontSize:14, fontWeight:500, color:WH.ink, lineHeight:1.5, letterSpacing:'-0.01em', maxWidth:'92%',
      alignSelf:side==='right'?'flex-end':'flex-start', ...style }}>{children}</div>
  );
}
window.WHBubble = WHBubble;

// ── Brand-clean underline — orange highlight instead of squiggle SVG ──
function HandUnderline({ children, color=WH.orange }) {
  return <span style={{ color, fontWeight:'inherit' }}>{children}</span>;
}
window.HandUnderline = HandUnderline;

// ── Brand-clean label — uppercase eyebrow instead of rotated hand-script ──
function HandNote({ children, color=WH.orange, size=22, style }) {
  const fontSize = size >= 22 ? 13 : 11;
  return <span style={{ fontFamily:WH.sans, fontSize, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', color, display:'inline-block', ...style }}>{children}</span>;
}
window.HandNote = HandNote;

// ── Header / nav ──
const NAV = [
  { href:'/', label:'Home' },
  { href:'/residential/', label:'For your home' },
  { href:'/business/', label:'For business' },
  { href:'/agriculture/', label:'Agriculture' },
  { href:'/developers/', label:'New builds' },
  { href:'/process/', label:'How it works' },
  { href:'/grants/', label:'Grants' },
  { href:'/projects/', label:'Real homes' },
  { href:'/about/', label:'About' },
];

function WHHeader({ current='/' }) {
  const [open, setOpen] = useState(false);
  const siteConfig = useSiteConfig();
  const general = siteConfig.content.general || {};
  const contact = (siteConfig.content.marketing && siteConfig.content.marketing.home.finalCta) || {};
  const phone = contact.phone || '06752300';
  useEffect(()=>{document.body.style.overflow = open?'hidden':'';return ()=>{document.body.style.overflow='';};},[open]);
  return (
    <header style={{ background:WH.cream, borderBottom:`1px solid ${WH.ink}15`, position:'sticky', top:0, zIndex:50 }}>
      <div className="wh-header-row" style={{ maxWidth:1280, margin:'0 auto', padding:'16px 32px', display:'flex', justifyContent:'space-between', alignItems:'center', gap:24 }}>
        <a href="/" style={{ textDecoration:'none' }}><SiteLogo url={general.logoUrl} alt={general.logoAlt || 'NexSol'} height={22} color={WH.ink}/></a>
        <nav className="wh-nav-desktop" style={{ display:'flex', gap:24, alignItems:'center' }}>
          {NAV.slice(1,9).map(n=>(
            <a key={n.href} href={n.href} style={{
              fontFamily:WH.sans, fontSize:14, fontWeight: current===n.href?700:500,
              letterSpacing:'-0.01em',
              color: current===n.href?WH.orange:WH.ink, textDecoration:'none',
              borderBottom: current===n.href?`2px solid ${WH.orange}`:'2px solid transparent',
              paddingBottom:2,
            }}>{n.label}</a>
          ))}
        </nav>
        <div style={{ display:'flex', gap:10, alignItems:'center' }}>
          <a href={`tel:${phone}`} className="wh-phone" style={{ fontFamily:WH.sans, fontSize:13, fontWeight:600, color:WH.ink, textDecoration:'none', letterSpacing:'-0.01em' }}>{phone}</a>
          <a href="/quote/" style={{ padding:'11px 18px', background:WH.orange, color:WH.ink, borderRadius:12, fontFamily:WH.sans, fontSize:13, fontWeight:700, letterSpacing:'-0.01em', textDecoration:'none', whiteSpace:'nowrap', display:'inline-flex', alignItems:'center', gap:8 }}>
            <NexsolMark size={14} color={WH.ink}/>Get a quote
          </a>
          <button onClick={()=>setOpen(o=>!o)} className="wh-burger" aria-label="Menu" style={{ display:'none', background:'transparent', border:0, padding:8, cursor:'pointer' }}>
            <svg width="22" height="16" viewBox="0 0 22 16"><line x1="0" y1="2" x2="22" y2="2" stroke={WH.ink} strokeWidth="2"/><line x1="0" y1="8" x2="22" y2="8" stroke={WH.ink} strokeWidth="2"/><line x1="0" y1="14" x2="22" y2="14" stroke={WH.ink} strokeWidth="2"/></svg>
          </button>
        </div>
      </div>
      {open && (
        <div className="wh-nav-mobile" style={{ background:WH.cream, borderTop:`1px solid ${WH.ink}15`, padding:'12px 32px 20px' }}>
          {NAV.map(n=>(
            <a key={n.href} href={n.href} style={{ display:'block', padding:'10px 0', fontFamily:WH.sans, fontSize:16, fontWeight:current===n.href?700:500, letterSpacing:'-0.01em', color:current===n.href?WH.orange:WH.ink, textDecoration:'none', borderBottom:`1px solid ${WH.ink}10` }}>{n.label}</a>
          ))}
        </div>
      )}
      <style>{`
        @media (max-width: 1100px) {
          .wh-nav-desktop { display: none !important; }
          .wh-burger { display: inline-flex !important; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
        }
        @media (max-width: 900px) {
          .wh-phone { display: none !important; }
          .wh-header-row { padding: 14px 20px !important; gap: 12px !important; }
        }
      `}</style>
    </header>
  );
}
window.WHHeader = WHHeader;

// ── Footer ──
function WHFooter() {
  const siteConfig = useSiteConfig();
  const general = siteConfig.content.general || {};
  const contact = (siteConfig.content.marketing && siteConfig.content.marketing.home.finalCta) || {};
  const phone = contact.phone || '06752300';
  const email = contact.email || 'info@nexsol.ie';
  return (
    <footer style={{ background:WH.ink, color:WH.cream, padding:'72px 32px 32px', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, background:'transparent', pointerEvents:'none' }}/>
      <div style={{ position:'relative', maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:40, marginBottom:48 }} className="wh-footer-grid">
          <div>
            <SiteLogo url={general.logoUrl} alt={general.logoAlt || 'NexSol'} height={26} color={WH.cream}/>
            <div style={{ fontFamily:WH.sans, fontSize:13, fontWeight:600, color:WH.orange, marginTop:20, letterSpacing:'0.12em', textTransform:'uppercase' }}>
              Counties we cover
            </div>
            <div style={{ fontFamily:WH.sans, fontSize:14, fontWeight:400, color:`${WH.cream}99`, marginTop:14, lineHeight:1.55, letterSpacing:'-0.01em', maxWidth:320 }}>
              We install across Tipperary, Limerick, Clare, Galway, Waterford, Laois, Offaly &amp; Kilkenny.
            </div>
          </div>
          <div>
            <div style={{ fontFamily:WH.sans, fontSize:11, color:WH.orange, textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:14, fontWeight:600 }}>Solar for…</div>
            {[['Your home','/residential/'],['Your business','/business/'],['Agriculture','/agriculture/'],['New builds','/developers/']].map(([l,h])=>(<a key={h} href={h} style={{ display:'block', fontFamily:WH.sans, fontSize:14, fontWeight:500, color:WH.cream, textDecoration:'none', padding:'5px 0', letterSpacing:'-0.01em' }}>{l}</a>))}
          </div>
          <div>
            <div style={{ fontFamily:WH.sans, fontSize:11, color:WH.orange, textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:14, fontWeight:600 }}>About</div>
            {[['How it works','/process/'],['Grants','/grants/'],['Refer a friend','/refer/'],['Real homes','/projects/'],['Our team','/about/'],['FAQ','/faq/']].map(([l,h])=>(<a key={h} href={h} style={{ display:'block', fontFamily:WH.sans, fontSize:14, fontWeight:500, color:WH.cream, textDecoration:'none', padding:'5px 0', letterSpacing:'-0.01em' }}>{l}</a>))}
          </div>
          <div>
            <div style={{ fontFamily:WH.sans, fontSize:11, color:WH.orange, textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:14, fontWeight:600 }}>Say hello</div>
            <a href={`mailto:${email}`} style={{ display:'block', fontFamily:WH.sans, fontSize:14, fontWeight:500, color:WH.cream, textDecoration:'none', padding:'5px 0', letterSpacing:'-0.01em' }}>{email}</a>
            <a href={`tel:${phone}`} style={{ display:'block', fontFamily:WH.sans, fontSize:14, fontWeight:500, color:WH.cream, textDecoration:'none', padding:'5px 0', letterSpacing:'-0.01em' }}>{phone}</a>
            <div style={{ fontFamily:WH.sans, fontSize:13, fontWeight:400, color:`${WH.cream}99`, padding:'5px 0', letterSpacing:'-0.01em' }}>Nenagh, Co. Tipperary</div>
          </div>
        </div>
        <div style={{ borderTop:`1px solid ${WH.cream}20`, paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12, fontFamily:WH.sans, fontSize:12, fontWeight:500, color:`${WH.cream}99`, letterSpacing:'-0.01em' }}>
          <div>© 2026 Nexsol Energy Ltd · Co. Reg 814099 · SEAI Registered Installer</div>
          <div style={{ display:'flex', gap:20 }}>
            <a href="#" style={{ color:`${WH.cream}99`, textDecoration:'none' }}>Privacy</a>
            <a href="#" style={{ color:`${WH.cream}99`, textDecoration:'none' }}>Terms</a>
            <a href="#" style={{ color:`${WH.cream}99`, textDecoration:'none' }}>Complaints</a>
            <a href="/admin" style={{ color:`${WH.cream}55`, textDecoration:'none' }}>Staff login</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:900px){.wh-footer-grid{grid-template-columns:1fr 1fr !important;gap:32px !important;}}@media (max-width:600px){.wh-footer-grid{grid-template-columns:1fr !important;}}`}</style>
    </footer>
  );
}
window.WHFooter = WHFooter;

// ── Compact quote teaser ──
function WHQuoteTeaser({ title="Get a real quote in 30 seconds.", cta="Start the quote" }) {
  return (
    <div style={{ background:WH.ink, color:WH.cream, borderRadius:24, padding:32, position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, background:'transparent', pointerEvents:'none' }}/>
      <div style={{ position:'relative' }}>
        <div style={{ fontFamily:WH.sans, fontSize:11, fontWeight:600, color:WH.orange, letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:12 }}>30 seconds · free</div>
        <h3 style={{ fontFamily:WH.sans, fontSize:32, fontWeight:700, lineHeight:0.95, letterSpacing:'-0.03em', margin:'0 0 20px' }}>{title}</h3>
        <a href="/quote/" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:WH.orange, color:WH.ink, borderRadius:12, fontFamily:WH.sans, fontSize:14, fontWeight:700, letterSpacing:'-0.01em', textDecoration:'none' }}><NexsolMark size={16} color={WH.ink}/>{cta}</a>
      </div>
    </div>
  );
}
window.WHQuoteTeaser = WHQuoteTeaser;

// ── Generic page wrapper ──
function WHPage({ current, children }) {
  return (
    <div style={{ background:WH.cream, color:WH.ink, fontFamily:WH.sans, minHeight:'100vh', overflowX:'hidden' }}>
      <style>{`
        html,body{overflow-x:hidden;}
        a:focus-visible,button:focus-visible{outline:2px solid ${WH.orange};outline-offset:3px;border-radius:6px;}
        @media (max-width:720px){
          section{padding:56px 20px !important;}
          .wh-mobile-stack{grid-template-columns:1fr !important;gap:24px !important;}
        }
        @media (max-width:480px){
          section{padding:48px 18px !important;}
        }
      `}</style>
      <WHHeader current={current}/>
      {children}
      <WHFooter/>
    </div>
  );
}
window.WHPage = WHPage;

// ── Section + typography helpers ──
function Section({ bg=WH.cream, color=WH.ink, children, style }) {
  return (
    <section style={{ background:bg, color, padding:'88px 32px', ...style }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>{children}</div>
    </section>
  );
}
window.Section = Section;

function Eyebrow({ children, color=WH.orange, style }) {
  return <div style={{ fontFamily:WH.sans, fontSize:13, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', color, marginBottom:14, ...style }}>{children}</div>;
}
window.Eyebrow = Eyebrow;

function H2({ children, style }) {
  return <h2 style={{ fontFamily:WH.sans, fontSize:'clamp(40px,5.5vw,72px)', fontWeight:700, lineHeight:0.95, letterSpacing:'-0.035em', margin:'0 0 24px', color:WH.ink, ...style }}>{children}</h2>;
}
window.H2 = H2;

function BodyText({ children, style }) {
  return <p style={{ fontFamily:WH.sans, fontSize:17, fontWeight:400, lineHeight:1.55, letterSpacing:'-0.02em', color:WH.slate, maxWidth:640, margin:'0 0 20px', ...style }}>{children}</p>;
}
window.BodyText = BodyText;