/* JUMA Architect Landing — Sections part 2
   Process, Holistic, Heritage, FAQ, Contact, Footer
*/

/* ── PROCESS ── */
function LaProcess({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Prozess',
    title: <>Von der Vision <span className="accent">zur Realität</span>.</>,
    lead: 'Jedes Projekt beginnt mit einer Idee. Unser strukturierter Entwurfsprozess macht Ihre Vision greifbar — von der Skizze über die Materialwahl bis zum fotorealistischen Modell zeigen wir Details und Lichtwirkung, noch bevor das erste Stück realisiert wird.',
    steps: [
      { num: 'I', title: 'Skizze', copy: 'Erste Linien, Proportionen und Lichtideen — der Beginn jeder Form.' },
      { num: 'II', title: '3D-Modell', copy: 'Präzise Geometrie und konstruktive Details, BIM-kompatibel.' },
      { num: 'III', title: 'Material', copy: 'Auswahl von Glas, Metall, Behang und Oberflächen für die finale Wirkung.' },
      { num: 'IV', title: 'Visualisierung', copy: 'Fotorealistische Render zeigen die Lichtwirkung im Raum.' },
    ],
  } : {
    eyebrow: 'Process',
    title: <>From vision <span className="accent">to reality</span>.</>,
    lead: 'Every project begins with an idea. Our structured design process makes your vision tangible — from sketch through material selection to photorealistic model, we show details and lighting effect before the first piece is built.',
    steps: [
      { num: 'I', title: 'Sketch', copy: 'First lines, proportions, and lighting ideas — the beginning of every form.' },
      { num: 'II', title: '3D model', copy: 'Precise geometry and constructive detail, BIM-compatible.' },
      { num: 'III', title: 'Material', copy: 'Selection of glass, metal, drop-elements, and finishes for the final effect.' },
      { num: 'IV', title: 'Visualization', copy: 'Photorealistic renders show the lighting effect in space.' },
    ],
  };
  const imgs = [
    'assets/process/Bild-10.png',
    'assets/process/Bild-11.png',
    'assets/process/Bild-12.png',
    'assets/process/Bild-13.png',
  ];
  return (
    <section className="la-section la-process" id="prozess">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'end' }} className="resp-grid-2">
        <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 className="la-process__steps">
        {t.steps.map((s, i) => (
          <LaReveal key={i} delay={i * 100} className="la-process__step">
            <div className="la-process__step-img">
              <img src={imgs[i]} alt={s.title} loading="lazy" />
              <div className="la-process__step-num">{s.num}</div>
            </div>
            <div className="la-process__step-title">{s.title}</div>
            <p className="la-process__step-copy">{s.copy}</p>
          </LaReveal>
        ))}
      </div>
    </section>
  );
}

