/* JUMA Architect Landing — Sections part 1
   Hero, Pillars, Challenge, Vision, Services, Trust Marquee
*/

// Reveal-on-scroll
function LaReveal({ children, delay = 0, as = 'div', className = '', style = {}, ...rest }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setVis(true); io.unobserve(el); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref}
      className={'la-reveal ' + (vis ? 'is-in ' : '') + className}
      style={{ transitionDelay: delay + 'ms', ...style }}
      {...rest}>
      {children}
    </Tag>
  );
}

/* ── HERO ── */
function LaHero({ lang, variant = 'cinematic' }) {
  const [scrollY, setScrollY] = React.useState(0);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    const onMove = (e) => setMouse({
      x: (e.clientX / window.innerWidth - 0.5) * 2,
      y: (e.clientY / window.innerHeight - 0.5) * 2,
    });
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('mousemove', onMove);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('mousemove', onMove);
    };
  }, []);

  const t = lang === 'de' ? {
    eyebrow: 'Für Architekten · Interior Designer · Lichtplaner',
    l1: 'Licht als',
    l2: 'integraler',
    l3: 'Bestandteil',
    sub: 'der Architektur. Maßgeschneiderte Leuchten und ganzheitliche Lichtkonzepte für Architektur- und Interior-Projekte mit gestalterischem Anspruch.',
    cta1: 'Projekt besprechen',
    cta2: 'Leistungen entdecken',
    stat1: 'Jahre Atelier', stat1n: 'Seit 1967',
    stat2: 'Länder beliefert', stat2n: '20+',
    stat3: 'Realisierte Projekte', stat3n: '500+',
    stat4: 'Generationen Wien', stat4n: 'III',
  } : {
    eyebrow: 'For Architects · Interior Designers · Lighting Planners',
    l1: 'Light as',
    l2: 'integral',
    l3: 'architecture',
    sub: 'Bespoke fixtures and holistic lighting concepts for architecture and interior projects with creative ambition.',
    cta1: 'Discuss your project',
    cta2: 'Explore services',
    stat1: 'Vienna atelier', stat1n: 'Since 1967',
    stat2: 'Countries served', stat2n: '20+',
    stat3: 'Realised projects', stat3n: '500+',
    stat4: 'Generations', stat4n: 'III',
  };

  const heroImg = 'https://juma-interieur-ekd8.vercel.app/hero/AdobeStock_184823024.webp';

  return (
    <section className="la-hero" data-screen-label="Hero">
      <div className="la-hero__bg">
        <img src={heroImg} alt=""
          style={{
            transform: `scale(${1.06 + scrollY * 0.0005}) translate(${mouse.x * -8}px, ${mouse.y * -8 + scrollY * 0.25}px)`,
            transition: 'transform 1.4s cubic-bezier(.2,.6,.2,1)',
          }} />
      </div>
      <div className="la-hero__veil" />
      <div className="la-hero__glow"
        style={{
          transform: `translate(-50%, -50%) translate(${mouse.x * 30}px, ${mouse.y * 30}px)`,
          transition: 'transform 0.9s cubic-bezier(.2,.6,.2,1)',
        }} />

      <div className="la-hero__content" style={{ opacity: Math.max(0, 1 - scrollY / 700) }}>
        <h1 className="la-hero__title">
          <span className="line"><span>{t.l1}</span></span>
          <span className="line"><span className="accent">{t.l2}</span></span>
          <span className="line"><span>{t.l3}.</span></span>
        </h1>
        <div className="la-hero__ctas">
          <a href="#contact" className="btn btn--gold">{t.cta1} <span className="arr">→</span></a>
          <a href="#services" className="btn">{t.cta2}</a>
        </div>
      </div>

      <div className="la-hero__footer">
        <div className="la-hero__stat">
          <div className="la-hero__stat-num">{t.stat1n}</div>
          <div className="la-hero__stat-label">{t.stat1}</div>
        </div>
        <div className="la-hero__stat">
          <div className="la-hero__stat-num">{t.stat2n}</div>
          <div className="la-hero__stat-label">{t.stat2}</div>
        </div>
        <div className="la-hero__stat">
          <div className="la-hero__stat-num">{t.stat3n}</div>
          <div className="la-hero__stat-label">{t.stat3}</div>
        </div>
        <div className="la-hero__stat">
          <div className="la-hero__stat-num">{t.stat4n}</div>
          <div className="la-hero__stat-label">{t.stat4}</div>
        </div>
      </div>
    </section>
  );
}

