// screens6.jsx — ContactScreen: Contact page
// Exposes: ContactScreen
const tr6 = (o, lang) => (o ? (o[lang] ?? o.de) : '');

const CONTACT_TEXT = {
  title:     { de: 'KONTAKT', en: 'CONTACT' },
  sub:       { de: 'Wir helfen Ihnen gerne weiter', en: 'We are happy to help you' },
  // cards
  resTitle:  { de: 'RESERVIERUNGEN', en: 'RESERVATIONS' },
  bookBtn:   { de: 'JETZT ONLINE BUCHEN', en: 'BOOK ONLINE NOW' },
  hoursTitle:{ de: 'ÖFFNUNGSZEITEN', en: 'OPENING HOURS' },
  hoursDays: { de: 'Montag bis Sonntag', en: 'Monday to Sunday' },
  addrTitle: { de: 'ADRESSE', en: 'ADDRESS' },
  dirLink:   { de: 'Route über Google Maps', en: 'Directions via Google Maps' },
  // form
  formKicker:{ de: 'ANFRAGEN', en: 'INQUIRIES' },
  formSub:   { de: 'Bei Fragen, Anregungen, Lob oder anderen Anliegen wenden Sie sich bitte an unser Team oder senden Sie uns eine E-Mail über das folgende Formular.',
               en: 'For questions, suggestions, praise or any other concerns, please contact our team or send us an email via the following form.' },
  salLabel:  { de: 'ANREDE', en: 'SALUTATION' },
  salPlh:    { de: 'Anrede wählen', en: 'Choose salutation' },
  fnLabel:   { de: 'VORNAME', en: 'FIRST NAME' },
  fnPlh:     { de: 'Ihr Vorname', en: 'Your first name' },
  lnLabel:   { de: 'NACHNAME', en: 'LAST NAME' },
  lnPlh:     { de: 'Ihr Nachname', en: 'Your last name' },
  emLabel:   { de: 'E-MAIL', en: 'E-MAIL' },
  emPlh:     { de: 'Ihre E-Mail-Adresse', en: 'Your email address' },
  phLabel:   { de: 'TELEFON', en: 'PHONE' },
  phPlh:     { de: 'Ihre Telefonnummer', en: 'Your phone number' },
  msgLabel:  { de: 'NACHRICHT', en: 'MESSAGE' },
  msgPlh:    { de: 'Wie können wir Ihnen helfen?', en: 'How can we help you?' },
  sendBtn:   { de: 'NACHRICHT SENDEN', en: 'SEND MESSAGE' },
  sentMsg:   { de: 'Vielen Dank! Ihre Nachricht wurde gesendet.', en: 'Thank you! Your message has been sent.' },
};

