// Header.jsx — Tschense Bestattungen
// Utility-Bar (Kupfer, 50 px) + Haupt-Navigation (Weiß, 70 px) + Telefon-CTA rechts

const PhoneIcon = ({ size = 16, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
  </svg>
);

const ClockIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 8v4l2 2"/>
  </svg>
);

const HelpIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/>
    <circle cx="12" cy="17" r=".6" fill="currentColor"/>
  </svg>
);

const ChevronDown = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 8" fill="currentColor" style={{display:'inline-block',marginLeft:6,verticalAlign:'middle'}}>
    <path d="M0 1.154 L5.769 6.923 L11.538 1.154 L10.385 0 L5.769 4.615 L1.154 0 Z"/>
  </svg>
);

function PhoneCTA({ dark = false }) {
  return (
    <a href="tel:053614222" aria-label="Anrufen: 05361 4 22 22"
       style={{
         display:'inline-flex', alignItems:'center', gap:12,
         padding:'13px 24px 13px 18px',
         background: dark ? 'var(--surface-ink)' : 'var(--mode-traue-cta-bg)',
         color:'#fff', textDecoration:'none',
         boxShadow: dark
           ? '0 14px 32px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)'
           : '0 14px 32px -8px rgba(168,48,45,.45), inset 0 1px 0 rgba(255,255,255,.18)',
         transition:'transform .18s ease, box-shadow .18s ease',
       }}
       onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
       onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}>
      <span style={{
        width:30, height:30, borderRadius:'50%', flexShrink:0,
        background: dark ? 'rgba(199,134,101,.18)' : 'rgba(255,255,255,.18)',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <PhoneIcon size={14} color={dark ? 'var(--brand-accent)' : '#fff'} />
      </span>
      <span>
        <span style={{display:'block', font:'500 16px/1.05 var(--f-body)', color:'#fff', letterSpacing:'.01em'}}>05361 · 4 22 22</span>
        <span style={{display:'block', font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'rgba(255,255,255,.78)', marginTop:4}}>24h erreichbar</span>
      </span>
    </a>
  );
}

function UtilityBar({ onNav = ()=>{} }) {
  return (
    <div style={{
      background:'var(--accent-trauerfall-soft)', borderBottom:'1px solid rgba(168,48,45,.15)',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'0 100px', minHeight:50,
      font:'300 13px/1 var(--f-body)', color:'var(--ink-700)',
      flexWrap:'wrap', gap:14,
    }}>
      <div style={{display:'inline-flex', alignItems:'center', gap:14, flexWrap:'wrap'}}>
        <span style={{
          font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
          color:'var(--accent-trauerfall)', display:'inline-flex', alignItems:'center', gap:8,
        }}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'var(--accent-trauerfall)'}}/>
          Im Trauerfall
        </span>
        <span style={{color:'var(--ink-700)', fontSize:13.5, lineHeight:1.4}}>
          Wir sind <strong style={{color:'var(--accent-trauerfall)', fontWeight:600}}>Tag &amp; Nacht</strong> für Sie erreichbar.
        </span>
        <a href="tel:053614222" style={{
          display:'inline-flex', alignItems:'center', gap:8,
          padding:'5px 14px 6px 10px',
          background:'var(--mode-traue-cta-bg)',
          color:'#fff', textDecoration:'none',
          border:'1px solid transparent',
          boxShadow:'0 8px 18px -10px rgba(168,48,45,.4), inset 0 1px 0 rgba(255,255,255,.18)',
        }}>
          <span style={{width:18, height:18, borderRadius:'50%', background:'rgba(255,255,255,.18)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </span>
          <span style={{font:'500 12px/1 var(--f-body)', letterSpacing:'2px', fontVariantNumeric:'tabular-nums', color:'#fff'}}>05361 · 4 22 22</span>
        </a>
      </div>
      <a href="#faq" onClick={e=>{e.preventDefault();onNav('faq')}} style={{
        display:'inline-flex', alignItems:'center', gap:8,
        color:'var(--accent-trauerfall)', textDecoration:'none',
        font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
        paddingBottom:2, borderBottom:'1px solid rgba(168,48,45,.35)',
      }}><HelpIcon/>Hilfe &amp; häufige Fragen</a>
    </div>
  );
}

function NavBar({ current = 'home', onNav = ()=>{} }) {
  const items = [
    { id:'home',         label:'Home' },
    { id:'trauerfall',   label:'Im Trauerfall' },
    { id:'vorsorge',     label:'Vorsorge' },
    { id:'leistungen',   label:'Leistungen', hasMenu:true },
    { id:'service',      label:'Service', hasMenu:true, noRoute:true, menu:[
      { id:'friedhoefe',   label:'Wolfsburger Friedhöfe' },
      { id:'kostenplaner', label:'Kostenrechner' },
    ]},
    { id:'about',        label:'Über Uns' },
    { id:'kontakt',      label:'Kontakt' },
  ];
  return (
    <div style={{
      background:'var(--surface)', borderBottom:'1px solid var(--line)',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'18px 100px',
    }}>
      <a href="#" onClick={e=>{e.preventDefault();onNav('home')}}
         style={{display:'inline-block'}}>
        <img src={window._r(window._r("assets/tschense-logo.png"))} alt="Tschense Bestattungen" style={{height:54, width:'auto', display:'block'}}/>
      </a>
      <style>{`
        .nav-link { color: var(--ink-900); border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; }
        .nav-link.is-active { color: var(--accent-trauerfall); border-bottom-color: var(--accent-trauerfall); }
        .nav-link:hover { color: var(--accent-trauerfall); }
        .nav-item { position: relative; }
        .nav-menu {
          position: absolute; top: 100%; left: 0;
          min-width: 220px; background: var(--surface);
          border: 1px solid var(--line);
          box-shadow: 0 18px 32px -16px rgba(0,0,0,.15);
          padding: 8px 0; margin-top: 4px;
          opacity: 0; pointer-events: none;
          transform: translateY(-4px);
          transition: opacity .15s, transform .15s;
          z-index: 20;
        }
        .nav-item:hover .nav-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
        .nav-menu a {
          display: block; padding: 10px 18px;
          font: 400 13px/1.2 var(--f-body); letter-spacing: .02em;
          color: var(--ink-900); text-decoration: none;
          transition: background .15s, color .15s;
        }
        .nav-menu a:hover { background: var(--surface-paper); color: var(--accent-trauerfall); }
      `}</style>
      <nav style={{display:'flex', gap:32}}>
        {items.map(it => {
          const active = it.id === current;
          return (
            <div key={it.id} className="nav-item">
              <a href="#" onClick={e=>{e.preventDefault(); if(!it.noRoute) onNav(it.id);}}
                 className={'nav-link' + (active ? ' is-active' : '')}
                 style={{
                   textDecoration:'none',
                   font:'400 14px/1 var(--f-body)', letterSpacing:'.06em',
                   padding:'8px 0',
                 }}>
                {it.label}
              </a>
              {it.menu && (
                <div className="nav-menu">
                  {it.menu.map(sub => (
                    <a key={sub.id} href="#" onClick={e=>{e.preventDefault();onNav(sub.id)}}>
                      {sub.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </nav>
      <div style={{display:'inline-flex', alignItems:'center', gap:12}}>
        <VorsorgeCTA variant="small"/>
      </div>
    </div>
  );
}

function Header({ current, onNav }) {
  return (
    <header>
      <UtilityBar onNav={onNav}/>
      <NavBar current={current} onNav={onNav}/>
    </header>
  );
}

Object.assign(window, { Header, NavBar, UtilityBar, PhoneCTA, PhoneIcon, ChevronDown });