/* ── PILLARS (3 quick promises right after hero) ── */
function LaPillars({ lang }) {
  const items = lang === 'de' ? [
    { num: '01', title: 'Präzise Planung & Koordination', copy: 'Wir steuern komplexe Projekte klar strukturiert und sorgen für eine reibungslose Abstimmung aller Beteiligten.' },
    { num: '02', title: <>Maßgeschneidertes<br/>Design</>, copy: 'Unsere Leuchten entstehen aus einem feinen Gespür für Intension, Proportion und Material.' },
    { num: '03', title: 'Umsetzung mit Verantwortung', copy: 'Als Familienunternehmen stehen wir seit 1967 für Verlässlichkeit, Präzision und kompromisslose Qualität.' },
  ] : [
    { num: '01', title: 'Precise planning & coordination', copy: 'We steer complex projects with clear structure and ensure seamless coordination between all stakeholders.' },
    { num: '02', title: <>Bespoke<br/>design</>, copy: 'Our fixtures emerge from a fine sense for intention, proportion, and material.' },
    { num: '03', title: 'Delivery with responsibility', copy: 'As a family-run atelier, we have stood for reliability, precision, and uncompromising quality since 1967.' },
  ];
  return (
    <section className="la-pillars">
      {items.map((it, i) => (
        <LaReveal key={i} delay={i * 100} className="la-pillar">
          <div className="la-pillar__num">{it.num}</div>
          <div className="la-pillar__title">{it.title}</div>
          <p className="la-pillar__copy">{it.copy}</p>
        </LaReveal>
      ))}
    </section>
  );
}

/* ── CHALLENGE ── */
function LaChallenge({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Die Herausforderung',
    title: <>Anspruchsvolle <span className="accent">Lichtprojekte</span></>,
    body: 'Licht entsteht nicht isoliert, sondern im Zusammenspiel mit Architektur, Materialität und Wirkung. Bei der Beleuchtung greifen technische und gestalterische Anforderungen ineinander und beeinflussen sich gegenseitig. Je höher die gestalterische Qualität, desto sensibler wird dieses Zusammenspiel.',
    body2: 'Die Herausforderung liegt darin, all diese Ebenen frühzeitig mitzudenken — und in einem Partner, der Gestaltung, Technik und Fertigung gleichermaßen versteht.',
  } : {
    eyebrow: 'The challenge',
    title: <>Demanding <span className="accent">lighting projects</span></>,
    body: 'Light does not exist in isolation. It emerges from the interplay of architecture, materiality, and effect. Technical and design requirements interlock and shape one another — the higher the design quality, the more sensitive this interplay becomes.',
    body2: 'The challenge is to address every layer from the start — and to find a partner who understands design, technique, and fabrication in equal measure.',
  };
  const base = 'https://juma-interieur-ekd8.vercel.app/images/';
  return (
    <section className="la-section" id="challenge">
      <div className="la-challenge">
        <div className="la-challenge__copy">
          <LaReveal>
            <span className="la-eyebrow">{t.eyebrow}</span>
          </LaReveal>
          <LaReveal delay={120}>
            <h2 className="la-h-section" style={{ marginBottom: 32 }}>{t.title}</h2>
          </LaReveal>
          <LaReveal delay={220}>
            <p className="la-lead" style={{ marginBottom: 20 }}>{t.body}</p>
          </LaReveal>
          <LaReveal delay={320}>
            <p className="la-lead">{t.body2}</p>
          </LaReveal>
        </div>
        <div className="la-challenge__images">
          <LaReveal delay={140} className="la-challenge__img--1">
            <img src={base + 'int_Bild_01.webp'} alt="" />
          </LaReveal>
          <LaReveal delay={260} className="la-challenge__img--2">
            <img src={base + 'int_Bild_02.webp'} alt="" />
          </LaReveal>
          <LaReveal delay={380} className="la-challenge__img--3">
            <img src={base + 'int_Bild_03.webp'} alt="" />
          </LaReveal>
        </div>
      </div>
    </section>
  );
}

