// shared.jsx — atoms, header, footer
const { useState, useEffect } = React;

// ── ATOMS ─────────────────────────────────────────────────────────
function Eyebrow({ children, variant, style }) {
  const cls = "eyebrow" + (variant === 'light' ? " eyebrow-light" : variant === 'dark' ? " eyebrow-dark" : "");
  return <div className={cls} style={style}>{children}</div>;
}
function HoneyRule({ style }) { return <div className="brown-rule" style={style} />; }
function BrownRule({ style }) { return <div className="brown-rule" style={style} />; }
function BurgRule({ style })  { return <div className="burgundy-rule" style={style} />; }
function FadeRule({ style })  { return <div className="fade-rule" style={style} />; }

// Italic accent phrase — uses --font-accent (Fiftyfifty Italics → Cormorant italic fallback).
// Pair with an upright Cormorant headline for the signature brand voice.
function Accent({ children, style }) {
  return <span style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontWeight: 400, ...style }}>{children}</span>;
}

function Button({ variant = "primary", children, onClick, type, href, style, target }) {
  const cls = `btn btn-${variant}`;
  if (href) return <a className={cls} href={href} style={style} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>{children}</a>;
  return <button className={cls} onClick={onClick} type={type} style={style}>{children}</button>;
}

// ── NAV DROPDOWN (desktop) ────────────────────────────────────────
function NavDropdown({ label, items, active }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}>
      <span style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: (active || open) ? 'var(--color-deep-brown)' : 'var(--color-taupe)',
        cursor: 'pointer', transition: 'color .25s', whiteSpace: 'nowrap',
        borderBottom: active ? '1px solid var(--color-deep-brown)' : '1px solid transparent',
        paddingBottom: 4,
      }}>
        {label}
        <span style={{ fontSize: 7, marginLeft: 6, verticalAlign: 'middle', display: 'inline-block', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .25s' }}>▼</span>
      </span>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', paddingTop: 14, zIndex: 60 }}>
          <div style={{
            background: 'var(--color-ivory)', border: '1px solid var(--color-border-subtle)',
            borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: '8px 0', minWidth: 230,
          }}>
            {items.map(c => (
              <a key={c.label} href={c.href}
                 target={c.external ? '_blank' : undefined}
                 rel={c.external ? 'noopener noreferrer' : undefined}
                 style={{
                   display: 'block', padding: '12px 24px', whiteSpace: 'nowrap',
                   fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                   color: 'var(--color-taupe)', transition: 'all .2s',
                 }}
                 onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-deep-brown)'; e.currentTarget.style.background = 'var(--color-surface)'; }}
                 onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-taupe)'; e.currentTarget.style.background = 'transparent'; }}
              >{c.label}</a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── HEADER ────────────────────────────────────────────────────────
function Header({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { label: 'Treatments', href: '/treatments/' },
    { label: 'Procedures', href: '/procedures/' },
    { label: 'About',      href: '/about-us/' },
    { label: 'Shop', children: [
      { label: 'Revision Skincare',  href: 'https://revisionskincare.com/?scpid=162867', external: true },
      { label: 'SkinBetter Science', href: 'https://www.skinbetter.com/?is=skinusernew&invitecode=2854203#register', external: true },
      { label: 'Skin Medica',        href: 'https://racheldahlen.brilliantconnections.com/', external: true },
      { label: 'Gift Cards',         href: '#book-now' },
    ] },
    { label: 'Blog',       href: '/blog/' },
    { label: 'Contact',    href: '/contact-us/' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(246, 242, 236, 0.85)',
      backdropFilter: 'saturate(140%) blur(10px)',
      WebkitBackdropFilter: 'saturate(140%) blur(10px)',
      borderBottom: scrolled ? '1px solid var(--color-border-subtle)' : '1px solid transparent',
      transition: 'border-color .3s ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 32px',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="/assets/logo-text-only.png" alt="Rachel Dahlen Aesthetics" style={{ height: 42, width: 'auto' }} />
        </a>
        <nav className="nav-desktop" style={{ display: 'flex', gap: 34, alignItems: 'center' }}>
          {items.map(i => (
            i.children ? (
              <NavDropdown key={i.label} label={i.label} items={i.children} active={active === i.label} />
            ) : (
            <a key={i.label}
               href={i.href}
               target={i.external ? '_blank' : undefined}
               rel={i.external ? 'noopener noreferrer' : undefined}
               style={{
                 fontSize: 11, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase',
                 color: active === i.label ? 'var(--color-deep-brown)' : 'var(--color-taupe)',
                 cursor: 'pointer', transition: 'color .25s',
                 borderBottom: active === i.label ? '1px solid var(--color-deep-brown)' : '1px solid transparent',
                 paddingBottom: 4,
               }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--color-deep-brown)'}
               onMouseLeave={e => e.currentTarget.style.color = active === i.label ? 'var(--color-deep-brown)' : 'var(--color-taupe)'}
            >{i.label}</a>
            )
          ))}
        </nav>
        <div className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <a href="tel:6122943749" style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--color-taupe)', whiteSpace: 'nowrap',
          }}>612 · 294 · 3749</a>
          <Button variant="ghost" href="#book-now">Book Now</Button>
        </div>
        <button
          onClick={() => setOpen(!open)}
          aria-label="Menu"
          style={{
            display: 'none',
            padding: 10, color: 'var(--color-deep-brown)',
          }}
          className="nav-mobile-trigger"
        >
          <div style={{ width: 22, height: 1.5, background: 'currentColor', marginBottom: 6 }} />
          <div style={{ width: 22, height: 1.5, background: 'currentColor', marginBottom: 6 }} />
          <div style={{ width: 22, height: 1.5, background: 'currentColor' }} />
        </button>
      </div>

      {open && (
        <div className="nav-mobile-drawer" style={{
          background: 'var(--color-ivory)',
          borderTop: '1px solid var(--color-border-subtle)',
          padding: '20px 24px 28px',
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {items.map(i => (
            i.children ? (
              <div key={i.label} style={{ padding: '10px 0', borderBottom: '1px solid var(--color-border-subtle)', display: 'flex', flexDirection: 'column', gap: 12 }}>
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>{i.label}</span>
                {i.children.map(c => (
                  <a key={c.label} href={c.href}
                     target={c.external ? '_blank' : undefined}
                     rel={c.external ? 'noopener noreferrer' : undefined}
                     style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--color-taupe)', paddingLeft: 16 }}
                  >{c.label}</a>
                ))}
              </div>
            ) : (
            <a key={i.label} href={i.href}
               target={i.external ? '_blank' : undefined}
               style={{
                 fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase',
                 color: 'var(--color-deep-brown)', padding: '10px 0',
                 borderBottom: '1px solid var(--color-border-subtle)',
               }}
            >{i.label}</a>
            )
          ))}
          <a href="#book-now" className="btn btn-primary" style={{ marginTop: 8 }}>Book Now</a>
        </div>
      )}

      <style>{`
        @media (max-width: 1080px) {
          .nav-mobile-trigger { display: block !important; }
          .nav-desktop { display: none !important; }
        }
        @media (min-width: 1081px) {
          .nav-mobile-drawer { display: none !important; }
        }
      `}</style>
    </header>
  );
}

// ── FOOTER ────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: 'var(--color-deep-brown)', color: 'var(--color-tan)', padding: '90px 0 36px' }}>
      <div className="container">
        <div className="grid-footer" style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 56, marginBottom: 64,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <img src="/assets/logo-text-only-light.png" alt="Rachel Dahlen Aesthetics" style={{ width: 200 }} />
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 400, lineHeight: 1.6, color: 'rgba(246,242,236,0.72)', maxWidth: 320 }}>
              Beauty grounded in artistry, medical expertise, and an unwavering commitment to <Accent>natural, timeless results.</Accent>
            </p>
            <a href="tel:6122943749" style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-tan)' }}>
              612 · 294 · 3749
            </a>
          </div>
          <FootCol title="Visit" items={[
            { label: '7701 York Ave S' },
            { label: 'Suite 100' },
            { label: 'Edina, MN 55435' },
          ]} />
          <FootCol title="Hours" items={[
            { label: 'Monday · 7–5' },
            { label: 'Tuesday · 7–5' },
            { label: 'Wednesday · 8–12' },
            { label: 'Thursday · 7–5' },
            { label: 'Friday · 7–1' },
            { label: 'Sat–Sun · Closed' },
          ]} />
          <FootCol title="Connect" items={[
            { label: 'Instagram', href: 'https://www.instagram.com/r.d.aesthetics/', external: true },
            { label: 'Shop', href: 'https://racheldahlenaesthetics.square.site/s/shop', external: true },
            { label: 'Blog', href: '/blog/' },
            { label: 'hello@racheldahlen.com', href: 'mailto:hello@racheldahlen.com' },
          ]} />
        </div>
        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(216,198,176,0.18)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontSize: 10.5, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(246,242,236,0.55)',
        }}>
          <span>© 2026 Rachel Dahlen Aesthetics</span>
          <a href="/privacy-policy/">Privacy Policy</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .grid-footer { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 540px) {
          .grid-footer { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FootCol({ title, items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{
        fontSize: 10.5, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--color-tan)', marginBottom: 4,
      }}>{title}</div>
      {items.map(i => (
        i.href ? (
          <a key={i.label} href={i.href} target={i.external ? '_blank' : undefined} rel={i.external ? 'noopener noreferrer' : undefined}
             style={{ fontSize: 13, fontWeight: 400, color: 'rgba(246,242,236,0.72)', cursor: 'pointer', transition: 'color .2s' }}
             onMouseEnter={e => e.currentTarget.style.color = 'var(--color-ivory)'}
             onMouseLeave={e => e.currentTarget.style.color = 'rgba(246,242,236,0.72)'}
          >{i.label}</a>
        ) : (
          <span key={i.label} style={{ fontSize: 13, fontWeight: 400, color: 'rgba(246,242,236,0.72)' }}>{i.label}</span>
        )
      ))}
    </div>
  );
}

// ── PAGE HEADER (for inner pages) ─────────────────────────────────
function PageHeader({ eyebrow, title, accent, body, bg = 'ivory' }) {
  return (
    <section className={`bg-${bg}`} style={{ padding: '120px 0 100px', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container-narrow" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 26, alignItems: 'center' }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 80px)' }}>
          {title}{accent && <> <Accent>{accent}</Accent></>}
        </h1>
        <FadeRule style={{ margin: '4px auto' }} />
        {body && <p className="body-md" style={{ maxWidth: 620, color: 'var(--color-taupe)' }}>{body}</p>}
      </div>
    </section>
  );
}

// expose
Object.assign(window, {
  Eyebrow, HoneyRule, BrownRule, BurgRule, FadeRule, Accent, Button, Header, Footer, PageHeader,
});