/* Rust Truck — Home screen. Centered oxblood hero (no imagery yet),
   the-truck intro, what-we-do feature cards, a drinks teaser and a
   booking CTA band. Responsive across desktop / tablet / mobile. */
(function () {
  const { Wordmark, Button, Eyebrow, Card, Badge } = window.RustTruckDesignSystem_a832c6;

  function HomeScreen({ lang, onNavigate }) {
    const I = window.RTIcons;
    const el = lang === 'EL';
    const bp = window.useViewport();
    const pad = bp.mobile ? '0 20px' : '0 32px';
    const wrap = { maxWidth: 'var(--container-lg)', margin: '0 auto', padding: pad };
    const sectionY = bp.mobile ? 56 : 76;

    const T = {
      slogan: el ? 'φέρνουμε το μπαρ σε εσάς' : 'we bring the bar to you',
      book: el ? 'Κλείσε το φορτηγό' : 'Book the truck',
      seeDrinks: el ? 'Δες τα ποτά' : 'See the drinks',
    };

    const features = [
      { icon: 'Calendar', t: el ? 'Γάμοι' : 'Weddings', d: el ? 'Welcome spritz μέχρι το τελευταίο ποτό της βραδιάς.' : 'From a welcome spritz to the last pour of the night.' },
      { icon: 'Martini', t: el ? 'Πάρτι' : 'Private parties', d: el ? 'Γενέθλια, επέτειοι, αυλές. Εμείς φέρνουμε τον πάγο.' : 'Birthdays, anniversaries, back-garden blowouts — we bring the ice.' },
      { icon: 'Truck', t: el ? 'Φεστιβάλ' : 'Festivals & pop-ups', d: el ? 'Στήνουμε γρήγορα και σερβίρουμε με ουρά μέχρι έξω.' : 'We set up fast and serve a queue out the door.' },
    ];

    const drinks = [
      { n: el ? 'Παλιομοδίτικο' : 'Old Fashioned', d: el ? 'Bourbon, demerara, bitters' : 'Bourbon, demerara, bitters', tag: el ? 'Σπεσιαλιτέ' : 'Signature' },
      { n: 'Negroni', d: el ? 'Τζιν, Campari, βερμούτ' : 'Gin, Campari, vermouth', tag: el ? 'Κλασικό' : 'Classic' },
      { n: el ? 'Σπρίτζ Εσπερίδα' : 'Hesperidi Spritz', d: el ? 'Prosecco, aperitivo, σόδα' : 'Prosecco, aperitivo, soda', tag: el ? 'Σπεσιαλιτέ' : 'Signature' },
    ];

    const cardCols = bp.mobile ? '1fr' : bp.tablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';

    return (
      <div>
        {/* HERO — centered, image-free */}
        <section style={{
          background: 'var(--brick-700)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)',
          color: 'var(--paper-50)', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ ...wrap, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: bp.mobile ? '60px 20px 68px' : '92px 32px 100px' }}>
            <Wordmark variant="oxblood" size="hero" />
            <p style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(28px,3.6vw,44px)', color: 'var(--brick-100)', margin: '14px 0 0', lineHeight: 1.1 }}>
              {T.slogan}
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap', justifyContent: 'center' }}>
              <Button variant="primary" withArrow onClick={() => onNavigate('book')}>{T.book}</Button>
              <Button variant="ghost" onClick={() => onNavigate('drinks')}
                style={{ borderColor: 'var(--paper-50)', color: 'var(--paper-50)' }}>{T.seeDrinks}</Button>
            </div>
          </div>
        </section>

        {/* THE TRUCK intro — centered, image-free */}
        <section style={{ background: 'var(--paper-100)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)' }}>
          <div style={{ ...wrap, padding: `${sectionY + 8}px ${bp.mobile ? 20 : 32}px`, maxWidth: 820, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow align="center">{el ? 'Η ιστορία' : 'The story'}</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(30px,4vw,52px)', lineHeight: 0.98, color: 'var(--ink-900)', margin: '16px 0 0' }}>
              {el ? 'Ένα παλιό φορτηγό, καλοφτιαγμένα ποτά' : 'One old truck, properly-made drinks'}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, lineHeight: 1.6, color: 'var(--ink-700)', margin: '20px 0 0', maxWidth: '56ch', textWrap: 'pretty' }}>
              {el
                ? 'Αναλαμβάνουμε το στήσιμο, τον πάγο και το σερβίρισμα — εσείς κάνετε την πρόποση. Από welcome κοκτέιλ μέχρι το κλείσιμο, το μπαρ έρχεται σε εσάς.'
                : 'We handle the setup, the ice, and the pour — you handle the toast. From a welcome cocktail to last orders, the bar comes to you.'}
            </p>
            <div style={{ display: 'flex', gap: bp.mobile ? 32 : 48, marginTop: 34, flexWrap: 'wrap', justifyContent: 'center' }}>
              {[['120+', el ? 'εκδηλώσεις' : 'events poured'], ['18', el ? 'κοκτέιλ στη λίστα' : 'cocktails on the list'], ['48ω', el ? 'προσφορά εντός' : 'quote within']].map(([num, lab]) => (
                <div key={lab}>
                  <div style={{ fontFamily: 'var(--font-signage)', fontSize: 44, color: 'var(--brick-500)', lineHeight: 1 }}>{num}</div>
                  <div style={{ fontFamily: 'var(--font-label)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-500)', marginTop: 6 }}>{lab}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* WHAT WE DO */}
        <section style={{ background: 'var(--paper-200)' }}>
          <div style={{ ...wrap, padding: `${sectionY}px ${bp.mobile ? 20 : 32}px` }}>
            <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <Eyebrow align="center">{el ? 'Τι κάνουμε' : 'What we do'}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(30px,3.6vw,46px)', color: 'var(--ink-900)', margin: '14px 0 0' }}>
                {el ? 'Για κάθε περίσταση' : 'For every kind of party'}
              </h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: cardCols, gap: 20, marginTop: 44 }}>
              {features.map((f) => {
                const Ico = I[f.icon];
                return (
                  <Card key={f.t} variant="paper" raised>
                    <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-sm)', background: 'var(--brick-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                      <Ico size={26} stroke="var(--amber-400)" />
                    </div>
                    <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 22, color: 'var(--ink-900)', margin: 0 }}>{f.t}</h3>
                    <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: 'var(--ink-700)', margin: '12px 0 0' }}>{f.d}</p>
                  </Card>
                );
              })}
            </div>
          </div>
        </section>

        {/* DRINKS TEASER */}
        <section style={{ background: 'var(--paper-100)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)' }}>
          <div style={{ ...wrap, padding: `${sectionY}px ${bp.mobile ? 20 : 32}px` }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
              <div>
                <Eyebrow>{el ? 'Από τη λίστα' : 'From the list'}</Eyebrow>
                <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(30px,3.6vw,46px)', color: 'var(--ink-900)', margin: '14px 0 0' }}>
                  {el ? 'Λίγα από τα αγαπημένα' : 'A few of the favourites'}
                </h2>
              </div>
              <Button variant="secondary" withArrow onClick={() => onNavigate('drinks')}>{el ? 'Όλη η λίστα' : 'Full menu'}</Button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: cardCols, gap: 20, marginTop: 40 }}>
              {drinks.map((d) => (
                <Card key={d.n} variant="paper">
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 20, color: 'var(--ink-900)', margin: 0, lineHeight: 1 }}>{d.n}</h3>
                    <Badge tone={d.tag === 'Classic' || d.tag === 'Κλασικό' ? 'outline' : 'amber'}>{d.tag}</Badge>
                  </div>
                  <p style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 15, color: 'var(--ink-600)', margin: '10px 0 0' }}>{d.d}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* BOOKING CTA BAND */}
        <section style={{ background: 'var(--ink-900)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)', color: 'var(--paper-50)' }}>
          <div style={{ ...wrap, padding: `${sectionY}px ${bp.mobile ? 20 : 32}px`, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: bp.mobile ? 28 : 34, color: 'var(--amber-400)', margin: 0, lineHeight: 1.2, whiteSpace: 'nowrap' }}>{el ? 'στην υγειά μας!' : 'cheers to that'}</p>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(32px,4.4vw,58px)', lineHeight: 0.95, margin: '22px 0 0' }}>
              {el ? 'Φέρε το μπαρ στην εκδήλωσή σου' : 'Bring the bar to your event'}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, color: 'var(--paper-300)', margin: '18px 0 0', maxWidth: '48ch', textWrap: 'pretty' }}>
              {el ? 'Πες μας ημερομηνία και τόπο — επιστρέφουμε με προσφορά μέσα σε 48 ώρες.' : 'Tell us the date and the place — we’ll come back with a quote within 48 hours.'}
            </p>
            <div style={{ marginTop: 30 }}>
              <Button variant="primary" size="lg" withArrow onClick={() => onNavigate('book')}>{T.book}</Button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.RTHomeScreen = HomeScreen;
})();