// screens5.jsx — AboutScreen: About Us page
// Exposes: AboutScreen
const tr5 = (o, lang) => (o ? (o[lang] ?? o.de) : '');

const ABOUT_TEXT = {
  kicker: { de: 'ÜBER UNS', en: 'ABOUT US' },
  title: { de: 'Über Uns', en: 'About Us' },
  sub: { de: 'Unsere Geschichte & Werte', en: 'Our Story & Values' },
  heading: { de: 'SHIKI LEIPZIG IST TRADITION UND MODERNE', en: 'SHIKI LEIPZIG IS TRADITION AND MODERNITY' },
  p1: { de: 'In dieser Stadt des Handels, der Dynamik und des modernen Geistes erleben Sie in einem zeitgemäßen Ambiente eine raffinierte asiatische Küche. Unser erstklassiges Sushi wird in unserer offenen Sushi-Bar zubereitet, sodass die Gäste unserem Team dabei zusehen können, wie es in entspannter Atmosphäre kulinarische Reisen kreiert, wobei authentische Rezepte verwendet werden. Wir legen besonderen Wert auf frische, ausgewählte Zutaten.',
        en: 'In this city of commerce, dynamism, and modern spirit, you\'ll experience refined Asian cuisine in a contemporary setting. Our first-class sushi is prepared in our open sushi bar, allowing guests to watch our team create culinary journeys in a relaxed atmosphere, using authentic recipes. We place particular emphasis on fresh, select ingredients.' },
  p2: { de: 'An der Bar bereiten wir erfrischende Cocktails und Limonaden zu, begleitet von sorgfältig ausgewählter Musik, die die perfekte Atmosphäre für einen entspannten Abend schafft.',
        en: 'At the bar, we prepare refreshing cocktails and lemonades, accompanied by carefully chosen music, creating the perfect ambiance for a relaxing evening.' },
  p3: { de: 'Unsere mehr als 10 Jahre Erfahrung garantieren unsere Qualität.',
        en: 'Our more than 10 years of experience guarantee our quality.' },
  inShort: { de: 'Kurz gesagt', en: 'In short' },
  jobs: { de: 'JOBS', en: 'JOBS' },
  applyLabel: { de: 'Jetzt per E-Mail bewerben', en: 'Apply now via email' },
  applyPrompt: { de: 'Wir freuen uns auf Ihre Bewerbung, vorzugsweise per E-Mail an:', en: 'We look forward to receiving your application, preferably by email to:' },
};

const ABOUT_CHIPS = {
  de: ['Moderne, gehobene asiatische Küche','Asiatische Küche','Robata mit Live-Cooking','Binchotan Holzkohlegrill','Köstliche Cocktails','Top Qualität','Stilvolles Dekor','„Zuhause"-Gefühl'],
  en: ['Modern, upscale Asian cuisine','Asian cuisine','Robata with live cooking','Binchotau charcoal grill','Delicious cocktails','Top quality','Stylish decor','"at home" feeling'],
};

const ABOUT_JOBS = [
  { 
    title: { de: 'Zeigen Sie uns, was Sie können: Koch/Köchin', en: 'Show us what you can do: Cook/Chef' },
    expect: { 
      de: ['Liebe zum Kochen', 'Erfahrung in der asiatischen Küche', 'Feinen Geschmackssinn und Kreativität', 'Freundlichkeit und Freude am Umgang mit Menschen', 'Ein gepflegtes und teamorientiertes Auftreten'],
      en: ['A love of cooking', 'Experience in Asian cuisine', 'A refined sense of taste and creativity', 'Friendliness and enjoyment of working with people', 'A clean and team-oriented demeanor']
    },
    offer: {
      de: ['Arbeit und Erfüllung in einem erfolgreichen Restaurant', 'Freundliche Kollegen'],
      en: ['Work and fulfillment in a successful restaurant', 'Friendly colleagues']
    }
  },
  { 
    title: { de: 'Zeigen Sie uns, was Sie können: Sushi-Meister (m/w)', en: 'Show us what you can do: Sushi Master (m/f)' },
    expect: { 
      de: ['Hervorragende Fähigkeiten', 'Leidenschaft für japanische Küche', 'Feinen Gaumen und Kreativität', 'Freundlichkeit und Freude am Umgang mit Menschen', 'Ein gepflegtes und teamorientiertes Auftreten'],
      en: ['Excellent skills', 'Passion for Japanese cuisine', 'A refined palate and creativity', 'Friendliness and enjoyment of working with people', 'A clean and team-oriented demeanor']
    },
    offer: {
      de: ['Arbeit und persönliche Entwicklung in einem erfolgreichen Restaurant', 'Freundliche Kollegen und eine Sechs-Tage-Woche'],
      en: ['Work and personal growth in a successful restaurant', 'Friendly colleagues and a six-day week']
    }
  },
  { 
    title: { de: 'Zeigen Sie uns, was Sie können: Servicekraft (m/w) Teilzeit oder Vollzeit', en: 'Show us what you can do: Service staff (m/f) part-time or full-time' },
    expect: { 
      de: ['Eine starke Serviceorientierung', 'Einhaltung von Hygienestandards', 'Zuverlässigkeit und freundliches Auftreten', 'Gepflegtes Erscheinungsbild', 'Bereitschaft zu flexiblen Arbeitszeiten'],
      en: ['A strong service orientation in advising and assisting guests', 'Adherence to hygiene standards', 'Reliability and a friendly demeanor', 'A well-groomed appearance', 'Willingness to work flexible hours']
    },
    offer: {
      de: ['Freundliche Kollegen mit starkem Teamgeist in einem erfolgreichen Restaurant'],
      en: ['Friendly colleagues with a strong team spirit in a successful restaurant']
    }
  },
];