/* ── VISION ── */
function LaVision({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Partnerschaft',
    title: <>Wo Ihre Vision <br/><span className="accent">zu Licht wird.</span></>,
    lead: 'Bei JUMA verstehen wir uns nicht nur als Hersteller, sondern als Partner für Architekten, Interior Designer und Lichtplaner. Wir übersetzen Ihre kreativen und technischen Vorgaben in maßgeschneiderte Beleuchtung.',
    cards: [
      { num: '01', title: 'Maximale Individualität', copy: 'Beleuchtungskonzepte entstehen nach Ihren Vorgaben und werden exakt auf Raum und Intention abgestimmt — so wird jede Installation zu einem unverwechselbaren Unikat.' },
      { num: '02', title: 'Digitale Kompetenz', copy: 'Wir modellieren, rendern und simulieren Ihre Konzepte präzise und integrieren sie nahtlos in gängige Architektur- und Planungssoftware.' },
      { num: '03', title: 'Ganzheitlicher Service', copy: 'Von der technischen Planung über Fertigung bis zur Montage und Wartung: ein einziger, kompetenter Ansprechpartner für das gesamte Projekt.' },
    ],
    cta: 'Projekt anfragen',
  } : {
    eyebrow: 'Partnership',
    title: <>Where your vision <br/><span className="accent">becomes light.</span></>,
    lead: 'At JUMA we are not just a manufacturer — we are a partner for architects, interior designers, and lighting planners. We translate your creative and technical specifications into bespoke lighting.',
    cards: [
      { num: '01', title: 'Maximum individuality', copy: 'Concepts are tailored to your specifications and tuned precisely to room and intention — so every installation becomes an unmistakable original.' },
      { num: '02', title: 'Digital fluency', copy: 'We model, render, and simulate concepts with precision, integrating them seamlessly into standard architecture and planning software.' },
      { num: '03', title: 'End-to-end service', copy: 'From technical planning through fabrication to installation and maintenance: a single competent contact for the entire project.' },
    ],
    cta: 'Request a project',
  };
  return (
    <section className="la-section la-vision" id="why-juma">
      <div className="la-vision__head">
        <div>
          <LaReveal>
            <span className="la-eyebrow">{t.eyebrow}</span>
          </LaReveal>
          <LaReveal delay={120}>
            <h2 className="la-h-section">{t.title}</h2>
          </LaReveal>
        </div>
        <LaReveal delay={220} style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
          <p className="la-lead">{t.lead}</p>
          <a href="#contact" className="btn btn--gold">{t.cta} <span className="arr">→</span></a>
        </LaReveal>
      </div>
      <div className="la-vision__cards">
        {t.cards.map((c, i) => (
          <LaReveal key={i} delay={i * 120} className="la-vision__card">
            <div className="la-vision__card-num">{c.num}</div>
            <div className="la-vision__card-title">{c.title}</div>
            <p className="la-vision__card-copy">{c.copy}</p>
          </LaReveal>
        ))}
      </div>
    </section>
  );
}

/* ── SERVICES ── */
function LaServices({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Leistungen',
    title: <>Beleuchtung ganzheitlich gedacht. <span className="accent">Präzise realisiert.</span></>,
    lead: 'Wir verbinden gestalterische Vision, technische Expertise und handwerkliche Präzision zu einem stimmigen Gesamterlebnis.',
    items: [
      { step: 'I · Beratung', title: 'Beratung & Planung', copy: 'Durchdachte Lichtkonzepte berücksichtigen jedes Detail frühzeitig, damit Gestaltung und Technik eine Einheit bilden.' },
      { step: 'II · Entwurf', title: 'Design & Produktion', copy: 'Maßgefertigte Leuchten entstehen aus einem klaren gestalterischen Anspruch. Proportion, Materialität und Lichtwirkung werden zum Statement.' },
      { step: 'III · Steuerung', title: 'Projektmanagement', copy: 'Komplexe Projekte erfordern klare Abstimmung. Wir koordinieren Schnittstellen zwischen Architektur, Fachplanern und Gewerken.' },
      { step: 'IV · Umsetzung', title: 'Montage & Service', copy: 'Die Qualität eines Konzepts beweist sich in der Realisierung. Wir gewährleisten präzise Installation, sorgfältige Wartung und Reinigung.' },
    ],
    cta: 'Beratung anfragen',
  } : {
    eyebrow: 'Services',
    title: <>Lighting conceived holistically. <span className="accent">Realised precisely.</span></>,
    lead: 'We unite design vision, technical expertise, and craftsmanship into one coherent experience.',
    items: [
      { step: 'I · Advise', title: 'Consulting & planning', copy: 'Considered lighting concepts account for every detail early, so that design and engineering form a unity.' },
      { step: 'II · Design', title: 'Design & production', copy: 'Bespoke fixtures emerge from a clear design ambition. Proportion, materiality, and light become statement.' },
      { step: 'III · Manage', title: 'Project management', copy: 'Complex projects demand clear coordination. We bridge architecture, specialist planners, and trades.' },
      { step: 'IV · Deliver', title: 'Installation & service', copy: 'A concept proves itself in its realisation. We ensure precise installation, careful maintenance, and cleaning.' },
    ],
    cta: 'Request consultation',
  };
  return (
    <section className="la-section la-services" id="services">
      <div className="la-services__head">
        <LaReveal>
          <span className="la-eyebrow">{t.eyebrow}</span>
        </LaReveal>
        <LaReveal delay={100}>
          <h2 className="la-h-section" style={{ marginBottom: 32 }}>{t.title}</h2>
        </LaReveal>
        <LaReveal delay={200}>
          <p className="la-lead">{t.lead}</p>
        </LaReveal>
      </div>
      <div className="la-services__grid">
        {t.items.map((s, i) => (
          <LaReveal key={i} delay={i * 100} className="la-service">
            <div className="la-service__step">{s.step}</div>
            <div className="la-service__title">{s.title}</div>
            <p className="la-service__copy">{s.copy}</p>
          </LaReveal>
        ))}
      </div>
      <LaReveal delay={200} style={{ marginTop: 48 }}>
        <a href="#contact" className="btn btn--gold">{t.cta} <span className="arr">→</span></a>
      </LaReveal>
    </section>
  );
}

