/* ─────────────────────────────────────────────────────────────
   Asha & David — shared site chrome
   Nav · Footer · PageHeader · ornaments · arch frames
   Exposes everything on window for per-page babel scripts.
   ───────────────────────────────────────────────────────────── */
const NS = window.AshaDavidWeddingDesignSystem_23a384 || {};
const { Button, Card, Badge, Input, Textarea, Divider } = NS;

const ASSET = 'assets/';
const PAGES = [
  { label: 'Home',      href: 'index.html',    key: 'home' },
  { label: 'Our Story', href: 'about.html',    key: 'about' },
  { label: 'Event',     href: 'event.html',    key: 'event' },
  { label: 'RSVP',      href: 'rsvp.html',     key: 'rsvp' },
  { label: 'Stay',      href: 'stay.html',     key: 'stay' },
  { label: 'Registry',  href: 'registry.html', key: 'registry' },
  { label: 'Q&A',       href: 'qa.html',       key: 'qa' },
];

/* ── Ogee / cusped arch path (for portrait + feature frames) ── */
const OGEE = `M0,520 L0,248 C0,180 24,142 66,108 C108,74 148,46 200,16 Q220,5 238,0 Q256,5 276,16 C328,46 368,74 410,108 C452,142 476,180 476,248 L476,520 Z`;
const OGEE_I = `M12,520 L12,252 C12,188 34,150 76,117 C117,83 156,56 205,26 Q222,15 238,10 Q254,15 271,26 C320,56 359,83 400,117 C442,150 464,188 464,252 L464,520 Z`;

/* Ogee-arched image slot frame. Renders a gold double-frame around an
   <image-slot> masked to the arch shape. */
function ArchPhoto({ id, placeholder = 'Drop a photo', width = 320, height = 380, dark = false }) {
  const archClip = 'path("M0,' + height + ' L0,' + (height*0.46) + ' C0,' + (height*0.30) +
    ' ' + (width*0.05) + ',' + (height*0.22) + ' ' + (width*0.16) + ',' + (height*0.16) +
    ' C' + (width*0.30) + ',' + (height*0.085) + ' ' + (width*0.40) + ',' + (height*0.03) +
    ' ' + (width*0.50) + ',0 C' + (width*0.60) + ',' + (height*0.03) + ' ' + (width*0.70) + ',' + (height*0.085) +
    ' ' + (width*0.84) + ',' + (height*0.16) + ' C' + (width*0.95) + ',' + (height*0.22) +
    ' ' + width + ',' + (height*0.30) + ' ' + width + ',' + (height*0.46) + ' L' + width + ',' + height + ' Z")';
  return (
    <div style={{ position:'relative', width, height, flexShrink:0 }}>
      <div style={{
        position:'absolute', inset:-12, border:'1.5px solid var(--maroon)',
        borderRadius: width/2 + 'px ' + width/2 + 'px 8px 8px',
        clipPath:'inset(0 round ' + (width*0.45) + 'px ' + (width*0.45) + 'px 8px 8px)' }}>
      </div>
      <image-slot
        id={id}
        placeholder={placeholder}
        style={{ width:width+'px', height:height+'px', display:'block', clipPath:archClip, background: dark ? 'var(--green-mid)' : 'var(--cream-sand)' }}>
      </image-slot>
      <div style={{ position:'absolute', inset:0, clipPath:archClip, border:'1px solid var(--gold-bright)', pointerEvents:'none' }}></div>
    </div>
  );
}

/* ── Decorative ornament line (small motif over a gold rule) ── */
function Ornament({ src = ASSET+'Divider.PNG', width = 220, dark = false }) {
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:0, margin:'0 auto' }}>
      <img src={src} alt="" style={{ width, opacity: dark ? 0.85 : 0.8, filter: dark ? 'brightness(1.7) sepia(.3)' : 'none' }} />
    </div>
  );
}