/* ── HOLISTIC (Licht / Form / Material / Position) ── */
function LaHolistic({ lang }) {
  const base = 'https://juma-interieur-ekd8.vercel.app/images/';
  const t = lang === 'de' ? {
    eyebrow: 'Gestaltungsachsen',
    title: <>Beleuchtung, <br/><span className="accent">ganzheitlich gedacht</span>.</>,
    lead: 'Licht, Form, Material und Position entfalten ihre Wirkung erst im gebauten Raum. Unsere Projekte zeigen, wie aus konzeptioneller Präzision atmosphärische Realität wird.',
    rows: [
      { num: '01', title: 'Licht', copy: 'Licht definiert die Atmosphäre eines Raumes durch fein abgestimmte Farbe, Intensität und Temperatur. Es modelliert Tiefe, schafft Stimmung und lenkt die Wahrnehmung auf das Wesentliche.', img: base + 'int_Bild_14.webp' },
      { num: '02', title: 'Form', copy: 'Die Form einer Leuchte entsteht aus dem Zusammenspiel von Geometrie, Proportion und visuellem Gewicht. Sie verankert das Objekt im Raum und setzt ein architektonisches Zeichen.', img: base + 'int_Bild_15.webp' },
      { num: '03', title: 'Material', copy: 'Materialität prägt Charakter und Lichtwirkung zugleich — von der Beschaffenheit der Oberfläche bis zur Transparenz des Behangs. Sie bestimmt, wie Licht gebrochen, reflektiert und erlebt wird.', img: base + 'int_Bild_16.webp' },
      { num: '04', title: 'Position', copy: 'Ob ruhig verankert oder dynamisch inszeniert: durch präzise Positionierung verschmilzt die gestalterische Intention mit der Architektur und schafft Atmosphäre.', img: base + 'int_Bild_17.webp' },
    ],
  } : {
    eyebrow: 'Design axes',
    title: <>Lighting <br/><span className="accent">conceived holistically</span>.</>,
    lead: 'Light, form, material, and position only unfold their effect within the built room. Our projects show how conceptual precision becomes atmospheric reality.',
    rows: [
      { num: '01', title: 'Light', copy: 'Light defines a room\'s atmosphere through finely tuned color, intensity, and temperature. It models depth, sets mood, and directs perception to the essential.', img: base + 'int_Bild_14.webp' },
      { num: '02', title: 'Form', copy: 'The form of a fixture emerges from the interplay of geometry, proportion, and visual weight. It anchors the object in space and sets an architectural mark.', img: base + 'int_Bild_15.webp' },
      { num: '03', title: 'Material', copy: 'Materiality shapes character and lighting effect at once — from surface texture to drop-element transparency. It determines how light is refracted, reflected, and felt.', img: base + 'int_Bild_16.webp' },
      { num: '04', title: 'Position', copy: 'Whether quietly anchored or dynamically staged: precise positioning merges design intent with architecture and creates atmosphere.', img: base + 'int_Bild_17.webp' },
    ],
  };
  return (
    <section className="la-section la-holistic">
      <div className="la-holistic__intro">
        <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>
      {t.rows.map((r, i) => (
        <LaReveal key={i} delay={i * 80} className="la-holistic__row">
          <div className="la-holistic__index">{r.num}</div>
          <div className="la-holistic__title">{r.title}</div>
          <div className="la-holistic__media img-hover">
            <img src={r.img} alt={r.title} loading="lazy" />
          </div>
          <p className="la-holistic__copy">{r.copy}</p>
        </LaReveal>
      ))}
    </section>
  );
}

