/* ============================================================
   sections-b.jsx — Event-fryser, Galleri, Job, Kontakt, Footer
   ============================================================ */

const OCCASIONS = ['Konfirmation', 'Bryllup', 'Barnedåb', 'Firmafest', 'Rund fødselsdag', 'Mindre sammenkomster'];

/* ---------------- LEJ EVENT-FRYSER ---------------- */
function EventFreezer() {
  const [f, setF] = useState({ navn: '', tlf: '', anledning: 'Konfirmation', dato: '', besked: '' });
  const [touched, setTouched] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const blur = (k) => () => setTouched({ ...touched, [k]: true });
  const errs = {
    navn: !f.navn.trim() ? 'Skriv dit navn' : '',
    tlf: !f.tlf.trim() ? 'Skriv telefon eller e-mail' : '',
  };
  const submit = (e) => {
    e.preventDefault();
    setTouched({ navn: true, tlf: true });
    if (errs.navn || errs.tlf) return;
    setSent(true);
  };

  return (
    <section id="event" className="section">
      <div className="wrap">
        <div className="event reveal">
          <span className="hero-blob" style={{ width: 280, height: 280, background: 'rgba(190,140,44,.22)', top: -80, right: -40 }} />
          <div className="event-inner">
            <div>
              <div className="eyebrow">Lej en event-fryser med gourmet-is</div>
              <h2 className="h-section">Gør din næste fest<br/>lidt sødere</h2>
              <p style={{ marginTop: 16, fontSize: 18, maxWidth: '46ch' }}>
                Hos Det søde Hjørne kan du leje en event-fryser fyldt med vores lækre gourmet-is fra Kastbergs Is.
                En nem og hyggelig måde at servere is på til dit næste arrangement.
              </p>
              <div className="event-occasions">
                {OCCASIONS.map(o => <div key={o} className="occ"><Dot c="var(--gold)" /> {o}</div>)}
              </div>
              <div className="event-cta">
                <a href="#event-form" className="btn btn-on-dark" onClick={(e) => { e.preventDefault(); document.getElementById('event-form').scrollIntoView ? null : null; }}>
                  Forespørg på event-fryser <I d={Ico.arrow} size={16} />
                </a>
                <a href="tel:+4529717186" className="btn btn-rose"><I d={Ico.phone} size={15} /> Ring 29 71 71 86</a>
              </div>
              <p className="event-note">Vil du høre mere? Henvend dig i butikken eller ring — vi hjælper dig gerne med at gøre festen sød.</p>
            </div>

            <div className="event-media">
              {!sent ? (
                <form id="event-form" className="inq" onSubmit={submit} noValidate>
                  <h4>Forespørg på en event-fryser</h4>
                  <div className="sub">Vi vender tilbage hurtigst muligt.</div>
                  <div className="form-row">
                    <div className={'field' + (touched.navn && errs.navn ? ' err' : '')}>
                      <label>Navn</label>
                      <input value={f.navn} onChange={set('navn')} onBlur={blur('navn')} placeholder="Dit navn" />
                      {touched.navn && errs.navn && <span className="msg">{errs.navn}</span>}
                    </div>
                    <div className={'field' + (touched.tlf && errs.tlf ? ' err' : '')}>
                      <label>Telefon / e-mail</label>
                      <input value={f.tlf} onChange={set('tlf')} onBlur={blur('tlf')} placeholder="Så vi kan svare dig" />
                      {touched.tlf && errs.tlf && <span className="msg">{errs.tlf}</span>}
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>Anledning</label>
                      <select value={f.anledning} onChange={set('anledning')}>
                        {OCCASIONS.map(o => <option key={o}>{o}</option>)}
                        <option>Andet</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Dato (ca.)</label>
                      <input type="date" value={f.dato} onChange={set('dato')} />
                    </div>
                  </div>
                  <div className="field">
                    <label>Besked (valgfri)</label>
                    <textarea rows="2" value={f.besked} onChange={set('besked')} placeholder="Antal gæster, ønsker, spørgsmål…"></textarea>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>Send forespørgsel</button>
                </form>
              ) : (
                <div className="success" role="status">
                  <span className="ok"><I d={Ico.heart} size={22} fill /></span>
                  <div>
                    <h4 style={{ margin: 0, fontFamily: 'Playfair Display, serif', fontSize: 20, color: '#fdf3e0' }}>Tak, {f.navn || 'for din forespørgsel'}!</h4>
                    <p style={{ color: '#e7d6bd', fontSize: 14, marginTop: 4 }}>Vi har modtaget din forespørgsel om en event-fryser til {f.anledning.toLowerCase()} og vender tilbage hurtigst muligt.</p>
                    <button className="btn btn-on-dark btn-sm" style={{ marginTop: 12 }} onClick={() => { setSent(false); setF({ navn: '', tlf: '', anledning: 'Konfirmation', dato: '', besked: '' }); setTouched({}); }}>Send en ny</button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- GALLERI ---------------- */
const GALLERY = [
  { id: 'g1', cls: 'g-tall', ph: 'Gourmet-is', src: 'assets/photos/dessert.jpg' },
  { id: 'g2', cls: '', ph: 'Butikken', src: 'assets/photos/counter.jpg' },
  { id: 'g3', cls: '', ph: 'Kaffe', src: 'assets/photos/coffee.jpg' },
  { id: 'g4', cls: 'g-wide', ph: 'Event-fryser', src: 'assets/photos/cup.jpg' },
  { id: 'g5', cls: '', ph: 'Glade kunder', src: 'assets/photos/terrace.jpg' },
  { id: 'g6', cls: '', ph: 'Softice', src: 'assets/photos/rainbow.jpg' },
  { id: 'g7', cls: 'g-tall', ph: 'Sæsonprodukter', src: 'assets/photos/cones.jpg' },
  { id: 'g8', cls: 'g-wide', ph: 'Stemning i butikken', src: 'assets/photos/storefront.jpg' },
];
function Gallery() {
  return (
    <section id="galleri" className="section" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap', marginBottom: 36 }} className="reveal">
          <div>
            <div className="eyebrow">Galleri</div>
            <h2 className="h-section">Et kig ind i butikken</h2>
          </div>
          <p className="lead" style={{ maxWidth: '40ch' }}>Træk jeres egne billeder ind i felterne — is, butik, kunder, kaffe og event-fryser.</p>
        </div>
        <div className="gallery reveal">
          {GALLERY.map(g => (
            <image-slot key={g.id} id={g.id} className={g.cls} shape="rounded" radius="20" src={g.src} placeholder={g.ph}></image-slot>
          ))}
        </div>
        <p className="g-cap">Tip: Klik på et felt for at vælge et billede — det gemmes automatisk.</p>
      </div>
    </section>
  );
}

/* ---------------- JOB ---------------- */
function Jobs() {
  const [openForm, setOpenForm] = useState(false);
  const [f, setF] = useState({ navn: '', alder: '', kontakt: '', om: '' });
  const [touched, setTouched] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const errs = { navn: !f.navn.trim() ? 'Skriv dit navn' : '', kontakt: !f.kontakt.trim() ? 'Skriv telefon eller e-mail' : '' };
  const submit = (e) => { e.preventDefault(); setTouched({ navn: true, kontakt: true }); if (errs.navn || errs.kontakt) return; setSent(true); };

  return (
    <section id="job" className="section">
      <div className="wrap">
        <div className="job-head reveal">
          <div>
            <div className="eyebrow">Bliv en del af holdet</div>
            <h2 className="h-section">Bliv en del af<br/>Det søde Hjørne</h2>
          </div>
          <p className="lead">Vi søger smilende, stabile og servicemindede medarbejdere fra 14 år og op. Et godt job i hjertet af byen — med søde kollegaer og masser af is.</p>
        </div>

        <article className="card job-card reveal">
          <div className="jc-body">
            <div className="job-meta">
              <span className="chip g">Aktuel stilling</span>
              <span className="chip">Fra 14 år</span>
              <span className="chip">Rudkøbing</span>
            </div>
            <h3>Medarbejder til isbutik</h3>
            <p style={{ color: 'var(--ink-soft)', marginBottom: 16 }}>
              Vi søger unge, smilende, stabile og hyggelige mennesker fra 14 år og op. Du får et godt arbejde
              i hjertet af byen med søde og hjælpsomme kollegaer, god stemning, gode arbejdsforhold,
              masser af is og nye udfordringer.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setOpenForm(v => !v)}>{openForm ? 'Skjul ansøgning' : 'Søg jobbet'} <I d={Ico.arrow} size={16} /></button>
              <a className="btn btn-ghost" href="mailto:ronneyjo@hotmail.dk?subject=Ansøgning%20–%20Medarbejder%20til%20isbutik">Send CV pr. mail</a>
            </div>

            {openForm && !sent && (
              <form onSubmit={submit} noValidate style={{ marginTop: 22, borderTop: '1px dashed var(--line)', paddingTop: 22 }}>
                <div className="form-row">
                  <div className={'field light' + (touched.navn && errs.navn ? ' err' : '')}>
                    <label>Navn</label>
                    <input value={f.navn} onChange={set('navn')} placeholder="Dit navn" />
                    {touched.navn && errs.navn && <span className="msg" style={{ color: '#c0392b' }}>{errs.navn}</span>}
                  </div>
                  <div className="field light">
                    <label>Alder</label>
                    <input value={f.alder} onChange={set('alder')} placeholder="F.eks. 16" inputMode="numeric" />
                  </div>
                </div>
                <div className={'field light' + (touched.kontakt && errs.kontakt ? ' err' : '')}>
                  <label>Telefon / e-mail</label>
                  <input value={f.kontakt} onChange={set('kontakt')} placeholder="Så vi kan kontakte dig" />
                  {touched.kontakt && errs.kontakt && <span className="msg" style={{ color: '#c0392b' }}>{errs.kontakt}</span>}
                </div>
                <div className="field light">
                  <label>Lidt om dig (valgfri)</label>
                  <textarea rows="2" value={f.om} onChange={set('om')} placeholder="Fortæl kort hvorfor du vil være en del af holdet"></textarea>
                </div>
                <button type="submit" className="btn btn-primary">Send ansøgning</button>
              </form>
            )}
            {openForm && sent && (
              <div style={{ marginTop: 22, borderTop: '1px dashed var(--line)', paddingTop: 22, display: 'flex', gap: 14, alignItems: 'center' }}>
                <span style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--mint)', color: '#2c4a32', display: 'grid', placeContent: 'center', flex: 'none' }}><I d={Ico.heart} size={22} fill /></span>
                <div>
                  <b style={{ fontFamily: 'Playfair Display, serif', fontSize: 19 }}>Tak for din ansøgning, {f.navn}!</b>
                  <p style={{ color: 'var(--ink-soft)', fontSize: 14 }}>Vi kigger den igennem og vender tilbage. Du er også velkommen til at ringe til Ronney.</p>
                </div>
              </div>
            )}
          </div>

          <div className="jc-side">
            <b style={{ fontFamily: 'Nunito', fontWeight: 800, fontSize: 13, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-soft)', display: 'block', marginBottom: 16 }}>Sådan søger du</b>
            <div className="contact-line">
              <span className="ci"><I d={Ico.phone} size={16} /></span>
              <span className="ct"><b>Ring til Ronney</b><span>Mellem 9.00 og 19.00 · tlf. 29 71 71 86</span></span>
            </div>
            <div className="contact-line">
              <span className="ci"><I d={Ico.mail} size={16} /></span>
              <span className="ct"><b>Send dit CV</b><span>ronneyjo@hotmail.dk</span></span>
            </div>
            <div className="contact-line">
              <span className="ci"><I d={Ico.heart} size={16} /></span>
              <span className="ct"><b>God stemning</b><span>Søde kollegaer & masser af is</span></span>
            </div>
            <a href="tel:+4529717186" className="btn btn-ghost btn-sm" style={{ marginTop: 8, width: '100%' }}>Ring til Ronney</a>
          </div>
        </article>
      </div>
    </section>
  );
}

/* ---------------- KONTAKT ---------------- */
const HOURS = [
  ['Mandag – Torsdag', '[Åbningstider]'],
  ['Fredag', '[Åbningstider]'],
  ['Lørdag', '[Åbningstider]'],
  ['Søndag', '[Åbningstider]'],
];
function Contact() {
  return (
    <section id="kontakt" className="section" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 46px' }} className="reveal">
          <div className="eyebrow">Åbningstider & kontakt</div>
          <h2 className="h-section">Kig forbi på hjørnet</h2>
          <p className="lead" style={{ margin: '14px auto 0' }}>Du finder os midt i Rudkøbing. Ejeren kan nemt opdatere oplysningerne herunder.</p>
        </div>

        <div className="contact-grid">
          <div className="reveal">
            <div className="info-list">
              <div className="info-item"><span className="ii-ico"><I d={Ico.pin} size={20} /></span><div><h4>Adresse</h4><p><a href="https://www.google.com/maps/search/?api=1&query=Torvet+11+st,+5900+Rudk%C3%B8bing,+Denmark" target="_blank" rel="noopener">Torvet 11, st., 5900 Rudkøbing</a></p></div></div>
              <div className="info-item"><span className="ii-ico"><I d={Ico.phone} size={20} /></span><div><h4>Telefon</h4><p><a href="tel:+4529717186">29 71 71 86</a></p></div></div>
              <div className="info-item"><span className="ii-ico"><I d={Ico.mail} size={20} /></span><div><h4>E-mail</h4><p><a href="mailto:ronneyjo@hotmail.dk">ronneyjo@hotmail.dk</a></p></div></div>
              <div className="info-item"><span className="ii-ico"><I d={Ico.heart} size={20} fill /></span><div><h4>Facebook</h4><p><a href="https://www.facebook.com/p/Det-s%C3%B8de-Hj%C3%B8rne-61570875359251/" target="_blank" rel="noopener">Det søde Hjørne →</a></p></div></div>
            </div>
            <div className="card" style={{ marginTop: 18, padding: 24 }}>
              <h4 style={{ fontFamily: 'Nunito', fontWeight: 800, fontSize: 13, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-soft)', margin: '0 0 12px' }}>Åbningstider</h4>
              {HOURS.map(([d, t]) => (
                <div key={d} className="hours-row"><span>{d}</span><span className={t.startsWith('[') ? 'placeholder-val' : 'open'}>{t}</span></div>
              ))}
            </div>
          </div>

          <div className="reveal">
            <div className="map">
              <iframe
                title="Det søde Hjørne — Torvet 11, Rudkøbing"
                src="https://www.google.com/maps?q=Torvet%2011%20st%2C%205900%20Rudk%C3%B8bing%2C%20Denmark&z=17&output=embed"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen></iframe>
              <div style={{ position: 'absolute', left: 18, bottom: 18, background: 'var(--surface)', borderRadius: 14, padding: '12px 16px', boxShadow: '0 14px 30px -16px rgba(74,51,34,.5)', display: 'flex', gap: 10, alignItems: 'center', pointerEvents: 'none' }}>
                <span className="ii-ico" style={{ width: 36, height: 36 }}><I d={Ico.pin} size={18} /></span>
                <div><b style={{ fontSize: 14 }}>Det søde Hjørne</b><div style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>Torvet 11, st., 5900 Rudkøbing</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <h5>Det søde Hjørne</h5>
            <p className="ftag">Gourmet-is i Rudkøbing</p>
            <p className="ftag" style={{ marginTop: 14, maxWidth: '34ch' }}>Søde øjeblikke, gourmet-is, kaffe og hygge i hjertet af byen.</p>
          </div>
          <div className="footer-col">
            <b>Sider</b>
            <a href="#om">Om os</a>
            <a href="#event">Event-fryser</a>
            <a href="#galleri">Galleri</a>
            <a href="#job">Job</a>
            <a href="#kontakt">Kontakt</a>
          </div>
          <div className="footer-col">
            <b>Kontakt</b>
            <a href="tel:+4529717186">29 71 71 86</a>
            <a href="mailto:ronneyjo@hotmail.dk">ronneyjo@hotmail.dk</a>
            <a href="https://www.facebook.com/p/Det-s%C3%B8de-Hj%C3%B8rne-61570875359251/" target="_blank" rel="noopener">Facebook</a>
            <span className="ftag" style={{ display: 'block', paddingTop: 6 }}>[Adresse], Rudkøbing</span>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Det søde Hjørne · Rudkøbing</span>
          <span>Lavet med <I d={Ico.heart} size={13} fill style={{ color: 'var(--rose)', verticalAlign: 'middle' }} /> til en sød lokal butik</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { EventFreezer, Gallery, Jobs, Contact, Footer });