/* shared.jsx — Nav, Footer, common components — Claremont Orthodontics */

const { useState, useEffect, useRef } = React;

/* ===================================================================
   Router (hash-based)
   =================================================================== */

const PAGES = [
  { id: 'home',         label: 'Home',            nav: false },
  { id: 'about',        label: 'About',           nav: true },
  { id: 'services',     label: 'Treatment',       nav: true, dropdown: true },
  { id: 'new-patients', label: 'New Patients',     nav: true },
  { id: 'referral',     label: 'Refer a Patient', nav: true },
  { id: 'contact',      label: 'Contact',         nav: true },
  { id: 'braces' },
  { id: 'ceramic' },
  { id: 'aligners' },
  { id: 'preteen' },
  { id: 'adult' },
  { id: 'dr-stewart' },
  { id: 'dr-kylie' },
  { id: 'referral' },
  { id: 'assessment' },
];

function useRoute() {
  const get = () => (window.location.hash.replace('#/', '') || 'home');
  const [route, setRoute] = useState(get());
  useEffect(() => {
    const onHash = () => {
      setRoute(get());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}

function go(id) {
  window.location.hash = '#/' + id;
}

/* ===================================================================
   Brand wordmark
   =================================================================== */

function Brand({ onClick }) {
  return (
    <a className="brand" href="#/home" onClick={(e) => { e.preventDefault(); onClick && onClick(); go('home'); }}>
      <img src="images/logo.png" alt="Claremont Orthodontics" style={{ height: 48, width: 'auto' }} />
      <span>
        <span className="brand__name">Claremont Orthodontics</span>
        <span className="brand__sub">Specialist Orthodontist &middot; Claremont</span>
      </span>
    </a>
  );
}

/* ===================================================================
   Nav
   =================================================================== */

function Nav({ route }) {
  const [open, setOpen] = useState(false);
  const [mobile, setMobile] = useState(false);
  const dropRef = useRef(null);

  useEffect(() => {
    const onDoc = (e) => {
      if (dropRef.current && !dropRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const serviceLinks = [
    { col: 'Fixed Appliances', items: [
      { id: 'braces',  name: 'Traditional Braces' },
      { id: 'ceramic', name: 'Ceramic Braces' },
    ]},
    { col: 'Aligners & Growth', items: [
      { id: 'aligners', name: 'Clear Aligners' },
      { id: 'preteen',  name: 'Pre-Teen & Early Intervention' },
      { id: 'adult',    name: 'Adult Orthodontics' },
    ]},
  ];

  const teamLinks = [
    { id: 'dr-stewart', name: 'Dr Stewart Denize' },
    { id: 'dr-kylie',   name: 'Dr Kylie Lewis' },
  ];

  const serviceRoutes = ['services','braces','ceramic','aligners','preteen','adult'];

  const link = (p) => {
    if (p.dropdown) {
      return (
        <div className="dropdown" ref={dropRef} key={p.id}>
          <button
            className="nav__link"
            aria-expanded={open}
            aria-current={serviceRoutes.includes(route) ? 'true' : 'false'}
            onClick={() => setOpen(o => !o)}
          >
            {p.label}
            <span className="nav__chev">&#9662;</span>
          </button>
          <div className="dropdown__panel" data-open={open} style={{ width: 720, gridTemplateColumns: '1fr 1fr 0.8fr' }}>
            {serviceLinks.map(col => (
              <div key={col.col}>
                <div className="dropdown__col-head">{col.col}</div>
                {col.items.map(it => (
                  <a key={it.id} className="dropdown__item"
                     href={'#/' + it.id}
                     onClick={() => setOpen(false)}>
                    {it.name}
                  </a>
                ))}
              </div>
            ))}
            <div>
              <div className="dropdown__col-head">Our Team</div>
              {teamLinks.map(it => (
                <a key={it.id} className="dropdown__item"
                   href={'#/' + it.id}
                   onClick={() => setOpen(false)}>
                  {it.name}
                </a>
              ))}
              <a className="dropdown__item" style={{ fontSize: 16, color: 'var(--ink-mute)' }}
                 href="#/about"
                 onClick={() => setOpen(false)}>
                About the practice &rarr;
              </a>
            </div>
            <a className="dropdown__all"
               href="#/services"
               onClick={() => setOpen(false)}>
              <span>All treatment options</span>
              <span>&rarr;</span>
            </a>
          </div>
        </div>
      );
    }
    return (
      <a key={p.id}
         className="nav__link"
         href={'#/' + p.id}
         aria-current={route === p.id ? 'true' : 'false'}>
        {p.label}
      </a>
    );
  };

  return (
    <header className="nav">
      <div className="nav__inner">
        <Brand />
        <nav className="nav__links" aria-label="Primary">
          {PAGES.filter(p => p.nav).map(link)}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <a className="nav__phone" href="tel:0862887188">(08) 6288 7188</a>
          <a className="nav__cta" href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>
            Book Free Consultation*
          </a>
          <button className="nav__toggle" onClick={() => setMobile(true)}>
            Menu <span style={{ fontSize: 14 }}>&#9776;</span>
          </button>
        </div>
      </div>
      {mobile && (
        <div className="mobile-sheet">
          <div className="mobile-sheet__top">
            <Brand onClick={() => setMobile(false)} />
            <button className="nav__toggle" onClick={() => setMobile(false)}>Close &#10005;</button>
          </div>
          {PAGES.filter(p => p.nav && !p.dropdown).map(p => (
            <a key={p.id} className="mobile-sheet__link" href={'#/' + p.id} onClick={() => setMobile(false)}>{p.label}</a>
          ))}
          <div className="dropdown__col-head" style={{ marginTop: 32 }}>Treatment Options</div>
          {[...serviceLinks[0].items, ...serviceLinks[1].items, { id: 'services', name: 'All treatment options →' }].map(it => (
            <a key={it.id} className="mobile-sheet__link" style={{ fontSize: 22 }} href={'#/' + it.id} onClick={() => setMobile(false)}>{it.name}</a>
          ))}
          <div className="dropdown__col-head" style={{ marginTop: 32 }}>Our Team</div>
          {teamLinks.map(it => (
            <a key={it.id} className="mobile-sheet__link" style={{ fontSize: 22 }} href={'#/' + it.id} onClick={() => setMobile(false)}>{it.name}</a>
          ))}
          <div style={{ marginTop: 36 }}>
            <a className="cta" href="#/contact" onClick={() => setMobile(false)}>
              Book Free Consultation* <span className="cta__arrow">&rarr;</span>
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

/* ===================================================================
   Footer
   =================================================================== */

function Footer() {
  return (
    <footer className="footer">
      <div className="shell shell--wide">
        <div className="footer__grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--gold)' }}>Claremont Orthodontics</div>
            <p className="footer__tag">
              World-class orthodontics.<br/>Family-owned.
            </p>
            <a className="cta" href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>
              Book your free consultation* <span className="cta__arrow">&rarr;</span>
            </a>
          </div>
          <div className="footer__col">
            <h5>Visit</h5>
            <p>7/355 Stirling Highway<br/>Claremont WA 6010</p>
            <p style={{ marginTop: 16 }}>
              <a href="https://maps.google.com/?q=7/355+Stirling+Highway+Claremont+WA+6010" target="_blank" rel="noreferrer">Get directions &rarr;</a>
            </p>
          </div>
          <div className="footer__col">
            <h5>Contact</h5>
            <a href="tel:0862887188">(08) 6288 7188</a>
            <a href="mailto:hello@claremontorthodontics.com.au">hello@claremontorthodontics.com.au</a>
            <p style={{ marginTop: 16 }}>Mon&ndash;Fri 8am&ndash;5pm</p>
          </div>
          <div className="footer__col">
            <h5>Practice</h5>
            <a href="#/about" onClick={(e) => { e.preventDefault(); go('about'); }}>About</a>
            <a href="#/services" onClick={(e) => { e.preventDefault(); go('services'); }}>Treatment Options</a>
            <a href="#/new-patients" onClick={(e) => { e.preventDefault(); go('new-patients'); }}>New Patients</a>
            <a href="#/dr-stewart" onClick={(e) => { e.preventDefault(); go('dr-stewart'); }}>Dr Stewart Denize</a>
            <a href="#/dr-kylie" onClick={(e) => { e.preventDefault(); go('dr-kylie'); }}>Dr Kylie Lewis</a>
            <a href="#/referral" onClick={(e) => { e.preventDefault(); go('referral'); }}>Refer a patient</a>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>&copy; {new Date().getFullYear()} Claremont Orthodontics &middot; Dr Stewart Denize &middot; Dr Kylie Lewis &middot; Privacy &middot; Terms</span>
          <span>*Conditions apply</span>
        </div>
      </div>
    </footer>
  );
}

/* ===================================================================
   Photo placeholder
   =================================================================== */

function Photo({ ratio = '4x5', label, sub, style, className = '' }) {
  return (
    <div className={`photo photo--${ratio} ${className}`} style={style}>
      <div className="photo__label">
        <span>{label || 'photograph'}</span>
        {sub && <small>{sub}</small>}
        <small style={{ opacity: 0.55 }}>{ratio.replace('x', ':')}</small>
      </div>
    </div>
  );
}

/* ===================================================================
   Hand-drawn-ish SVG divider
   =================================================================== */

function HandDivider({ color = 'var(--navy)', width = 140, style }) {
  return (
    <svg className="hand-divider" viewBox="0 0 140 18" style={{ width, color, ...style }} aria-hidden="true">
      <path
        d="M2 10 C 22 4, 42 14, 62 9 S 102 5, 138 11"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* ===================================================================
   Pull quote
   =================================================================== */

function PullQuote({ children, attr, size = 'md' }) {
  return (
    <blockquote className={`pullquote pullquote--${size}`}>
      {children}
      {attr && <cite className="pullquote__attr">&mdash; {attr}</cite>}
    </blockquote>
  );
}

/* ===================================================================
   Numbered editorial section heading
   =================================================================== */

function Numbered({ n, label }) {
  return (
    <div className="numbered">
      <PageEyebrow>{label}</PageEyebrow>
    </div>
  );
}

/* ===================================================================
   Page eyebrow
   =================================================================== */

function PageEyebrow({ children }) {
  return <span className="page-eyebrow">{children}</span>;
}

/* ===================================================================
   Closing CTA block — reused across pages
   =================================================================== */

function ClosingCTA({ title, body, primary = 'Book your free consultation*', target = 'contact' }) {
  return (
    <section className="section" style={{ background: 'var(--cream-deep)' }}>
      <div className="shell">
        <div className="grid-2" style={{ alignItems: 'center' }}>
          <div>
            <HandDivider color="var(--gold-deep)" width={120} style={{ marginBottom: 24 }} />
            <h2 className="display h2" style={{ marginBottom: 24 }}>{title}</h2>
            <p className="lede" style={{ maxWidth: 460 }}>{body}</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
            <a className="cta" href={'#/' + target} onClick={(e) => { e.preventDefault(); go(target); }}>
              {primary} <span className="cta__arrow">&rarr;</span>
            </a>
            <div className="phone-inline">
              Or call <a href="tel:0862887188">(08) 6288 7188</a>
            </div>
            <div className="eyebrow" style={{ marginTop: 8 }}>
              Mon&ndash;Fri 8am&ndash;5pm
            </div>
            <div className="body-sm tone-mute">*Conditions apply. Initial consultation only.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   Credential badge
   =================================================================== */

function CredBadge({ icon, children }) {
  return (
    <span className="cred-badge">
      <span className="cred-badge__icon">{icon || 'C'}</span>
      {children}
    </span>
  );
}

/* ===================================================================
   Service Hero — used across service pages
   =================================================================== */

function ServiceHero({ eyebrow, title, lede, photoLabel, photoSub, image }) {
  return (
    <section className="section" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="shell">
        <div className="grid-2" style={{ gap: 80, alignItems: 'end' }}>
          <div>
            <PageEyebrow>{eyebrow}</PageEyebrow>
            <h1 className="display h1" style={{ margin: '28px 0 28px' }}>{title}</h1>
            <p className="lede" style={{ maxWidth: 540 }}>{lede}</p>
          </div>
          <div>
            {image ? (
              <div className="photo photo--5x4"><img src={image} alt={photoLabel} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
            ) : (
              <Photo ratio="5x4" label={photoLabel} sub={photoSub} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* expose to other script files */
Object.assign(window, {
  useRoute, go, PAGES,
  Brand, Nav, Footer,
  Photo, HandDivider, PullQuote, Numbered, PageEyebrow,
  ClosingCTA, ServiceHero, CredBadge,
});