/* ─── Hoopooes sections ───────────────────────────────────────
   All content comes from window.HOOPOE_* objects defined in
   index.html. Edit content there — not here.
   ───────────────────────────────────────────────────────────── */

/* ── Nav ──────────────────────────────────────────────────── */

function Nav({ onQuote }) {
  const [open, setOpen] = React.useState(false);

  const close = () => setOpen(false);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const links = [
    { href: '#about', label: 'About' },
    { href: '#services', label: 'Services' },
    { href: '#products', label: 'Products' },
    { href: '#gallery', label: 'Gallery' },
    { href: '#work', label: 'Case Studies' },
    { href: '#faqs', label: 'FAQs' },
    { href: '#contact', label: 'Contact' },
  ];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <Logo/>
        <div className="nav-links">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-cta">
          <button className="btn btn-primary nav-quote-btn" onClick={() => onQuote()}>
            Get a Quote <span className="arr">→</span>
          </button>
          <button
            className={`nav-burger ${open ? 'open' : ''}`}
            onClick={() => setOpen(o => !o)}
            aria-label="Toggle menu"
            aria-expanded={open}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Mobile dropdown menu */}
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        <div className="mobile-menu-links">
          {links.map((l, i) => (
            <a key={l.href} href={l.href} onClick={close} style={{ transitionDelay: `${i * 0.03}s` }}>
              <span className="mm-num">{String(i + 1).padStart(2, '0')}</span>
              {l.label}
            </a>
          ))}
        </div>
        <button className="btn btn-primary mobile-menu-cta" onClick={() => { close(); onQuote(); }}>
          Get a Quote <span className="arr">→</span>
        </button>
      </div>

      {/* Backdrop */}
      {open && <div className="mobile-menu-backdrop" onClick={close}></div>}
    </nav>
  );
}

/* ── Hero ─────────────────────────────────────────────────── */