/* ── Navigation (multi-page) ── */
function Nav({ current }) {
  const [open, setOpen] = React.useState(false);
  return (
    <nav style={{ position:'sticky', top:0, zIndex:100, background:'var(--cream-paper)',
      borderBottom:'1px solid var(--gold)', boxShadow:'0 1px 2px rgba(42,26,20,.06)' }}>
      <div style={{ maxWidth:1180, margin:'0 auto', height:74, display:'flex', alignItems:'center',
        justifyContent:'space-between', padding:'0 28px' }}>
        <a href="index.html" style={{ fontFamily:'var(--font-script)', fontSize:32, color:'var(--maroon)',
          lineHeight:1, textDecoration:'none' }}>A &amp; D</a>
        <div className="nav-links" style={{ display:'flex', gap:30, alignItems:'center' }}>
          {PAGES.map(p => {
            const active = p.key === current;
            return (
              <a key={p.key} href={p.href} className="navlink" style={{
                fontFamily:'var(--font-body)', fontSize:13, fontWeight:600, letterSpacing:'0.15em',
                textTransform:'uppercase', color: active ? 'var(--maroon)' : 'var(--ink)',
                textDecoration:'none', paddingBottom:4,
                borderBottom: active ? '1px solid var(--gold)' : '1px solid transparent',
                transition:'color .15s, border-color .15s' }}>{p.label}</a>
            );
          })}
          <a href="rsvp.html" style={{ textDecoration:'none' }}><Button size="sm">RSVP</Button></a>
        </div>
        <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
          display:'none', background:'none', border:'1px solid var(--gold)', borderRadius:6,
          padding:'8px 10px', cursor:'pointer', flexDirection:'column', gap:4 }}>
          <span style={{ width:18, height:1.5, background:'var(--maroon)', display:'block' }}></span>
          <span style={{ width:18, height:1.5, background:'var(--maroon)', display:'block' }}></span>
          <span style={{ width:18, height:1.5, background:'var(--maroon)', display:'block' }}></span>
        </button>
      </div>
      {open && (
        <div className="nav-drawer" style={{ borderTop:'1px solid var(--gold)', padding:'8px 28px 18px',
          display:'flex', flexDirection:'column', gap:2 }}>
          {PAGES.map(p => (
            <a key={p.key} href={p.href} style={{ fontFamily:'var(--font-body)', fontSize:15, fontWeight:600,
              letterSpacing:'0.12em', textTransform:'uppercase', color: p.key===current?'var(--maroon)':'var(--ink)',
              textDecoration:'none', padding:'12px 0', borderBottom:'1px solid rgba(207,170,120,.3)' }}>{p.label}</a>
          ))}
        </div>
      )}
    </nav>
  );
}

/* ── Interior page header band ── */
function PageHeader({ eyebrow, script, title, intro, ornament, dark = false, band = false }) {
  const bg = dark ? 'var(--green-deep)' : band ? 'var(--cream-sand)' : 'var(--cream)';
  const head = dark ? 'var(--cream-paper)' : 'var(--maroon)';
  const sub = dark ? 'var(--on-dark-soft)' : 'var(--ink-soft)';
  const scriptCol = dark ? 'var(--gold-bright)' : 'var(--brick)';
  return (
    <header style={{ background:bg, padding:'84px 28px 64px', textAlign:'center', position:'relative', overflow:'hidden' }}>
      <div style={{ maxWidth:760, margin:'0 auto', position:'relative', zIndex:1 }}>
        {ornament && <img src={ornament} alt="" style={{ width:96, margin:'0 auto 22px', display:'block',
          opacity: dark ? 0.9 : 0.85, filter: dark ? 'brightness(1.7) sepia(.3)' : 'none' }} />}
        {eyebrow && <div style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:600,
          letterSpacing:'0.2em', textTransform:'uppercase', color:sub, marginBottom:10 }}>{eyebrow}</div>}
        {script && <div style={{ fontFamily:'var(--font-script)', fontSize:34, color:scriptCol, lineHeight:1.1, marginBottom:6 }}>{script}</div>}
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:52, fontWeight:600, color:head,
          lineHeight:1.05, letterSpacing:'0.01em', margin:'0 0 18px' }}>{title}</h1>
        <div style={{ width:74, height:1, background:'var(--gold)', margin:'0 auto' }}></div>
        {intro && <p style={{ fontFamily:'var(--font-body)', fontSize:18, color: dark?'var(--on-dark)':'var(--ink-soft)',
          lineHeight:1.7, margin:'22px auto 0', maxWidth:600 }}>{intro}</p>}
      </div>
    </header>
  );
}