/* ── HERITAGE ── */
function LaHeritage({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Wer wir sind',
    title: <>Design aus Wien. <span className="accent">Seit 1967.</span></>,
    p1: 'JUMA-Leuchten ist ein Wiener Familienunternehmen, das die Kunst der Beleuchtung seit drei Generationen weiterentwickelt. Was mit einer handgefertigten Leuchte und Pioniergeist begann, ist heute ein international tätiges Studio für maßgefertigte Lichtlösungen.',
    p2: 'Inspiriert von der zeitlosen Ästhetik klassischer Kristallluster und getragen von architektonischer Neugier entstehen individuelle Leuchten und Lichtkonzepte — mit Liebe zum Detail, technischer Raffinesse und einem klaren Anspruch an Qualität.',
    cta: 'Lernen Sie uns kennen',
  } : {
    eyebrow: 'Who we are',
    title: <>Design from Vienna. <span className="accent">Since 1967.</span></>,
    p1: 'JUMA-Leuchten is a Viennese family-run atelier advancing the craft of lighting across three generations. What began with a single handmade fixture and pioneering spirit is today an international studio for bespoke lighting solutions.',
    p2: 'Inspired by the timeless aesthetic of classical crystal chandeliers and driven by architectural curiosity, we create individual fixtures and lighting concepts — with attention to detail, technical refinement, and an uncompromising standard for quality.',
    cta: 'Get to know us',
  };
  const base = 'https://juma-interieur-ekd8.vercel.app/images/';
  return (
    <section className="la-section la-heritage" id="heritage">
      <div className="la-heritage__inner">
        <div className="la-heritage__copy">
          <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" style={{ marginBottom: 20 }}>{t.p1}</p>
          </LaReveal>
          <LaReveal delay={300}>
            <p className="la-lead" style={{ marginBottom: 36 }}>{t.p2}</p>
          </LaReveal>
          <LaReveal delay={400}>
            <a href="#contact" className="btn btn--gold">{t.cta} <span className="arr">→</span></a>
          </LaReveal>
        </div>
        <div className="la-heritage__images">
          <LaReveal delay={100} className="la-heritage__img--1"><img src={base + 'int_Bild_24.webp'} alt="" /></LaReveal>
          <LaReveal delay={200} className="la-heritage__img--2"><img src={base + 'int_Bild_25.webp'} alt="" /></LaReveal>
          <LaReveal delay={280} className="la-heritage__img--3"><img src={base + 'int_Bild_26.webp'} alt="" /></LaReveal>
          <LaReveal delay={360} className="la-heritage__img--4"><img src={base + 'int_Bild_27.webp'} alt="" /></LaReveal>
          <LaReveal delay={440} className="la-heritage__img--5"><img src={base + 'int_Bild_28.webp'} alt="" /></LaReveal>
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ── */
function LaFAQ({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'FAQ',
    title: <>Häufig gestellte <span className="accent">Fragen</span></>,
    lead: 'Antworten auf die wichtigsten Fragen zu unseren Leistungen und Ihrem Projekt.',
    items: [
      ['Wie lange dauert die Fertigung einer individuellen Leuchte?', 'Je nach Komplexität und Umfang Ihres Projekts beträgt die Produktionszeit in der Regel zwischen 6–12 Wochen nach Freigabe der finalen Entwürfe. Für dringende Projekte können wir auch Express-Lösungen anbieten.'],
      ['Welche Mindestbestellmenge gilt für Sonderanfertigungen?', 'Es gibt keine Mindestbestellmenge. Unser Fokus liegt auf maßgeschneiderten Lösungen, unabhängig von der Stückzahl.'],
      ['Können Leuchten nach eigenen Entwürfen gefertigt werden?', 'Wir prüfen individuelle Entwürfe sorgfältig auf technische Machbarkeit und verfeinern konstruktive Details bis zur optimalen Umsetzbarkeit. Realitätsnahe 3D-Modelle schaffen Klarheit für Präsentation, Abstimmung und Fertigung.'],
      ['Was kostet eine maßgeschneiderte Leuchte?', 'Die Kosten variieren je nach Größe, Komplexität, Materialien und technischen Anforderungen. Da jede Leuchte ein Unikat ist, erstellen wir Ihnen gerne ein individuelles Angebot. Kontaktieren Sie uns für eine unverbindliche Erstberatung.'],
      ['Können bestehende Leuchten restauriert oder modernisiert werden?', 'Ja, wir bieten sowohl fachgerechte Restauration als auch LED-Modernisierung bestehender Leuchten an. Wir analysieren den Zustand und erstellen ein individuelles Konzept für Instandsetzungs- oder Modernisierungsmaßnahmen.'],
      ['Wie funktioniert die Montage und Installation?', 'Die komplette Projektabwicklung inklusive fachgerechter Montage wird von unserem Team international koordiniert. Wir stellen sicher, dass jede Leuchte perfekt in Ihr Ambiente integriert wird.'],
      ['Wie funktioniert die Zusammenarbeit bei internationalen Projekten?', 'Wir verfügen über langjährige Erfahrung in internationalen Projekten und komplexen Projektstrukturen. Mithilfe verlässlicher Partner und modernster Planungssoftware koordinieren wir Kommunikation und Abläufe zentral. Auf Wunsch übernimmt ein erfahrenes Montageteam vor Ort die fachgerechte Installation.'],
    ],
  } : {
    eyebrow: 'FAQ',
    title: <>Frequently asked <span className="accent">questions</span></>,
    lead: 'Answers to the most common questions about our services and your project.',
    items: [
      ['How long does it take to manufacture a custom fixture?', 'Depending on the complexity and scope of your project, production typically takes 6–12 weeks after final design approval. We can also offer express solutions for urgent projects.'],
      ['What is the minimum order quantity for custom pieces?', 'There is no minimum order quantity. Our focus is on bespoke solutions, regardless of run size.'],
      ['Can fixtures be made to your own designs?', 'We carefully review individual designs for technical feasibility and refine constructive details to optimal buildability. Realistic 3D models create clarity for presentation, coordination, and production.'],
      ['What does a custom fixture cost?', 'Cost varies with size, complexity, materials, and technical requirements. Since every fixture is unique, we are glad to prepare an individual offer. Contact us for a no-obligation initial consultation.'],
      ['Can existing fixtures be restored or modernised?', 'Yes — we offer both professional restoration and LED modernisation of existing fixtures. We assess condition and develop an individual plan for repair or upgrade.'],
      ['How does installation work?', 'The complete project handling — including professional installation — is internationally coordinated by our team. We ensure every fixture integrates perfectly into your interior.'],
      ['How does collaboration work for international projects?', 'We have long experience with international projects and complex project structures. Using reliable partners and modern planning software, we coordinate communication and workflow centrally. On request, an experienced installation team handles on-site execution.'],
    ],
  };
  return (
    <section className="la-section la-faq" id="faq">
      <div className="la-faq__head">
        <LaReveal>
          <span className="la-eyebrow">{t.eyebrow}</span>
        </LaReveal>
        <LaReveal delay={100}>
          <h2 className="la-h-section" style={{ marginBottom: 24 }}>{t.title}</h2>
        </LaReveal>
        <LaReveal delay={200}>
          <p className="la-lead">{t.lead}</p>
        </LaReveal>
      </div>
      <div className="la-faq__list">
        {t.items.map(([q, a], i) => (
          <LaReveal key={i} delay={i * 60} as="details" className="la-faq__item">
            <summary className="la-faq__summary">
              <span>{q}</span>
              <span className="la-faq__plus" />
            </summary>
            <div className="la-faq__answer">{a}</div>
          </LaReveal>
        ))}
      </div>
    </section>
  );
}

/* ── CONTACT ── */
function LaContact({ lang }) {
  const t = lang === 'de' ? {
    eyebrow: 'Kontakt',
    title: <>Lassen Sie uns über Ihr <span className="accent">nächstes Projekt</span> sprechen.</>,
    lead: 'Sie planen ein Projekt und suchen einen Partner, der Ihre Vision für Licht versteht und umsetzt? Ob Architekt, Interior Designer oder Lichtplaner — kontaktieren Sie uns für eine unverbindliche Erstberatung.',
    why: [
      'Unverbindliche Erstberatung — innerhalb von 24 Stunden Antwort.',
      'Direkter Kontakt zum Atelier in Wien, ohne Vertrieb oder Zwischenhändler.',
      'Begleitung in jeder Phase: von der ersten Skizze bis zur Montage vor Ort.',
      'Internationale Erfahrung in mehr als 20 Ländern — auch komplexe Projektstrukturen.',
    ],
    f: { firma: 'Firma', kontakt: 'Ansprechpartner', mail: 'E-Mail', tel: 'Telefon', proj: 'Projektbeschreibung (optional)', send: 'Anfrage senden' },
  } : {
    eyebrow: 'Contact',
    title: <>Let's talk about your <span className="accent">next project</span>.</>,
    lead: 'Are you planning a project and looking for a partner who understands and realizes your vision for light? Whether architect, interior designer, or lighting planner — contact us for a no-obligation initial consultation.',
    why: [
      'No-obligation first consultation — reply within 24 hours.',
      'Direct contact with the Vienna atelier, no sales rep or middleman.',
      'Support in every phase: from first sketch to on-site installation.',
      'International experience across 20+ countries — even complex project structures.',
    ],
    f: { firma: 'Company', kontakt: 'Contact person', mail: 'Email', tel: 'Phone', proj: 'Project description (optional)', send: 'Send enquiry' },
  };
  return (
    <section className="la-section la-contact" id="contact">
      <div className="la-contact__inner">
        <div className="la-contact__why">
          <LaReveal>
            <span className="la-eyebrow">{t.eyebrow}</span>
          </LaReveal>
          <LaReveal delay={100}>
            <h2 className="la-h-section">{t.title}</h2>
          </LaReveal>
          <LaReveal delay={200}>
            <p className="la-lead">{t.lead}</p>
          </LaReveal>
          <div className="la-contact__why-list">
            {t.why.map((w, i) => (
              <LaReveal key={i} delay={300 + i * 80} className="la-contact__why-item">
                <div className="la-contact__why-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="la-contact__why-text">{w}</div>
              </LaReveal>
            ))}
          </div>
        </div>

        <ContactForm lang={lang} labels={t.f} />
      </div>
    </section>
  );
}

/* ── FOOTER (slim) ── */
function LaFooter({ lang }) {
  return (
    <footer style={{ background: 'var(--ink)', borderTop: '1px solid var(--gold-subtle)', padding: '40px var(--pad-x, 56px)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
        <div style={{ fontFamily: "'Manrope', sans-serif", fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cream-2)' }}>
          JUMA — {lang === 'de' ? 'Leuchten und Licht seit 1967' : 'Lighting since 1967'}
        </div>
        <div style={{ display: 'flex', gap: 32, fontFamily: "'Manrope', sans-serif", fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          <a href="#" style={{ color: 'var(--cream-3)', textDecoration: 'none' }}>Impressum</a>
          <a href="#" style={{ color: 'var(--cream-3)', textDecoration: 'none' }}>{lang === 'de' ? 'Datenschutz' : 'Privacy'}</a>
          <a href="https://www.jumaleuchten.at/" style={{ color: 'var(--gold)', textDecoration: 'none' }}>www.jumaleuchten.at</a>
        </div>
      </div>
    </footer>
  );
}

function ContactForm({ lang, labels }) {
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | error
  const [errorMsg, setErrorMsg] = React.useState('');

  async function onSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const payload = Object.fromEntries(data.entries());
    payload.lang = lang;
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStatus('error');
        setErrorMsg(json.error || (lang === 'de' ? 'Senden fehlgeschlagen' : 'Send failed'));
        return;
      }
      setStatus('ok');
      e.target.reset();
    } catch (err) {
      setStatus('error');
      setErrorMsg(lang === 'de' ? 'Netzwerkfehler' : 'Network error');
    }
  }

  const sending = status === 'sending';
  const buttonLabel = sending
    ? (lang === 'de' ? 'Wird gesendet…' : 'Sending…')
    : labels.send;

  return (
    <LaReveal delay={150} as="form" className="la-form" onSubmit={onSubmit}>
      <div className="la-form__field">
        <label className="la-form__label">{labels.firma}</label>
        <input className="la-form__input" type="text" name="firma" disabled={sending} />
      </div>
      <div className="la-form__field">
        <label className="la-form__label">{labels.kontakt}</label>
        <input className="la-form__input" type="text" name="kontakt" disabled={sending} />
      </div>
      <div className="la-form__field">
        <label className="la-form__label">{labels.mail}</label>
        <input className="la-form__input" type="email" name="mail" required disabled={sending} />
      </div>
      <div className="la-form__field">
        <label className="la-form__label">{labels.tel}</label>
        <input className="la-form__input" type="tel" name="tel" disabled={sending} />
      </div>
      <div className="la-form__field la-form__field--full">
        <label className="la-form__label">{labels.proj}</label>
        <textarea className="la-form__textarea" rows="3" name="proj" disabled={sending} />
      </div>
      <button type="submit" className="btn btn--gold la-form__submit" disabled={sending}>
        {buttonLabel} <span className="arr">→</span>
      </button>
      {status === 'ok' && (
        <div className="la-form__field--full" style={{ color: 'var(--gold)', fontFamily: "'Manrope',sans-serif", fontSize: 13, letterSpacing: '0.02em', marginTop: 4 }}>
          {lang === 'de' ? 'Vielen Dank — wir melden uns innerhalb von 24 Stunden.' : 'Thank you — we will reply within 24 hours.'}
        </div>
      )}
      {status === 'error' && (
        <div className="la-form__field--full" style={{ color: '#e89999', fontFamily: "'Manrope',sans-serif", fontSize: 13, letterSpacing: '0.02em', marginTop: 4 }}>
          {(lang === 'de' ? 'Konnte nicht gesendet werden: ' : 'Could not send: ') + errorMsg}
        </div>
      )}
    </LaReveal>
  );
}

Object.assign(window, { LaProcess, LaHolistic, LaHeritage, LaFAQ, LaContact, LaFooter, ContactForm });