function CustomSelect({ value, onChange, options, placeholder }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  
  React.useEffect(() => {
    const handleClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  const selectedOpt = options.find(o => o.value === value);

  return (
    <div className={`custom-select-wrap ${open ? 'open' : ''}`} ref={ref}>
      <div className={`ct-input ct-select custom-select-trigger ${!value ? 'placeholder' : ''}`} onClick={() => setOpen(!open)}>
        {selectedOpt ? selectedOpt.label : placeholder}
        <Icon name="chevDown" size={12} style={{ position:'absolute', right:14, top:'50%', transform: open ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%)', pointerEvents:'none', color:'var(--bone-2)', transition: 'transform 0.2s' }} />
      </div>
      {open && (
        <div className="custom-select-dropdown">
          <div className="custom-select-opt-header">
            <span style={{ display:'inline-block', width:14, opacity: value ? 0 : 0.5, marginRight: 6, transition: 'opacity 0.2s' }}>✓</span>
            {placeholder}
          </div>
          {options.map(opt => (
            <div key={opt.value} className={`custom-select-opt ${opt.value === value ? 'selected' : ''}`} onClick={() => { onChange(opt.value); setOpen(false); }}>
              <span style={{ display:'inline-block', width:14, opacity: opt.value === value ? 1 : 0, marginRight: 6, transition: 'opacity 0.2s' }}>✓</span>
              {opt.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ContactScreen({ lang, setLang, onNavigate }) {
  const [sent, setSent] = React.useState(false);
  const [salutation, setSalutation] = React.useState('');
  const handleSend = () => { setSent(true); setTimeout(() => setSent(false), 3000); };

  return (
    <div className="screen contact" style={{ overflowY:'auto', WebkitOverflowScrolling:'touch' }}>
      <div className="contact-desktop-wrapper">

        {/* ── Header ── */}
        <section className="ct-header stagger" style={{ animationDelay: '0.1s' }}>
          <Logo height={52} color="var(--gold)" style={{ margin:'0 auto' }} />
          <div className="ct-title-block">
            <h1 className="ct-title">{tr6(CONTACT_TEXT.title, lang)}</h1>
            <div className="ct-sub">{tr6(CONTACT_TEXT.sub, lang)}</div>
          </div>
          <button className="hero-lang" onClick={() => setLang(lang === 'de' ? 'en' : 'de')} aria-label="language" style={{ position:'absolute', top:58, right:22, zIndex:8 }}>
            <Icon name="globe" size={13} />
            <span className={lang === 'de' ? 'on' : ''}>DE</span>
            <span className="lang-sep">/</span>
            <span className={lang === 'en' ? 'on' : ''}>EN</span>
          </button>
        </section>

        {/* ── Info Cards ── */}
        <section className="ct-cards stagger" style={{ animationDelay: '0.2s' }}>
          {/* Reservations */}
          <div className="ct-card">
            <div className="ct-card-title-row">
              <Icon name="phone" size={16} style={{ color:'var(--gold)' }} />
              <span className="ct-card-label">{tr6(CONTACT_TEXT.resTitle, lang)}</span>
            </div>
            <div className="ct-card-phone">+49 341 97 69 160</div>
            <button className="ct-book-btn" onClick={() => onNavigate && onNavigate('book')}>
              {tr6(CONTACT_TEXT.bookBtn, lang)}
            </button>
          </div>

          {/* Opening Hours */}
          <div className="ct-card">
            <div className="ct-card-title-row">
              <Icon name="clock" size={16} style={{ color:'var(--gold)' }} />
              <span className="ct-card-label">{tr6(CONTACT_TEXT.hoursTitle, lang)}</span>
            </div>
            <div className="ct-card-days">{tr6(CONTACT_TEXT.hoursDays, lang)}</div>
            <div className="ct-card-time" style={{ fontSize: 18, marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: 'var(--bone-2)', fontFamily: 'var(--sans)', marginRight: 12 }}>{lang === 'de' ? 'Mittags' : 'Lunch'}</span>
              11:00 – 14:00
            </div>
            <div className="ct-card-time" style={{ fontSize: 18 }}>
              <span style={{ fontSize: 13, color: 'var(--bone-2)', fontFamily: 'var(--sans)', marginRight: 12 }}>{lang === 'de' ? 'Abends' : 'Dinner'}</span>
              17:30 – 22:00
            </div>
          </div>

          {/* Address */}
          <div className="ct-card">
            <div className="ct-card-title-row">
              <Icon name="pin" size={16} style={{ color:'var(--gold)' }} />
              <span className="ct-card-label">{tr6(CONTACT_TEXT.addrTitle, lang)}</span>
            </div>
            <div className="ct-card-addr">Klostergasse 18, 04109 Leipzig</div>
            <a className="ct-dir-link" href={SHIKI_MAPS_URL} target="_blank" rel="noreferrer">
              <Icon name="pin" size={13} /><span>{tr6(CONTACT_TEXT.dirLink, lang)}</span>
            </a>
          </div>
        </section>

        {/* ── Contact Form ── */}
        <section className="ct-form-section stagger" style={{ animationDelay: '0.3s' }}>
          <div className="ct-form-header">
            <div className="ct-form-kicker">{tr6(CONTACT_TEXT.formKicker, lang)}</div>
            <div className="ct-form-sub">{tr6(CONTACT_TEXT.formSub, lang)}</div>
          </div>

          <div className="ct-form-fields">
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.salLabel, lang)}</span>
              <CustomSelect
                value={salutation}
                onChange={setSalutation}
                options={[
                  { value: 'herr', label: lang === 'de' ? 'Herr' : 'Mr.' },
                  { value: 'frau', label: lang === 'de' ? 'Frau' : 'Ms.' },
                  { value: 'divers', label: lang === 'de' ? 'Divers' : 'Other' }
                ]}
                placeholder={tr6(CONTACT_TEXT.salPlh, lang)}
              />
            </label>
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.fnLabel, lang)}</span>
              <input type="text" className="ct-input" placeholder={tr6(CONTACT_TEXT.fnPlh, lang)} />
            </label>
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.lnLabel, lang)}</span>
              <input type="text" className="ct-input" placeholder={tr6(CONTACT_TEXT.lnPlh, lang)} />
            </label>
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.emLabel, lang)}</span>
              <input type="email" className="ct-input" placeholder={tr6(CONTACT_TEXT.emPlh, lang)} />
            </label>
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.phLabel, lang)}</span>
              <input type="tel" className="ct-input" placeholder={tr6(CONTACT_TEXT.phPlh, lang)} />
            </label>
            <label className="ct-field">
              <span className="ct-field-label">{tr6(CONTACT_TEXT.msgLabel, lang)}</span>
              <textarea className="ct-input ct-textarea" placeholder={tr6(CONTACT_TEXT.msgPlh, lang)}></textarea>
            </label>
          </div>

          <div className="ct-send-wrapper">
            <button className={'ct-send-btn' + (sent ? ' sent' : '')} onClick={handleSend}>
              {sent ? <><Icon name="check" size={16} /><span>{tr6(CONTACT_TEXT.sentMsg, lang)}</span></> : tr6(CONTACT_TEXT.sendBtn, lang)}
            </button>
          </div>
        </section>

        {/* ── Map ── */}
        <section className="ct-map-section">
          <div className="ct-map-container">
            <iframe
              title="SHIKI Leipzig — Klostergasse 18"
              src="https://www.google.com/maps?q=Klostergasse+18,+04109+Leipzig&z=16&output=embed"
              loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen="" />
          </div>
        </section>
        
      </div>

      <SiteFooter lang={lang} onNavigate={onNavigate} />
    </div>
  );
}

const LEGAL_CONTENT = {
  title: { de: 'Impressum & Datenschutz', en: 'Legal Notice & Privacy Policy' },
  blocks: [
    {
      title: { de: 'Angaben gemäß § 5 TMG', en: 'Information according to § 5 TMG' },
      body: { de: 'COCINA GmbH\nKlostergasse 18\nPassage bei Breuninger / Marktplatz\n04109 Leipzig', en: 'COCINA GmbH\nKlostergasse 18\nPassage bei Breuninger / Marktplatz\n04109 Leipzig' }
    },
    {
      title: { de: 'Kontakt', en: 'Contact' },
      body: { de: 'Telefon: +49 341 97 69 160\nE-Mail: info@shikileipzig.de', en: 'Phone: +49 341 97 69 160\nE-Mail: info@shikileipzig.de' }
    },
    {
      title: { de: 'Grafik und Programmierung', en: 'Graphics and Programming' },
      body: { de: 'torpedo motor – friends of creative & digital marketing GmbH\nKarl-Liebknecht-Straße 12, 04107 Leipzig\n+49 341 30 866 90\ninfo@torpedo.one / www.torpedo.one', en: 'torpedo motor – friends of creative & digital marketing GmbH\nKarl-Liebknecht-Straße 12, 04107 Leipzig\n+49 341 30 866 90\ninfo@torpedo.one / www.torpedo.one' }
    },
    {
      title: { de: 'Haftung für Inhalte', en: 'Liability for Content' },
      body: { de: 'Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.\n\nVerpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.', en: 'As a service provider, we are responsible for our own content on these pages in accordance with general laws pursuant to § 7 para. 1 TMG. According to §§ 8 to 10 TMG, however, we as a service provider are not obliged to monitor transmitted or stored third-party information or to investigate circumstances that indicate illegal activity.\n\nObligations to remove or block the use of information in accordance with general laws remain unaffected by this. However, liability in this respect is only possible from the time of knowledge of a specific infringement. As soon as we become aware of such infringements, we will remove this content immediately.' }
    },
    {
      title: { de: 'Haftung für Links', en: 'Liability for Links' },
      body: { de: 'Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.\n\nDie verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.', en: 'Our website contains links to external third-party websites over whose content we have no influence. Therefore, we cannot assume any liability for this external content. The respective provider or operator of the pages is always responsible for the content of the linked pages.\n\nThe linked pages were checked for possible legal violations at the time of linking. Illegal content was not recognizable at the time of linking. However, permanent monitoring of the content of the linked pages is unreasonable without concrete evidence of a violation of the law. If we become aware of any legal infringements, we will remove such links immediately.' }
    },
    {
      title: { de: 'Urheberrecht', en: 'Copyright' },
      body: { de: 'Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.\n\nDownloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.', en: 'The content and works on these pages created by the site operators are subject to German copyright law. Duplication, processing, distribution and any kind of exploitation outside the limits of copyright law require the written consent of the respective author or creator.\n\nDownloads and copies of this site are only permitted for private, non-commercial use. Insofar as the content on this site was not created by the operator, the copyrights of third parties are respected. In particular, third-party content is marked as such. Should you nevertheless become aware of a copyright infringement, please let us know. If we become aware of any infringements, we will remove such content immediately.' }
    },
    {
      title: { de: 'Datenschutz', en: 'Data Protection' },
      body: { de: 'Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.\n\nDie Nutzung unserer Webseite ist in der Regel ohne  Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.\n\nWir weisen darauf hin, dass die Datenübertragung im Internet Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.', en: 'The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the statutory data protection regulations and this privacy policy.\n\nThe use of our website is generally possible without providing personal data. Insofar as personal data is collected on our pages, this is always done on a voluntary basis as far as possible. This data will not be passed on to third parties without your express consent.\n\nWe would like to point out that data transmission over the Internet can have security gaps. Complete protection of data against access by third parties is not possible.' }
    },
    {
      title: { de: 'Cookies', en: 'Cookies' },
      body: { de: 'Die Internetseiten verwenden teilweise so genannte Cookies. Cookies richten auf Ihrem Rechner keinen Schaden an und enthalten keine Viren. Cookies dienen dazu, unser Angebot nutzerfreundlicher, effektiver und sicherer zu machen.\n\nDie meisten der von uns verwendeten Cookies sind so genannte Session-Cookies. Sie werden nach Ende Ihres Besuchs automatisch gelöscht. Andere Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese löschen. Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben.', en: 'Some of the websites use so-called cookies. Cookies do not damage your computer and do not contain viruses. Cookies serve to make our offer more user-friendly, effective and secure.\n\nMost of the cookies we use are so-called session cookies. They are automatically deleted after your visit. Other cookies remain stored on your end device until you delete them. You can set your browser so that you are informed about the setting of cookies and only allow cookies in individual cases.' }
    },
    {
      title: { de: 'Server-Log-Files', en: 'Server Log Files' },
      body: { de: 'Der Provider der Seiten erhabt und speichert automatisch Informationen in so genannten Server-Log Files: Browsertyp und Browserversion, verwendetes Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage. Diese Daten sind nicht bestimmten Personen zuordenbar.', en: 'The provider of the pages automatically collects and stores information in so-called server log files: browser type and browser version, operating system used, referrer URL, host name of the accessing computer, time of the server request. This data cannot be assigned to specific persons.' }
    },
    {
      title: { de: 'Kontaktformular', en: 'Contact Form' },
      body: { de: 'Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert.', en: 'If you send us inquiries via the contact form, your details from the inquiry form, including the contact details you provided there, will be stored by us for the purpose of processing the inquiry and in case of follow-up questions.' }
    },
    {
      title: { de: 'Newsletterdaten', en: 'Newsletter Data' },
      body: { de: 'Wenn Sie den auf der Webseite angebotenen Newsletter beziehen möchten, benötigen wir von Ihnen eine E-Mail-Adresse sowie Informationen, welche uns die Überprüfung gestatten, dass Sie der Inhaber der angegebenen E-Mail-Adresse sind.', en: 'If you would like to receive the newsletter offered on the website, we require an e-mail address from you as well as information that allows us to verify that you are the owner of the e-mail address provided.' }
    },
    {
      title: { de: 'Google Analytics', en: 'Google Analytics' },
      body: { de: 'Diese Website nutzt Funktionen des Webanalysedienstes Google Analytics. Anbieter ist die Google Inc., 1600 Amphitheatre Parkway Mountain View, CA 94043, USA. Mehr Informationen zum Umgang mit Nutzerdaten finden Sie in der Datenschutzerklärung von Google.', en: 'This website uses functions of the web analytics service Google Analytics. The provider is Google Inc, 1600 Amphitheatre Parkway Mountain View, CA 94043, USA. More information on how Google handles user data can be found in Google\'s privacy policy.' }
    },
    {
      title: { de: 'Quelle', en: 'Source' },
      body: { de: 'eRecht24', en: 'eRecht24' }
    }
  ]
};

function LegalScreen({ lang, setLang, onNavigate }) {
  return (
    <div className="screen legal" style={{ overflowY:'auto', WebkitOverflowScrolling:'touch' }}>
      <button className="hero-lang" onClick={() => setLang(lang === 'de' ? 'en' : 'de')} aria-label="language">
        <svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true"><circle fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" cx="12" cy="12" r="9"></circle><path fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"></path></svg>
        <span className={lang === 'de' ? 'on' : ''}>DE</span>
        <span className="lang-sep">/</span>
        <span className={lang === 'en' ? 'on' : ''}>EN</span>
      </button>
      <div className="legal-head">
        <h1 className="legal-title">{tr6(LEGAL_CONTENT.title, lang)}</h1>
      </div>
      <div className="legal-content">
        {LEGAL_CONTENT.blocks.map((b, i) => (
          <div key={i} className="legal-block">
            <h2 className="legal-sec-title">{tr6(b.title, lang)}</h2>
            {tr6(b.body, lang).split('\n').map((para, j) => para.trim() ? <p key={j} className="legal-p">{para}</p> : null)}
          </div>
        ))}
      </div>
      <SiteFooter lang={lang} onNavigate={onNavigate} />
    </div>
  );
}

Object.assign(window, { ContactScreen, LegalScreen });