/* ── Footer ── */
function Footer() {
  return (
    <footer style={{ background:'var(--green-deep)', padding:'60px 28px 46px', position:'relative', overflow:'hidden' }}>
      <div style={{ maxWidth:1180, margin:'0 auto', position:'relative', zIndex:1 }}>
        <div style={{ height:1, background:'var(--gold)', opacity:.3, marginBottom:40 }}></div>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8, textAlign:'center' }}>
          <div style={{ fontFamily:'var(--font-script)', fontSize:46, color:'var(--gold-bright)', lineHeight:1 }}>Asha &amp; David</div>
          <div style={{ height:1, width:64, background:'var(--gold)', opacity:.4, margin:'6px 0' }}></div>
          <div style={{ fontFamily:'var(--font-display)', fontSize:18, color:'var(--on-dark)', letterSpacing:'.01em' }}>November 14–15, 2026</div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, letterSpacing:'.16em',
            textTransform:'uppercase', color:'var(--on-dark-soft)' }}>Encanterra · Queen Creek, Arizona</div>
          <div className="footer-nav" style={{ display:'flex', flexWrap:'wrap', justifyContent:'center', gap:22, margin:'18px 0 4px' }}>
            {PAGES.map(p => (
              <a key={p.key} href={p.href} style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600,
                letterSpacing:'.14em', textTransform:'uppercase', color:'var(--on-dark-soft)' }}>{p.label}</a>
            ))}
          </div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--on-dark-soft)', marginTop:6 }}>
            With love · <span style={{ color:'var(--gold-bright)' }}>ewenkarthik@outlook.com</span>
          </div>
        </div>
      </div>
      <img src={ASSET+'Flower_5.PNG'} alt="" style={{ position:'absolute', bottom:-10, left:'50%',
        transform:'translateX(-50%)', width:320, opacity:.1, pointerEvents:'none',
        filter:'brightness(1.7) sepia(.3)' }} />
    </footer>
  );
}

/* Section wrapper helpers */
function Section({ children, bg = 'var(--cream)', pad = '88px 28px', id, style }) {
  return <section id={id} style={{ background:bg, padding:pad, ...style }}>
    <div style={{ maxWidth:1180, margin:'0 auto' }}>{children}</div>
  </section>;
}
function SectionTitle({ eyebrow, script, title, center = true, color = 'var(--maroon)' }) {
  return (
    <div style={{ textAlign: center?'center':'left', marginBottom:44 }}>
      {script && <div style={{ fontFamily:'var(--font-script)', fontSize:30, color:'var(--brick)', marginBottom:4 }}>{script}</div>}
      {eyebrow && <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, letterSpacing:'.2em',
        textTransform:'uppercase', color:'var(--ink-soft)', marginBottom:8 }}>{eyebrow}</div>}
      <h2 style={{ fontFamily:'var(--font-display)', fontSize:36, fontWeight:600, color, letterSpacing:'.01em', margin:0 }}>{title}</h2>
      <div style={{ width:64, height:1, background:'var(--gold)', margin: center?'14px auto 0':'14px 0 0' }}></div>
    </div>
  );
}

Object.assign(window, {
  Button, Card, Badge, Input, Textarea, Divider,
  ASSET, PAGES, OGEE, OGEE_I,
  ArchPhoto, Ornament, Nav, PageHeader, Footer, Section, SectionTitle,
});