// Sitar — Home page

const { c: hc, f: hf } = window.SITAR;

const HeroArt = ({ src }) => (
  <div style={{
    width: '100%', aspectRatio: '3/4',
    background: hc.nightDeep,
    overflow: 'hidden',
  }}>
    <img
      src={src}
      alt="Sitar"
      style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', display: 'block' }}
    />
  </div>
);

const Home = ({ onReserve }) => {
  const { t } = useLang();
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : tablet ? 36 : 56;
  const secPad = mobile ? 60 : tablet ? 80 : 120;

  const signatures = [
    {
      name: 'Chana Masala',
      sub: t('Kichererbsen in Curry, frische Tomaten, Ingwer', 'Chickpeas in curry, fresh tomatoes, ginger'),
      price: '13,90',
      tag: t('vegetarisch', 'vegetarian'),
      img: 'food-gen-images/chana masala.png',
      pos: 'right center',
    },
    {
      name: 'Chicken Tikka',
      sub: t('Mariniertes Hühnerfleisch, Joghurt, Holzkohle-Tandoor', 'Marinated chicken, yoghurt, charcoal tandoor'),
      price: '17,50',
      tag: t('Tandoor-Klassiker', 'Tandoor classic'),
      img: 'food-gen-images/chicken tikka.png',
    },
    {
      name: 'Mutton Vindaloo',
      sub: t('Zartes Lammfleisch, Kartoffeln, Spezialgewürze aus Goa', 'Tender lamb, potatoes, special spices from Goa'),
      price: '17,50',
      tag: t('sehr scharf', 'very hot'),
      img: null,
    },
  ];

  return (
    <div style={{ background: hc.night, color: hc.bone, fontFamily: hf.sans }}>
      {/* HERO */}
      <div style={{ position: 'relative', overflow: 'hidden', minHeight: mobile ? 'auto' : 760 }}>
        {!mobile && (
          <div style={{
            position: 'absolute', top: '-15%', right: '-8%', width: 700, height: 700,
            background: `radial-gradient(circle, ${hc.tandoor}22 0%, transparent 60%)`,
            pointerEvents: 'none',
          }}/>
        )}
        <div style={{
          padding: `24px ${px}px 0`,
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.1fr 0.9fr',
          gap: mobile ? 32 : 56,
          position: 'relative',
        }}>
          <div style={{ paddingTop: 24 }}>
            <div style={{ fontFamily: hf.mono, fontSize: 11, letterSpacing: 2.5, color: hc.tandoor, textTransform: 'uppercase', marginBottom: 32 }}>
              —— {t('Indische Küche in Lehel', 'Indian Kitchen in Lehel')}
            </div>
            <h1 style={{
              fontFamily: hf.serif,
              fontSize: mobile ? 64 : tablet ? 108 : 156,
              lineHeight: 0.92, margin: 0,
              fontWeight: 400,
              letterSpacing: mobile ? -1 : -3,
            }}>
              {t('Gewürze,', 'Spices,')}<br/>
              {t('Holzkohle,', 'charcoal,')}<br/>
              <span style={{ fontStyle: 'italic', color: hc.rose }}>{t('ein Tandoor.', 'one tandoor.')}</span>
            </h1>
            <div style={{ marginTop: 36, fontFamily: hf.serif, fontSize: mobile ? 18 : 24, lineHeight: 1.4, opacity: 0.85, maxWidth: 480, fontStyle: 'italic' }}>
              {t('Das Geheimnis liegt in den Gewürzen.', 'The secret lives in the spices.')}
            </div>
            <div style={{ display: 'flex', gap: 16, marginTop: mobile ? 28 : 44, alignItems: 'center' }}>
              <button
                onClick={onReserve}
                style={{
                  background: hc.tandoor, color: hc.bone, border: 'none',
                  padding: mobile ? '14px 24px' : '18px 32px',
                  fontFamily: hf.sans, fontSize: 13, fontWeight: 600,
                  letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
                  width: mobile ? '100%' : 'auto',
                }}
              >{t('Tisch reservieren →', 'Reserve a table →')}</button>
            </div>
          </div>
          {!mobile && (
            <div style={{ position: 'relative', paddingTop: 24 }}>
              <HeroArt src={window.SITAR_IMAGES.logoFull} />
              <div style={{
                position: 'absolute', top: 60, left: -32, background: hc.bone, color: hc.night,
                padding: '16px 20px', fontFamily: hf.serif, fontSize: 17, fontStyle: 'italic',
                maxWidth: 220, lineHeight: 1.3, boxShadow: '0 14px 40px rgba(0,0,0,0.3)',
              }}>
                <div style={{ fontFamily: hf.mono, fontSize: 9, letterSpacing: 2, fontStyle: 'normal', textTransform: 'uppercase', opacity: 0.6, marginBottom: 6 }}>
                  {t('Tagesgericht', "Tonight's special")}
                </div>
                {t('Butter Chicken — unser Hausrezept.', 'Butter Chicken — our house recipe.')}
              </div>
            </div>
          )}
        </div>
        <div style={{ position: mobile ? 'relative' : 'absolute', bottom: 0, left: 0, right: 0, marginTop: mobile ? 24 : 0 }}>
          <HoursStrip />
        </div>
      </div>

      {/* SIGNATURES */}
      <div style={{ padding: `${secPad}px ${px}px`, background: hc.nightDeep }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: mobile ? 32 : 56 }}>
          <div>
            <div style={{ fontFamily: hf.mono, fontSize: 11, letterSpacing: 2.5, color: hc.tandoor, textTransform: 'uppercase', marginBottom: 16 }}>
              —— {t('Unsere Klassiker', 'Signatures')}
            </div>
            <h2 style={{ fontFamily: hf.serif, fontSize: mobile ? 44 : tablet ? 64 : 88, fontWeight: 400, margin: 0, letterSpacing: mobile ? -1 : -2, lineHeight: 0.95 }}>
              {t('Drei Gerichte.', 'Three dishes.')} <span style={{ fontStyle: 'italic', color: hc.rose }}>{t('Kein Kompromiss.', 'No compromise.')}</span>
            </h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : tablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: mobile ? 24 : 32 }}>
          {signatures.map((d, i) => (
            <div key={i}>
              <div style={{ width: '100%', aspectRatio: '1/1', overflow: 'hidden', background: hc.nightDeep }}>
                {d.img
                  ? <img src={d.img} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: d.pos || 'center center', display: 'block' }} />
                  : <Placeholder label={d.name} ratio="1/1" tone="dark" />
                }
              </div>
              <div style={{ marginTop: 20 }}>
                <div style={{ fontFamily: hf.mono, fontSize: 10, letterSpacing: 2, color: hc.tandoor, textTransform: 'uppercase' }}>{d.tag}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 8 }}>
                  <div style={{ fontFamily: hf.serif, fontSize: mobile ? 24 : 32, fontWeight: 500, fontStyle: 'italic' }}>{d.name}</div>
                  <div style={{ fontFamily: hf.serif, fontSize: mobile ? 18 : 22, opacity: 0.85 }}>€{d.price}</div>
                </div>
                <div style={{ fontFamily: hf.serif, fontSize: mobile ? 14 : 17, opacity: 0.7, marginTop: 4, lineHeight: 1.4 }}>{d.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* STORY */}
      <div style={{ padding: `${secPad}px ${px}px`, background: hc.bone, color: hc.night }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1.2fr', gap: mobile ? 32 : 80, alignItems: 'center' }}>
          <div>
            <Placeholder label="STORY · CHEF PORTRAIT" ratio="4/5" tone="light" src={window.SITAR_IMAGES.chef} />
          </div>
          <div>
            <div style={{ fontFamily: hf.mono, fontSize: 11, letterSpacing: 2.5, color: hc.tandoor, textTransform: 'uppercase', marginBottom: 24 }}>
              —— {t('Unsere Geschichte', 'Our story')}
            </div>
            <h2 style={{ fontFamily: hf.serif, fontSize: mobile ? 40 : tablet ? 56 : 76, fontWeight: 400, margin: 0, letterSpacing: mobile ? -1 : -1.5, lineHeight: 1 }}>
              {t('Aus einem Tandoor,', 'One tandoor,')} <span style={{ fontStyle: 'italic' }}>{t('mitten in Lehel.', 'in the heart of Lehel.')}</span>
            </h2>
            <div style={{ fontFamily: hf.serif, fontSize: mobile ? 17 : 21, lineHeight: 1.5, marginTop: 36, maxWidth: 520, opacity: 0.85 }}>
              {t(
                'Das Geheimnis liegt nicht nur in der Auswahl der Gewürze — sondern darin, sie sorgfältig aufeinander abzustimmen. Nur ein Feuer, nur ein Tandoor: der krugförmige Holzkohlen-Lehmofen, in dem alles gebacken, gegrillt und geröstet wird. Jede Gewürzmischung in Sitars Küche ist individuell abgestimmt — und wird wie ein Geheimnis gehütet.',
                'The secret lies not just in the range of spices — but in how carefully they are brought together. One fire, one tandoor: the clay oven where everything is baked, grilled and roasted at intense heat. Every spice blend in Sitar\'s kitchen is individually tuned — and guarded like a secret.'
              )}
            </div>
          </div>
        </div>
      </div>

      {/* PRESS */}
      <div style={{ padding: `${mobile ? 60 : 100}px ${px}px`, background: hc.night }}>
        <div style={{ fontFamily: hf.mono, fontSize: 11, letterSpacing: 2.5, color: hc.tandoor, textTransform: 'uppercase', marginBottom: 40 }}>
          —— {t('Presse', 'Press')}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: mobile ? 32 : 48 }}>
          {[
            { q: t('"Speisen wie ein Maharadscha."', '"Dining like a maharaja."'), src: 'Süddeutsche Zeitung · 2009' },
            { q: t('"Hier schmeckt\'s uns."', '"This is where we love to eat."'), src: 'TZ München · 2014' },
          ].map((p, i) => (
            <div key={i}>
              <div style={{ fontFamily: hf.serif, fontSize: mobile ? 22 : 28, fontStyle: 'italic', lineHeight: 1.3, fontWeight: 400 }}>{p.q}</div>
              <div style={{ fontFamily: hf.mono, fontSize: 11, letterSpacing: 2, color: hc.tandoor, textTransform: 'uppercase', marginTop: 20 }}>{p.src}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: `${secPad}px ${px}px`, background: hc.tandoor, color: hc.bone, position: 'relative', overflow: 'hidden' }}>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', gap: mobile ? 28 : 48 }}>
          <div>
            <h2 style={{ fontFamily: hf.serif, fontSize: mobile ? 52 : tablet ? 80 : 108, fontWeight: 400, margin: 0, letterSpacing: mobile ? -1 : -2.5, lineHeight: 0.92 }}>
              {t('Einen Tisch für', 'A table for')} <span style={{ fontStyle: 'italic' }}>{t('heute Abend?', 'tonight?')}</span>
            </h2>
            <div style={{ fontFamily: hf.serif, fontSize: mobile ? 17 : 22, fontStyle: 'italic', marginTop: 20, opacity: 0.9 }}>
              {t('Reservierung in unter einer Minute. Wir halten Ihren Tisch 15 Minuten frei.', "Reserve in under a minute. We'll hold your seat for 15 minutes after.")}
            </div>
          </div>
          <button
            onClick={onReserve}
            style={{
              background: hc.night, color: hc.bone, border: 'none',
              padding: mobile ? '16px 28px' : '24px 40px',
              fontFamily: hf.sans, fontSize: 14, fontWeight: 600,
              letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
              whiteSpace: 'nowrap', flexShrink: 0,
              width: mobile ? '100%' : 'auto',
            }}
          >{t('Reservieren →', 'Reserve →')}</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Home });