/* Rust Truck — About. The story of the truck: a narrative band, a
   short founding story, what-we-stand-for cards and a location strip.
   Image-free for now; responsive. */
(function () {
  const { Eyebrow, Card, Button } = window.RustTruckDesignSystem_a832c6;

  function AboutScreen({ 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 : 84;

    const values = [
      { icon: 'Martini', t: el ? 'Σωστά, όχι φιγουρατζίδικα' : 'Proper, not fussy', d: el ? 'Καλά υλικά, φρέσκος πάγος, σωστές αναλογίες. Κοκτέιλ μπαρ, όχι σόου.' : 'Good spirits, fresh ice, honest measures. A cocktail bar, not a show.' },
      { icon: 'Truck', t: el ? 'Ερχόμαστε σε εσάς' : 'We come to you', d: el ? 'Το φορτηγό στήνεται όπου χρειάζεται — αυλή, αμπελώνας, πλατεία.' : 'The truck sets up wherever you need it — garden, vineyard, town square.' },
      { icon: 'Calendar', t: el ? 'Φτιαγμένο για εσάς' : 'Tailored to you', d: el ? 'Προσαρμόζουμε τη λίστα στην εκδήλωση, το ύφος και τους καλεσμένους σας.' : 'We build the list around your event, your vibe and your guests.' },
    ];

    return (
      <div>
        {/* HERO band */}
        <section style={{ background: 'var(--brick-700)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)', color: 'var(--paper-50)', textAlign: 'center' }}>
          <div style={{ ...wrap, padding: bp.mobile ? '56px 20px 60px' : '84px 32px 92px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow align="center" color="var(--amber-400)">{el ? 'Σχετικά' : 'About us'}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(38px,5.6vw,72px)', lineHeight: 0.92, margin: '16px 0 0' }}>
              {el ? 'Η ιστορία του φορτηγού' : 'The story of the truck'}
            </h1>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: bp.mobile ? 28 : 34, color: 'var(--brick-100)', margin: '14px 0 0', lineHeight: 1.1 }}>
              {el ? 'φέρνουμε το μπαρ σε εσάς' : 'we bring the bar to you'}
            </p>
          </div>
        </section>

        {/* NARRATIVE */}
        <section style={{ background: 'var(--paper-100)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)' }}>
          <div style={{ maxWidth: 760, margin: '0 auto', padding: `${sectionY}px ${bp.mobile ? 20 : 32}px`, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow align="center">{el ? 'Πώς ξεκίνησε' : 'How it started'}</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(28px,3.6vw,46px)', color: 'var(--ink-900)', margin: '16px 0 0', lineHeight: 0.98 }}>
              {el ? 'Ένα παλιό φορτηγό, μια σωστή ιδέα' : 'One old truck, one proper idea'}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, lineHeight: 1.65, color: 'var(--ink-700)', margin: '22px 0 0', maxWidth: '60ch', textWrap: 'pretty' }}>
              {el
                ? 'Ξεκινήσαμε με ένα vintage φορτηγό, λίγα καλά μπουκάλια και μια απλή πεποίθηση: τα σωστά κοκτέιλ δεν χρειάζεται να μένουν κλεισμένα σε ένα μπαρ. Τα ανεβάσαμε σε ρόδες και τα φέραμε εκεί που γιορτάζει ο κόσμος.'
                : 'We started with a vintage truck, a few good bottles and one simple belief: proper cocktails shouldn’t be stuck behind one bar. So we put them on wheels and brought them to where people actually celebrate.'}
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, lineHeight: 1.65, color: 'var(--ink-700)', margin: '18px 0 0', maxWidth: '60ch', textWrap: 'pretty' }}>
              {el
                ? 'Με βάση το Μπρίστολ, γυρνάμε όλη τη Νοτιοδυτική Αγγλία για γάμους, πάρτι και φεστιβάλ — δίγλωσσα, στα Αγγλικά και τα Ελληνικά, με μια ελληνική πρόποση πάντα κερασμένη.'
                : 'Based in Bristol, we roll across the South West for weddings, parties and festivals — bilingual, in English and Greek, with a Greek toast always on the house.'}
            </p>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: bp.mobile ? 30 : 38, color: 'var(--brick-500)', margin: '26px 0 0', lineHeight: 1, whiteSpace: 'nowrap' }}>
              {el ? 'στην υγειά μας!' : 'στην υγειά μας!'}
            </p>
          </div>
        </section>

        {/* VALUES */}
        <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 stand for'}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(28px,3.4vw,44px)', color: 'var(--ink-900)', margin: '14px 0 0' }}>
                {el ? 'Τρία πράγματα, πάντα' : 'Three things, always'}
              </h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: bp.mobile ? '1fr' : bp.tablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)', gap: 20, marginTop: 44 }}>
              {values.map((v) => {
                const Ico = I[v.icon];
                return (
                  <Card key={v.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: 21, color: 'var(--ink-900)', margin: 0, lineHeight: 1.05 }}>{v.t}</h3>
                    <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: 'var(--ink-700)', margin: '12px 0 0' }}>{v.d}</p>
                  </Card>
                );
              })}
            </div>
          </div>
        </section>

        {/* LOCATION + CTA */}
        <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' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontFamily: 'var(--font-label)', fontSize: 'var(--text-2xs)', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--amber-300)' }}>
              <I.MapPin size={18} stroke="var(--amber-400)" /> {el ? 'Μπρίστολ & Νοτιοδυτική Αγγλία' : 'Bristol & the South West'}
            </div>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(30px,4.2vw,56px)', lineHeight: 0.95, margin: '20px 0 0' }}>
              {el ? 'Έλα να τα πούμε' : 'Let’s talk'}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, color: 'var(--paper-300)', margin: '16px 0 0', maxWidth: '46ch', 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: 28 }}>
              <Button variant="primary" size="lg" withArrow onClick={() => onNavigate('book')}>{el ? 'Κλείσε το φορτηγό' : 'Book the truck'}</Button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.RTAboutScreen = AboutScreen;
})();
