// Shared: Navbar, Footer, WhatsAppFab, TourModal, DibberMark (heart/clover svg), helpers.

const { useState, useEffect, useRef } = React;

// Brand heart/clover mark \u2014 simplified version of the logo's symbol.
// Two stacked rounded shapes: small dot above, a larger soft \u201cheart-blob\u201d below.
function DibberMark({ size = 28, color = '#13452A' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="11" cy="9" r="6" fill={color} />
      <path d="M27 6 C32 6 38 10 38 17 L38 28 C38 33 34 38 28 38 L18 38 C12 38 8 33 8 27 C8 21 12 17 18 17 L19 17 C19 11 23 6 27 6 Z" fill={color} />
    </svg>
  );
}

// A larger \u201chero clover\u201d frame for masking imagery
function CloverFrame({ children, size = 480 }) {
  const id = 'clover-mask-' + Math.random().toString(36).slice(2, 8);
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" style={{ display: 'block' }}>
      <defs>
        <clipPath id={id} clipPathUnits="objectBoundingBox">
          <path d="M0.5,0.04 C0.62,0.04 0.74,0.12 0.78,0.22 C0.86,0.18 0.94,0.22 0.96,0.32 C0.99,0.44 0.92,0.52 0.84,0.54 C0.92,0.62 0.96,0.74 0.86,0.84 C0.76,0.94 0.62,0.92 0.54,0.84 C0.5,0.94 0.38,0.98 0.28,0.92 C0.16,0.84 0.14,0.7 0.22,0.6 C0.1,0.58 0.04,0.46 0.1,0.36 C0.16,0.24 0.3,0.22 0.36,0.3 C0.4,0.16 0.5,0.04 0.5,0.04 Z" />
        </clipPath>
      </defs>
      <foreignObject x="0" y="0" width="200" height="200" clipPath={`url(#${id})`}>
        <div xmlns="http://www.w3.org/1999/xhtml" style={{ width: '100%', height: '100%' }}>
          {children}
        </div>
      </foreignObject>
    </svg>
  );
}

const NAV_ITEMS = [
  { id: 'home',       label: 'Home' },
  { id: 'approach',   label: 'Nordic Approach' },
  { id: 'programmes', label: 'Programmes' },
  { id: 'branches',   label: 'Branches' },
  { id: 'admissions', label: 'Admissions' },
];