function Hero({ onQuote, showMarquee }) {
  const H = window.HOOPOE_HERO || {};
  const stats = H.stats || [];
  const marquee = H.marquee || [];

  return (
    <section className="hero" id="top">
      <div className="hero-grid-bg"/>
      <HeroSchematic/>

      <div className="container" style={{position:'relative'}}>
        <h1>
          {H.tag1}<br/>
          {H.tag2}<br/>
          <span className="accent">{H.tagAccent}</span>
        </h1>

        <div className="hero-sub-row">
          <p className="hero-sub">{H.subtitle}</p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={() => onQuote()}>
              {H.ctaPrimary} <span className="arr">→</span>
            </button>
            <a href="#services" className="btn">{H.ctaSecondary}</a>
          </div>
        </div>

        {H.videoUrl && (
          <div className="hero-video">
            {H.videoHeading && <h2 className="hero-video-heading">{H.videoHeading}</h2>}
            <div className="hero-video-frame">
              <iframe
                src={H.videoUrl}
                title="Hoopooes Advanced Materials"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
              ></iframe>
            </div>
          </div>
        )}

        <div className="hero-stats">
          {stats.map((s, i) => (
            <div key={i} className="hero-stat">
              <div className="n">{s.n}<span className="suffix">{s.suffix}</span></div>
              <div className="lbl">{s.label}</div>
            </div>
          ))}
        </div>

        {showMarquee && marquee.length > 0 && (
          <div className="marquee">
            <div className="marquee-track">
              {[...Array(2)].map((_, k) => (
                <React.Fragment key={k}>
                  {marquee.map((m, i) => <span key={i}>{m}</span>)}
                </React.Fragment>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ── About ────────────────────────────────────────────────── */

function About({ onQuote }) {
  const ref = useReveal();
  const A = window.HOOPOE_ABOUT || {};
  const Q = A.quoteCard || {};
  return (
    <section className="section" id="about" ref={ref} data-screen-label="About">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">01 / About Us</div>
            <h2>{A.heading}</h2>
          </div>
          <p className="head-aside">{A.aside}</p>
        </div>

        <div className="about-grid">
          <div className="about-body">
            {(A.paragraphs || []).map((p, i) => <p key={i}>{p}</p>)}
          </div>

          <aside className="about-cta-card corner-frame">
            <div className="label">{Q.eyebrow}</div>
            <h3>{Q.heading}</h3>
            <p>{Q.body}</p>
            <ul className="quick-list">
              {(Q.bullets || []).map((b, i) => <li key={i}>{b}</li>)}
            </ul>
            <button className="btn btn-primary" onClick={() => onQuote()}>
              {Q.ctaLabel || 'Get a Quote'} <span className="arr">→</span>
            </button>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ── Services ─────────────────────────────────────────────── */

const SERVICES = window.HOOPOE_SERVICES || [];

const SERVICE_PLACEHOLDER_KEY = {
  carbon: 'carbon', rubber: 'rubber', carmat: 'carmat', asbestos: 'asbestos',
  eps: 'eps', acrylic: 'acrylic', mdf: 'mdf', aluminium: 'aluminium',
  stainless: 'stainless', cnc: 'cnc', industrial: 'industrial',
};

function Services({ onQuote }) {
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">02 / Our Services</div>
            <h2>One workshop. Every CNC &amp; fabrication need.</h2>
          </div>
          <p className="head-aside">
            We offer one complete solution for all CNC works and customised fabrication — prototypes, industrial parts, decorative panels, signage, packaging, automotive accessories, architectural elements or bulk production.
          </p>
        </div>

        <div className="services-grid services-image-grid">
          {SERVICES.map(s => {
            const placeholderKey = SERVICE_PLACEHOLDER_KEY[s.id] || s.id;
            const Placeholder = SERVICE_IMAGES[placeholderKey];
            return (
              <article key={s.id} className="service-card-img">
                <div className="service-card-img-frame">
                  {s.image
                    ? <img src={s.image} alt={s.title}
                           style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                    : (Placeholder ? <Placeholder/> : null)}
                </div>
                <div className="service-card-body">
                  <div className="service-idx">
                    <span>{s.num}</span>
                    <span className="service-arr">↗</span>
                  </div>
                  <h3>{s.title}</h3>
                  <p>{s.blurb}</p>
                  <div className="service-tags">
                    {(s.tags || []).map(t => <span key={t} className="service-tag">{t}</span>)}
                  </div>
                  <button className="service-quote-btn" onClick={() => onQuote(s.id)}>
                    Get a Quote <span className="arr">→</span>
                  </button>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── Products (separate from Services) ────────────────────── */

function Products({ onQuote }) {
  const P = window.HOOPOE_PRODUCTS || {};
  const items = P.items || [];
  if (items.length === 0) return null;
  return (
    <section className="section" id="products" data-screen-label="Products">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">04 / Product Range</div>
            <h2>{P.heading || 'Our product range.'}</h2>
          </div>
          <p className="head-aside">{P.aside}</p>
        </div>

        <div className="services-grid services-image-grid">
          {items.map((s, i) => (
            <article key={s.id || i} className="service-card-img">
              <div className="service-card-img-frame">
                {s.image
                  ? <img src={s.image} alt={s.title}
                         style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                  : null}
              </div>
              <div className="service-card-body">
                <div className="service-idx">
                  <span>{String(i + 1).padStart(2, '0')}</span>
                  <span className="service-arr">↗</span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.blurb}</p>
                <div className="service-tags">
                  {(s.tags || []).map(t => <span key={t} className="service-tag">{t}</span>)}
                </div>
                <button className="service-quote-btn" onClick={() => onQuote(s.id)}>
                  Enquire Now <span className="arr">→</span>
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Design & Development Support ─────────────────────────── */

function DesignSupport() {
  const D = window.HOOPOE_DESIGN || {};
  return (
    <section className="section" id="design" data-screen-label="Design & Development">
      <div className="container">
        <div className="design-grid">
          <div>
            <div className="eyebrow" style={{
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
              color:'var(--accent)', textTransform:'uppercase', marginBottom:16,
              display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:22, height:1, background:'var(--accent)'}}></span>
              05 / Design &amp; Development
            </div>
            <h2 style={{
              fontFamily:'var(--serif)', fontWeight:700,
              fontSize:'clamp(36px, 4vw, 56px)', lineHeight:1.05,
              letterSpacing:'-0.025em', margin:'0 0 28px', maxWidth:'18ch',
            }}>
              {D.heading}
            </h2>
            {(D.paragraphs || []).map((p, i) => (
              <p key={i} style={{ color:'var(--text-2)', fontSize:17, lineHeight:1.7, margin:'0 0 20px', maxWidth:'48ch' }}>
                {p}
              </p>
            ))}
          </div>

          <div className="design-steps">
            {(D.steps || []).map((s) => (
              <div className="design-step" key={s.n}>
                <div className="design-step-n">{s.n}</div>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Why Choose Us ────────────────────────────────────────── */

function WhyChooseUs() {
  const W = window.HOOPOE_WHY || {};
  return (
    <section className="section" id="why" data-screen-label="Why Choose Us">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">06 / Why Choose Us</div>
            <h2>{W.heading}</h2>
          </div>
          <p className="head-aside">{W.aside}</p>
        </div>

        <div className="why-grid">
          {(W.items || []).map((w, i) => (
            <div className="why-item" key={i}>
              <div className="why-check" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
              </div>
              <div>
                <h4>{w.t}</h4>
                <p>{w.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA band ───────────────────────────────────────── */

function FinalCTA({ onQuote }) {
  const C = window.HOOPOE_CTA || {};
  return (
    <section className="cta-band" id="cta">
      <div className="container">
        <div className="cta-inner">
          <div>
            <div className="eyebrow" style={{
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
              color:'#1a1a1a', textTransform:'uppercase', marginBottom:16,
              display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:22, height:1, background:'#1a1a1a'}}></span>
              {C.eyebrow}
            </div>
            <h2>{C.heading}</h2>
            <p>{C.body}</p>
          </div>
          <div className="cta-actions">
            <button className="btn btn-dark" onClick={() => onQuote()}>
              {C.primary} <span className="arr">→</span>
            </button>
            <a href="#contact" className="btn btn-dark-outline">{C.secondary}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Case Studies ─────────────────────────────────────────── */

const CASES = window.HOOPOE_CASES || [];

function CaseStudies({ count = 4 }) {
  const items = CASES.slice(0, count);
  return (
    <section className="section" id="work" data-screen-label="Case Studies">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">07 / Selected Work</div>
            <h2>Case studies, signed off and shipped.</h2>
          </div>
          <p className="head-aside">
            A sample of projects across our four largest sectors. All numbers verified by client sign-off.
          </p>
        </div>

        <div className="cases-grid">
          {items.map((c, i) => {
            const PlaceholderImg = CASE_IMAGES[i % CASE_IMAGES.length];
            return (
              <article className="case-card" key={i}>
                <div className="case-img-wrap">
                  <div className="case-img">
                    {c.image
                      ? <img src={c.image} alt={c.title}
                             style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                      : <PlaceholderImg/>}
                  </div>
                </div>
                <div className="case-body">
                  <div className="case-meta">
                    <span className="sector">{c.sector}</span>
                    <span>{c.code} / 2026</span>
                  </div>
                  <h3>{c.title}</h3>
                  <p>{c.blurb}</p>
                  <div className="case-stats">
                    {(c.stats || []).map((s, j) => (
                      <div className="case-stat" key={j}>
                        <div className="n">{s.n}</div>
                        <div className="l">{s.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── Clients ──────────────────────────────────────────────── */

const CLIENTS = window.HOOPOE_CLIENTS || [];

function Clients() {
  const T = window.HOOPOE_TESTIMONIAL || {};
  return (
    <section className="client-band" id="clients" data-screen-label="Clients">
      <div className="container" style={{ padding: '100px 32px' }}>
        <div className="section-head">
          <div>
            <div className="eyebrow">08 / Clients &amp; Partners</div>
            <h2>Trusted by teams across the Gulf.</h2>
          </div>
          <p className="head-aside">
            From government primes to retail studios — long-term partnerships are how we work best.
          </p>
        </div>

        <div className="client-grid">
          {CLIENTS.map((c, i) => (
            <div className="client-cell" key={i}>
              {c.logo ? (
                <img src={c.logo} alt={c.n} className="client-logo-img"/>
              ) : (
                <div>
                  {c.n}
                  <span className="tiny">{c.s}</span>
                </div>
              )}
            </div>
          ))}
        </div>

        {T.quote && (
          <div className="testimonial">
            <blockquote>
              <span className="mark">"</span>{T.quote}<span className="mark">"</span>
            </blockquote>
            <div className="testimonial-foot">
              <span><strong>{T.author}</strong>{T.company ? ` · ${T.company}` : ''}</span>
              <span>{T.reference}</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ── FAQs ─────────────────────────────────────────────────── */

const FAQS = window.HOOPOE_FAQS || [];

function FAQs() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="section" id="faqs" data-screen-label="FAQs">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow" style={{
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
              color:'var(--accent)', textTransform:'uppercase', marginBottom:16,
              display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:22, height:1, background:'var(--accent)'}}></span>
              09 / FAQs
            </div>
            <h2 style={{
              fontFamily:'var(--serif)', fontWeight:700,
              fontSize:'clamp(36px, 4vw, 56px)', lineHeight:1.05,
              letterSpacing:'-0.025em', margin:'0 0 24px',
            }}>
              Common questions, answered straight.
            </h2>
            <p style={{ color:'var(--text-2)', fontSize:15, lineHeight:1.65, maxWidth:'34ch' }}>
              Don't see your question? Ask in the contact form — most are answered within the hour during workshop hours.
            </p>
          </div>

          <div className="faq-list">
            {FAQS.map((f, i) => (
              <div className={`faq-item ${openIdx === i ? 'open' : ''}`} key={i}>
                <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                  <span className="idx">{String(i+1).padStart(2,'0')}</span>
                  <span style={{ flex: 1 }}>{f.q}</span>
                  <span className="plus" aria-hidden="true"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Contact ──────────────────────────────────────────────── */

function Contact({ onQuote }) {
  const C = window.HOOPOE_CONTACT || {};
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', company: '',
    service: '', message: '', file: null,
  });
  const [drag, setDrag] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');

  const onDrop = (e) => {
    e.preventDefault(); setDrag(false);
    const file = e.dataTransfer?.files?.[0];
    if (file) setForm(f => ({ ...f, file }));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setSending(true);
    try {
      const fd = new FormData();
      fd.append('name', form.name);
      fd.append('email', form.email);
      fd.append('phone', form.phone);
      fd.append('company', form.company);
      fd.append('service', form.service);
      fd.append('message', form.message);
      if (form.file) fd.append('file', form.file);

      // "formAction" can be set in HOOPOE_CONTACT (index.html). Defaults to send.php
      const action = C.formAction || 'send.php';
      const res = await fetch(action, { method: 'POST', body: fd });
      let data = {};
      try { data = await res.json(); } catch (_) {}

      if (res.ok && data.ok) {
        setSent(true);
      } else {
        setError(data.error || ('Could not send right now. Please email us directly at ' + (C.email || 'hello@hoopooes.ae') + '.'));
      }
    } catch (err) {
      setError('Could not connect to the mail service. Please email us directly at ' + (C.email || 'hello@hoopooes.ae') + '.');
    } finally {
      setSending(false);
    }
  };

  // Workshop address can contain "\n" for line breaks
  const workshopLines = (C.workshop || '').split('\n');

  return (
    <section className="section" id="contact" data-screen-label="Contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="eyebrow" style={{
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
              color:'var(--accent)', textTransform:'uppercase',
              display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:22, height:1, background:'var(--accent)'}}></span>
              10 / Get in Touch
            </div>
            <h2>{C.heading}</h2>
            <p>{C.blurb}</p>

            <div className="contact-rows">
              <div className="contact-row">
                <div className="k">Workshop</div>
                <div className="v">
                  {workshopLines.map((ln, i) => (
                    <React.Fragment key={i}>
                      {ln}{i < workshopLines.length - 1 ? <br/> : null}
                    </React.Fragment>
                  ))}
                </div>
              </div>
              <div className="contact-row">
                <div className="k">Phone</div>
                <div className="v"><a href={C.phoneHref}>{C.phone}</a></div>
              </div>
              <div className="contact-row">
                <div className="k">Email</div>
                <div className="v"><a href={C.emailHref}>{C.email}</a></div>
              </div>
              <div className="contact-row">
                <div className="k">Hours</div>
                <div className="v">{C.hours}</div>
              </div>
            </div>

            <div style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => onQuote()}>
                Or use the Quote Wizard <span className="arr">→</span>
              </button>
            </div>
          </div>

          <form className="contact-form corner-frame" onSubmit={onSubmit}>
            {sent ? (
              <div className="form-success">
                <h3>Message received.</h3>
                <p>Thanks {form.name || '—'}. We'll reply to {form.email || 'your email'} within one business day.</p>
                <button type="button" className="btn btn-ghost" style={{marginTop:16}} onClick={() => { setSent(false); setForm({name:'',email:'',phone:'',company:'',service:'',message:'',file:null}); }}>
                  Send another →
                </button>
              </div>
            ) : (
              <>
                <div className="row-2">
                  <div className="field">
                    <label>Full Name<span className="req">*</span></label>
                    <input className="input" required value={form.name}
                           onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
                           placeholder="Your name"/>
                  </div>
                  <div className="field">
                    <label>Company</label>
                    <input className="input" value={form.company}
                           onChange={(e) => setForm(f => ({ ...f, company: e.target.value }))}
                           placeholder="Company"/>
                  </div>
                </div>
                <div className="row-2">
                  <div className="field">
                    <label>Email<span className="req">*</span></label>
                    <input className="input" type="email" required value={form.email}
                           onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
                           placeholder="you@company.com"/>
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input className="input" type="tel" value={form.phone}
                           onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
                           placeholder="+971 …"/>
                  </div>
                </div>
                <div className="field">
                  <label>Service needed</label>
                  <select className="select" value={form.service}
                          onChange={(e) => setForm(f => ({ ...f, service: e.target.value }))}>
                    <option value="">Select a service…</option>
                    {SERVICES.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
                    <option value="multi">Multiple services / unsure</option>
                  </select>
                </div>
                <div className="field">
                  <label>Project Brief<span className="req">*</span></label>
                  <textarea className="textarea" required value={form.message}
                            onChange={(e) => setForm(f => ({ ...f, message: e.target.value }))}
                            placeholder="What are you building? Dimensions, materials, quantities, deadlines…"/>
                </div>

                <div className="field">
                  <label>Drawings / Sketches</label>
                  <label className={`file-drop ${drag ? 'drag' : ''}`}
                         onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
                         onDragLeave={() => setDrag(false)}
                         onDrop={onDrop}>
                    {form.file
                      ? <>📎 Attached<span className="name">{form.file.name}</span></>
                      : <>Drop CAD / PDF / image here, or click to browse<br/>
                          <span style={{color:'var(--text-4)', fontSize:10}}>.STEP · .DWG · .DXF · .PDF · .PNG · .JPG</span></>}
                    <input type="file" hidden onChange={(e) => setForm(f => ({ ...f, file: e.target.files?.[0] }))}/>
                  </label>
                </div>

                {error && (
                  <div style={{
                    border: '1px solid var(--red)',
                    background: 'rgba(239,68,68,0.1)',
                    color: '#fca5a5',
                    padding: '12px 16px',
                    fontSize: 13,
                    lineHeight: 1.5,
                    marginBottom: 16,
                  }}>
                    {error}
                  </div>
                )}

                <div className="form-submit">
                  <span className="legal">By submitting, you agree to our reply terms.</span>
                  <button className="btn btn-primary" type="submit" disabled={sending}
                          style={{ opacity: sending ? 0.6 : 1, cursor: sending ? 'wait' : 'pointer' }}>
                    {sending ? 'Sending…' : <>Send Enquiry <span className="arr">→</span></>}
                  </button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ───────────────────────────────────────────────── */

function Footer() {
  const F = window.HOOPOE_FOOTER || {};
  const C = window.HOOPOE_CONTACT || {};
  // Columns are editable from index.html (F.columns). If not provided,
  // these sensible defaults are used.
  const columns = F.columns || [
    { title: "Services", links: SERVICES.slice(0, 6).map(s => ({ label: s.title, href: "#services" })) },
    { title: "Company",  links: [
      { label: "About", href: "#about" },
      { label: "Case Studies", href: "#work" },
      { label: "Clients", href: "#clients" },
      { label: "FAQs", href: "#faqs" },
    ]},
    { title: "Contact", links: [
      { label: C.email, href: C.emailHref },
      { label: C.phone, href: C.phoneHref },
      { label: "Visit the workshop", href: "#contact" },
    ]},
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo/>
            <p style={{marginTop:16}}>{F.about}</p>
          </div>
          {columns.map((col, i) => (
            <div className="footer-col" key={i}>
              <h5>{col.title}</h5>
              {(col.links || []).map((ln, j) => (
                <a key={j} href={ln.href}>{ln.label}</a>
              ))}
            </div>
          ))}
        </div>

        <div className="footer-bottom">
          <span>{F.copyright}</span>
          <span>{F.license}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, About, Services, Products, DesignSupport, WhyChooseUs, CaseStudies, Clients, FAQs, Contact, FinalCTA, Footer, WhatsAppButton });

/* ── Floating WhatsApp button ─────────────────────────────── */

function WhatsAppButton() {
  const W = window.HOOPOE_WHATSAPP || {};
  if (W.show === false || !W.link) return null;

  const href = W.message
    ? `${W.link}${W.link.includes('?') ? '&' : '?'}text=${encodeURIComponent(W.message)}`
    : W.link;

  return (
    <a
      className="whatsapp-fab"
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={W.label || 'Chat on WhatsApp'}
    >
      <svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
        <path fill="currentColor" d="M16.04 4C9.93 4 4.98 8.95 4.98 15.06c0 2.13.6 4.12 1.64 5.81L4.8 27.2l6.5-1.7a11 11 0 0 0 4.74 1.07h.01c6.11 0 11.06-4.95 11.06-11.06C27.11 8.95 22.15 4 16.04 4zm0 20.2h-.01a9.1 9.1 0 0 1-4.64-1.27l-.33-.2-3.86 1.01 1.03-3.76-.22-.34a9.07 9.07 0 0 1-1.39-4.84c0-5.02 4.09-9.1 9.12-9.1 2.43 0 4.72.95 6.44 2.67a9.04 9.04 0 0 1 2.67 6.44c0 5.03-4.09 9.11-9.12 9.11zm5-6.82c-.27-.14-1.62-.8-1.87-.89-.25-.09-.43-.14-.62.14-.18.27-.71.89-.87 1.07-.16.18-.32.2-.59.07-.27-.14-1.16-.43-2.2-1.36-.81-.72-1.36-1.62-1.52-1.89-.16-.27-.02-.42.12-.55.12-.12.27-.32.41-.48.14-.16.18-.27.27-.46.09-.18.05-.34-.02-.48-.07-.14-.62-1.49-.85-2.04-.22-.53-.45-.46-.62-.47l-.53-.01c-.18 0-.48.07-.73.34-.25.27-.96.94-.96 2.29 0 1.35.98 2.66 1.12 2.84.14.18 1.93 2.95 4.68 4.14.65.28 1.16.45 1.56.58.66.21 1.25.18 1.72.11.52-.08 1.62-.66 1.85-1.3.23-.64.23-1.18.16-1.3-.07-.11-.25-.18-.52-.32z"/>
      </svg>
      <span className="whatsapp-fab-label">{W.label || 'Chat on WhatsApp'}</span>
    </a>
  );
}