// Footer.jsx + Contact form section

function PinIcon() { return <svg width={30} height={30} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-7.6 8-13a8 8 0 1 0-16 0c0 5.4 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/></svg>; }
function DocIcon() { return <svg width={30} height={30} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="13" rx="1"/><path d="M3 10h18M8 14h5"/></svg>; }

function FooterBox({ icon, title, children, tall=false }) {
  return (
    <div style={{
      background:'var(--surface-cool)', border:'1px solid var(--accent-trauerfall)',
      padding: tall ? '64px 28px 50px' : '50px 28px 40px',
      textAlign:'center', position:'relative',
    }}>
      <div style={{
        width:68, height:68, borderRadius:'50%', background:'var(--surface)',
        display:'flex', alignItems:'center', justifyContent:'center',
        color:'var(--accent-trauerfall)', margin:'0 auto 18px',
        boxShadow:'0 0 0 1px var(--line)',
      }}>{icon}</div>
      <h5 style={{margin:'0 0 12px', font:'400 22px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{title}</h5>
      {children}
    </div>
  );
}

function FooterTop() {
  return (
    <div style={{background:'var(--surface-ink)', padding:'96px var(--page-x) 32px'}}>
      <div style={{maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.02fr 1fr', gap:24, alignItems:'center'}}>
        <FooterBox icon={<PinIcon/>} title="Anschrift">
          <p style={{margin:'2px 0', fontSize:14, color:'var(--ink-500)', lineHeight:1.55}}>Kurt-Schumacher-Ring 256</p>
          <p style={{margin:'2px 0', fontSize:14, color:'var(--ink-500)', lineHeight:1.55}}>38444 Wolfsburg</p>
        </FooterBox>
        <FooterBox icon={<PhoneIcon size={30}/>} title="Kontaktdaten" tall>
          <p style={{margin:'2px 0', fontSize:14, color:'var(--ink-500)', lineHeight:1.55}}>Telefon: 05361 · 4 22 22</p>
          <p style={{margin:'2px 0', fontSize:14, color:'var(--ink-500)', lineHeight:1.55}}>Fax: 05361 · 43 56 92</p>
          <p style={{margin:'2px 0', fontSize:14, color:'var(--ink-500)', lineHeight:1.55}}>kontakt@tschense-bestattungen.de</p>
        </FooterBox>
        <FooterBox icon={<DocIcon/>} title="Service">
          <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:6}}>
            <a href="#" style={{font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-900)', textDecoration:'none'}}>Kostenrechner</a>
            <a href="#" style={{font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-900)', textDecoration:'none'}}>Checkliste</a>
          </div>
        </FooterBox>
      </div>
    </div>
  );
}

function FooterMaps() {
  const mapsQuery = 'Kurt-Schumacher-Ring 256, 38444 Wolfsburg';
  const embedSrc = `https://www.google.com/maps?q=${encodeURIComponent(mapsQuery)}&output=embed`;
  return (
    <div style={{background:'var(--surface-ink)', padding:0}}>
      <div style={{width:'100%', maxWidth:'100%', margin:'0 0 14px', paddingTop:14}}>
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          gap:14, flexWrap:'wrap',
        }}>
          <span style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10, marginLeft:100}}>
            <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
            So finden Sie uns
          </span>
          <a href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(mapsQuery)}`}
             target="_blank" rel="noopener noreferrer"
             style={{font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--brand-accent)', textDecoration:'none', borderBottom:'1px solid var(--brand-accent)', paddingBottom:4, marginRight:100}}>
            Route planen →
          </a>
        </div>
      </div>
      <div style={{
        position:'relative', overflow:'hidden',
        borderTop:'1px solid var(--on-dark-line, rgba(255,255,255,.10))',
        borderBottom:'1px solid var(--on-dark-line, rgba(255,255,255,.10))',
        width:'100%', maxWidth:'100%',
        height:400,
      }}>
        <iframe
          title="Tschense Bestattungen · Standort"
          src={embedSrc}
          width="100%" height="100%"
          style={{border:0, display:'block', filter:'grayscale(.55) contrast(.92) brightness(.78)'}}
          loading="lazy" referrerPolicy="no-referrer-when-downgrade"
          allowFullScreen/>
      </div>
    </div>
  );
}

function FooterMeta() {
  return (
    <div style={{background:'var(--surface-ink)', color:'#bdb4ab', padding:'40px var(--page-x)', borderTop:'1px solid var(--surface-ink-2)'}}>
      <div style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap', fontSize:12, letterSpacing:'.08em'}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <img src={window._r(window._r("assets/tschense-logo.png"))} alt="" style={{height:44, filter:'brightness(0) invert(1)', opacity:.85}}/>
          <span style={{maxWidth:'40ch', lineHeight:1.6}}>© 2026 Tschense Bestattungen · Wolfsburg</span>
        </div>
        <div style={{display:'flex', gap:24, font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase'}}>
          <a href="#" style={{color:'#bdb4ab', textDecoration:'none'}}>Impressum</a>
          <a href="#" style={{color:'#bdb4ab', textDecoration:'none'}}>Datenschutz</a>
          <a href="#" style={{color:'#bdb4ab', textDecoration:'none'}}>AGB</a>
        </div>
      </div>
    </div>
  );
}

function SiteFooter() {
  return (
    <footer>
      <FooterTop/>
      <FooterMaps/>
      <FooterMeta/>
    </footer>
  );
}

// `ContactFooter` bleibt als Alias rückwärtskompatibel zu früheren Imports.
const ContactFooter = FooterMaps;

Object.assign(window, { FooterBox, FooterTop, FooterMaps, ContactFooter, FooterMeta, SiteFooter });