function Navbar({ route, navigate, openTour }) {
  return (
    <div className="nav-wrap">
      <div className="nav-inner">
        <a className="nav-logo" href="#" onClick={(e) => { e.preventDefault(); navigate({ name: 'home' }); }} aria-label="Dibber UAE \u2014 home">
          <img src="media/dibber-logo.webp" alt="Dibber \u2014 Scandinavian Education" />
        </a>
        <nav className="nav-links" aria-label="Primary">
          {NAV_ITEMS.map(n => (
            <a key={n.id} href="#" className={'nav-link' + (route.name === n.id ? ' active' : '')}
               onClick={(e) => { e.preventDefault(); navigate({ name: n.id }); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <div className="nav-phone">
            <span>Toll-free</span>
            <strong>800-DIBBER</strong>
          </div>
          <button className="btn btn-sun" onClick={openTour}>Book a tour</button>
        </div>
      </div>
    </div>
  );
}

function Footer({ navigate, openTour }) {
  return (
    <footer style={{ background: 'var(--dibber-green)', color: 'var(--cream)', padding: '72px 0 32px' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <DibberMark size={36} color="#FBF8F0" />
              <div className="serif" style={{ fontSize: 28, color: 'var(--cream)', fontWeight: 600 }}>Dibber</div>
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--sprout)', marginTop: 8, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Scandinavian Education \u00b7 UAE</div>
            <p style={{ marginTop: 20, fontSize: 15, color: 'rgba(251,248,240,0.78)', maxWidth: 340 }}>
              An authentic Norwegian/Nordic early-learning programme \u2014 in the UAE since 2014. Space, time, and a big heart.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <button className="btn btn-sun" onClick={openTour}>Book a tour</button>
              <a className="btn btn-ghost-light" href="https://wa.link/95m057" target="_blank" rel="noopener">WhatsApp us</a>
            </div>
          </div>

          <FooterCol title="Visit">
            <FooterLink onClick={() => navigate({ name: 'branches' })}>All branches</FooterLink>
            {BRANCHES.map(b => (
              <FooterLink key={b.id} onClick={() => navigate({ name: 'branch', id: b.id })}>{b.name}</FooterLink>
            ))}
            <FooterLink onClick={() => navigate({ name: 'branches' })}>Khalifa City A, Abu Dhabi</FooterLink>
          </FooterCol>

          <FooterCol title="Learn">
            <FooterLink onClick={() => navigate({ name: 'approach' })}>The Nordic approach</FooterLink>
            <FooterLink onClick={() => navigate({ name: 'approach' })}>Seven characters</FooterLink>
            <FooterLink onClick={() => navigate({ name: 'programmes' })}>Programmes &amp; ages</FooterLink>
            <FooterLink onClick={() => navigate({ name: 'admissions' })}>Admissions</FooterLink>
            <FooterLink onClick={() => navigate({ name: 'programmes' })}>Camps</FooterLink>
          </FooterCol>

          <FooterCol title="Contact">
            <FooterLink as="a" href="tel:800342237">800-DIBBER (800 342237)</FooterLink>
            <FooterLink as="a" href="https://wa.link/95m057" target="_blank">WhatsApp us</FooterLink>
            <FooterLink as="a" href="mailto:familyrelations@dibber.com">familyrelations@dibber.com</FooterLink>
            <FooterLink as="a" href="https://instagram.com/dibberuae" target="_blank">Instagram \u2192 @dibberuae</FooterLink>
            <FooterLink as="a" href="https://facebook.com/dibberuae" target="_blank">Facebook \u2192 /dibberuae</FooterLink>
          </FooterCol>
        </div>

        <hr style={{ height: 1, background: 'rgba(251,248,240,0.15)', border: 0, margin: '48px 0 24px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, fontSize: 13, color: 'rgba(251,248,240,0.6)' }}>
          <div>
            \u00a9 {new Date().getFullYear()} Dibber UAE. KHDA-licensed Early Childhood Centres in Dubai. ADEK in Abu Dhabi.
          </div>
          <div style={{ display: 'flex', gap: 18 }}>
            <span>EN</span>
            <span style={{ opacity: 0.6 }}>\u0639\u0631\u0628\u064a</span>
            <span style={{ opacity: 0.6 }}>\u0420\u0423</span>
            <span style={{ opacity: 0.6 }}>\u4e2d\u6587</span>
          </div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, children }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--sprout)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>{children}</div>
    </div>
  );
}
function FooterLink({ as = 'button', children, onClick, ...rest }) {
  const Tag = as;
  const props = as === 'button'
    ? { onClick, style: { background: 'transparent', color: 'rgba(251,248,240,0.85)', textAlign: 'left', padding: 0, fontSize: 15 } }
    : { ...rest, style: { color: 'rgba(251,248,240,0.85)', fontSize: 15 } };
  return <Tag {...props}>{children}</Tag>;
}

// Floating WhatsApp + Call buttons
function FabStack() {
  return (
    <div className="fab-stack">
      <a className="fab whatsapp" href="https://wa.link/95m057" target="_blank" rel="noopener" aria-label="WhatsApp Dibber UAE">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.8-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.6-.7 1.9-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.5-.3zM12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.5A10 10 0 1 0 12 2zm5.9 14.2c-.2.6-1.3 1.2-1.8 1.3-.5.1-1.1.1-1.7-.1-.4-.1-1-.3-1.6-.6-2.9-1.2-4.9-4.2-5-4.4-.1-.2-1.2-1.5-1.2-3 0-1.4.7-2.1 1-2.4.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5.3.6.9 2 1 2.1.1.2.1.4 0 .6-.1.2-.2.3-.3.5l-.4.5c-.1.2-.3.4-.1.7.2.3.9 1.5 1.9 2.4 1.3 1.1 2.4 1.4 2.7 1.6.3.1.5.1.7-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.7.8 1.9.9.3.1.5.2.5.3.1.1.1.5-.1 1.3z"/>
        </svg>
      </a>
      <a className="fab" href="tel:800342237" aria-label="Call 800-DIBBER">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
          <path d="M20 15.5c-1.2 0-2.5-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.4-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z"/>
        </svg>
      </a>
    </div>
  );
}

// Tour modal \u2014 prefillable from any branch CTA
function TourModal({ open, close, prefill }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    branch: prefill?.branch || '',
    parentName: '', email: '', phone: '',
    childName: '', dob: '',
    date: '', timeSlot: 'morning',
    notes: '',
  });
  useEffect(() => {
    if (open) { setStep(1); setData(d => ({ ...d, branch: prefill?.branch || '' })); }
  }, [open, prefill]);
  if (!open) return null;
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const branchObj = BRANCHES.find(b => b.id === data.branch);
  return (
    <div className="modal-back" onClick={close}>
      <div className="modal-panel" onClick={e => e.stopPropagation()}>
        <div style={{ padding: '24px 28px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <DibberMark size={28} />
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Book a visit</div>
              <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600 }}>{step === 3 ? 'You\u2019re booked in' : 'Find a tour time'}</div>
            </div>
          </div>
          <button onClick={close} aria-label="Close" style={{ width: 36, height: 36, borderRadius: 18, background: 'var(--sand)' }}>\u2715</button>
        </div>
        <div style={{ padding: '24px 28px' }}>
          {step !== 3 && (
            <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
              {[1,2].map(s => (
                <div key={s} style={{ height: 4, flex: 1, borderRadius: 2, background: s <= step ? 'var(--dibber-green)' : 'var(--line)' }} />
              ))}
            </div>
          )}
          {step === 1 && (
            <div className="col gap-4">
              <p className="muted" style={{ fontSize: 14 }}>A 45-minute walkaround with the branch manager. Bring your child if you like.</p>
              <div>
                <label>Preferred branch</label>
                <select value={data.branch} onChange={e => set('branch', e.target.value)}>
                  <option value="">Select a branch\u2026</option>
                  {BRANCHES.map(b => <option key={b.id} value={b.id}>{b.name} \u2014 {b.area}</option>)}
                  <option value="khalifa-city-a">Khalifa City A \u2014 Abu Dhabi</option>
                </select>
              </div>
              <div className="grid grid-2">
                <div>
                  <label>Preferred date</label>
                  <input type="date" value={data.date} onChange={e => set('date', e.target.value)} />
                </div>
                <div>
                  <label>Time</label>
                  <select value={data.timeSlot} onChange={e => set('timeSlot', e.target.value)}>
                    <option value="morning">Morning (9 \u2013 11 AM)</option>
                    <option value="midday">Midday (11 AM \u2013 1 PM)</option>
                    <option value="afternoon">Afternoon (2 \u2013 4 PM)</option>
                  </select>
                </div>
              </div>
              <div>
                <label>Child\u2019s age / date of birth (optional)</label>
                <input type="text" placeholder="e.g. 2 years 3 months, or 12 Mar 2023" value={data.dob} onChange={e => set('dob', e.target.value)} />
                <div className="field-hint">We\u2019ll route you to the right room \u2014 infant, toddler, preschool or KG.</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
                <button className="btn btn-primary" disabled={!data.branch} onClick={() => setStep(2)} style={!data.branch ? { opacity: 0.5, cursor: 'not-allowed' } : {}}>Continue \u2192</button>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="col gap-4">
              <p className="muted" style={{ fontSize: 14 }}>
                Booking a tour at <strong style={{ color: 'var(--dibber-green)' }}>{branchObj?.name || 'Khalifa City A'}</strong>.
                We\u2019ll only use this to contact you about the visit.
              </p>
              <div className="grid grid-2">
                <div>
                  <label>Your name</label>
                  <input type="text" value={data.parentName} onChange={e => set('parentName', e.target.value)} />
                </div>
                <div>
                  <label>Phone (+971)</label>
                  <input type="tel" placeholder="e.g. +971 5\u2026" value={data.phone} onChange={e => set('phone', e.target.value)} />
                </div>
              </div>
              <div>
                <label>Email</label>
                <input type="email" value={data.email} onChange={e => set('email', e.target.value)} />
              </div>
              <div>
                <label>Anything we should know? (optional)</label>
                <textarea rows="3" placeholder="e.g. specific allergies, second child, preferred days\u2026" value={data.notes} onChange={e => set('notes', e.target.value)}></textarea>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
                <button className="btn btn-ghost" onClick={() => setStep(1)}>\u2190 Back</button>
                <button className="btn btn-primary" onClick={() => setStep(3)}>Request my tour</button>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="col gap-4 center" style={{ paddingTop: 8, paddingBottom: 20 }}>
              <div style={{ width: 84, height: 84, borderRadius: 42, background: 'var(--sprout-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
                <DibberMark size={44} />
              </div>
              <h3 className="serif">Tusen takk \u2014 thank you!</h3>
              <p className="muted" style={{ maxWidth: 380, margin: '0 auto' }}>
                The {branchObj?.name || 'Abu Dhabi'} team will be in touch within one working day to confirm your visit.
                For anything urgent, message us on WhatsApp.
              </p>
              <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 12 }}>
                <a className="btn btn-primary" href="https://wa.link/95m057" target="_blank" rel="noopener">Open WhatsApp</a>
                <button className="btn btn-ghost" onClick={close}>Done</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Generic image-with-fallback (some photos may not exist; show striped placeholder)
function SafeImg({ src, alt, label, style }) {
  const [ok, setOk] = useState(true);
  if (!src || !ok) {
    return (
      <div className="img-stripe" style={style}>
        <span>{label || 'image placeholder'}</span>
      </div>
    );
  }
  return <img src={src} alt={alt || ''} style={style} onError={() => setOk(false)} loading="lazy" />;
}

// Section header (eyebrow + title + lead)
function SectionHead({ eyebrow, title, lead, align = 'left', onDark }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 880, margin: align === 'center' ? '0 auto' : 0 }}>
      {eyebrow && <div className={'eyebrow' + (onDark ? ' on-dark' : '')}>{eyebrow}</div>}
      <h2 className="serif" style={{ marginTop: 12 }}>{title}</h2>
      {lead && <p className="lead" style={{ marginTop: 20, color: onDark ? 'rgba(251,248,240,0.8)' : undefined }}>{lead}</p>}
    </div>
  );
}

Object.assign(window, { DibberMark, CloverFrame, Navbar, Footer, FabStack, TourModal, SafeImg, SectionHead, NAV_ITEMS });