function AboutScreen({ lang, setLang, onNavigate }) {
  return (
    <div className="screen about">
      <section className="about-hero">
        <Photo src="assets/about-hero.jpg" kind="lounge" style={{ position:'absolute', inset:0 }} />
        <div className="about-hero-scrim" />
        <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>
        <div className="about-hero-content stagger" style={{ animationDelay:'0.1s' }}>
          <div className="about-hero-kicker">SHIKI</div>
          <h1 className="about-hero-title">{tr5(ABOUT_TEXT.title, lang)}</h1>
          <div className="about-hero-sub">{tr5(ABOUT_TEXT.sub, lang)}</div>
        </div>
      </section>
      <div className="about-desktop-wrapper">
        {/* ── About body ── */}
        <section className="about-section stagger" style={{ animationDelay: '0.2s' }}>
          <Logo height={36} color="var(--gold)" style={{ margin:'0 auto' }} />
          <h2 className="about-heading">{tr5(ABOUT_TEXT.heading, lang)}</h2>
          <div className="about-goldline">
            <span /><div className="about-diamond" /><span />
          </div>
          <div className="about-text-wrapper">
            <p className="about-text">{tr5(ABOUT_TEXT.p1, lang)}</p>
            <p className="about-text">{tr5(ABOUT_TEXT.p2, lang)}</p>
            <p className="about-text" style={{ marginBottom:0 }}>{tr5(ABOUT_TEXT.p3, lang)}</p>
          </div>
        </section>

        {/* ── In Short ── */}
        <section className="about-short stagger" style={{ animationDelay: '0.3s' }}>
          <div className="about-short-title">{tr5(ABOUT_TEXT.inShort, lang)}</div>
          <div className="about-chips">
            {(ABOUT_CHIPS[lang] || ABOUT_CHIPS.en).map((chip, i) => (
              <span key={i} className="about-chip">{chip}</span>
            ))}
          </div>
        </section>

        {/* ── Jobs ── */}
        <section className="about-jobs stagger" style={{ animationDelay: '0.4s' }}>
          <Logo height={36} color="var(--gold)" style={{ margin:'0 auto' }} />
          <div className="about-jobs-title">{tr5(ABOUT_TEXT.jobs, lang)}</div>
          
          <div className="about-jobs-grid">
            {ABOUT_JOBS.map((job, i) => (
              <div key={i} className="about-job-card">
                <div className="about-job-title">{tr5(job.title, lang)}</div>
                <div className="about-job-body">
                  <div className="about-job-list-title">{lang === 'de' ? 'Wir erwarten:' : 'We expect:'}</div>
                  <ul className="about-job-list">
                    {tr5(job.expect, lang).map((item, j) => <li key={j}>{item}</li>)}
                  </ul>
                  <div className="about-job-list-title" style={{ marginTop: '16px' }}>{lang === 'de' ? 'Wir bieten:' : 'We offer:'}</div>
                  <ul className="about-job-list">
                    {tr5(job.offer, lang).map((item, j) => <li key={j}>{item}</li>)}
                  </ul>
                </div>
                <div className="about-job-divider" />
                <div className="about-job-apply-label">{tr5(ABOUT_TEXT.applyLabel, lang)}</div>
                <div className="about-job-email">va.engler@shikileipzig.de</div>
              </div>
            ))}
          </div>

          <div className="about-apply-banner">
            <div className="about-apply-prompt">{tr5(ABOUT_TEXT.applyPrompt, lang)}</div>
            <div className="about-apply-email">va.engler@shikileipzig.de</div>
          </div>
        </section>
      </div>

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

Object.assign(window, { AboutScreen });