/* ── TRUST MARQUEE ── */
function LaTrust({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Referenzen',
    title: <>Vertrauen, das wir uns <span className="accent">erarbeitet</span> haben.</>,
    lead: 'Wir arbeiten weltweit eng mit Architekten, Interior Designern und Lichtplanern zusammen. Von prunkvollen Palais über historische Hallen bis hin zu modernen Hotelanlagen — jedes Projekt erzählt seine eigene Geschichte.',
  } : {
    eyebrow: 'References',
    title: <>Trust we have <span className="accent">earned</span>.</>,
    lead: 'We collaborate worldwide with architects, interior designers, and lighting planners. From ornate palaces and historic halls to contemporary hotel complexes — every project tells its own story.',
  };
  const base = 'https://juma-interieur-ekd8.vercel.app/images/';
  const projects = [
    { img: base + 'int_Bild_04.webp', name: 'Palais Esterhazy', loc: 'Vienna' },
    { img: base + 'int_Bild_05.webp', name: 'Ritz Carlton', loc: 'Amman' },
    { img: base + 'int_Bild_06.webp', name: 'Grand Hotel', loc: 'Bukarest' },
    { img: base + 'int_Bild_07.webp', name: 'ORF Studio', loc: 'Vienna' },
    { img: base + 'int_Bild_08.webp', name: 'Palace Hotel', loc: 'Abu Dhabi' },
    { img: base + 'int_Bild_09.webp', name: 'Ritz Carlton', loc: 'Doha' },
  ];
  // Duplicate for seamless marquee
  const loop = [...projects, ...projects];
  return (
    <section className="la-trust" id="projekte">
      <div className="la-trust__head">
        <div>
          <LaReveal>
            <span className="la-eyebrow">{t.eyebrow}</span>
          </LaReveal>
          <LaReveal delay={100}>
            <h2 className="la-h-section">{t.title}</h2>
          </LaReveal>
        </div>
        <LaReveal delay={200}>
          <p className="la-lead">{t.lead}</p>
        </LaReveal>
      </div>
      <div style={{ position: 'relative' }}>
        <div className="la-marquee">
          {loop.map((p, i) => (
            <div key={i} className="la-trust__card img-hover">
              <img src={p.img} alt={p.name} />
              <div className="la-trust__card-veil" />
              <div className="la-trust__card-meta">
                <div className="la-trust__card-loc">{p.loc}</div>
                <div className="la-trust__card-name">{p.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: '64px var(--pad-x, 56px) 0', display: 'flex', justifyContent: 'center' }}>
        <LaReveal>
          <a href="#contact" className="btn">{lang === 'de' ? 'Projekt starten' : 'Start a project'} <span className="arr">→</span></a>
        </LaReveal>
      </div>
    </section>
  );
}

Object.assign(window, { LaReveal, LaHero, LaPillars, LaChallenge, LaVision, LaServices, LaTrust });