/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */ const { useState, useEffect, useRef, useMemo } = React; /* ---------------------------------------------------------------- COPY — DE / IT ---------------------------------------------------------------- */ const COPY = { de: { nav: ["Leistungen", "Referenzen", "Team", "FAQ", "Termin", "Kontakt"], cta: "Anfrage senden", heroEyebrow: "Elektriker in Mölten · seit 2019", heroTitle1: "Ein Anruf,", heroTitle2: "ein Termin,", heroTitle3: "fertig.", heroSub: "Elektroinstallationen, Beleuchtung, Antennentechnik, Glasfaser und Photovoltaik — persönlich, zuverlässig und direkt erreichbar in Mölten.", heroPrimary: "Projekt anfragen", heroSecondary: "Leistungen ansehen", servicesEyebrow: "04 Leistungsbereiche", servicesTitle: "Vier Kabel.\nEin Anschluss.", servicesSub: "Vom Sicherungskasten bis zur Photovoltaikanlage am Dach — alles aus einer Hand, ohne Subunternehmer.", services: [ { slug: "elektro", n: "01", title: "Elektro & Beleuchtung", body: "Neu- und Umbauten, Schaltschränke, Smart-Home, dimmbare Lichtszenen und Aussenbeleuchtung.", items: ["Hausinstallation", "Schaltanlagen", "KNX / Smart Home", "Notbeleuchtung"] }, { slug: "antenne", n: "02", title: "Antennentechnik", body: "SAT-, DVB-T- und Multischalter-Anlagen für Einzelhaus oder ganze Wohnanlagen.", items: ["SAT & Multifeed", "DVB-T2", "Multischalter", "Signalmessung"] }, { slug: "glasfaser", n: "03", title: "Glasfaser", body: "FTTH-Hausanschluss, Spleißen, Patchen und Inbetriebnahme — bis 10 Gbit ins Wohnzimmer.", items: ["FTTH Hausanschluss", "Spleißarbeiten", "LAN-Verkabelung Cat6/7", "WLAN Mesh"] }, { slug: "photovoltaik", n: "04", title: "Photovoltaik", body: "Auslegung, Montage, Speicher und Wallbox — schlüsselfertig inkl. Netzanmeldung.", items: ["Module & Wechselrichter", "Batteriespeicher", "Wallbox", "Monitoring"] }], statEyebrow: "Zahlen", stats: [ { n: "7+", l: "Jahre Erfahrung" }, { n: "420+", l: "Anlagen installiert" }, { n: "48h", l: "Reaktionszeit" }], refEyebrow: "Referenzen", refTitle: "Ausgewählte Anlagen.", refSub: "Ein kleiner Querschnitt aus den letzten Aufträgen rund um Mölten, Bozen und das Etschtal.", refs: [ { img: "assets/refs/03-led.jpg", tag: "Beleuchtung", title: "LED-Decke Wohnung", meta: "Indirekt · Holzdecke · 2024" }, { img: "assets/refs/04-kasten.jpg", tag: "Elektro", title: "Aussenverteilung", meta: "Steckdosenkasten · CEE · 2024" }, { img: "assets/refs/05-dach.jpg", tag: "Elektro", title: "Rohrinstallation Dach", meta: "Vorbereitung PV · 2024" }, { img: "assets/refs/06-antenne.jpg", tag: "Antenne", title: "Antennenanlage", meta: "DVB-T2 + SAT + Eolo · 2024" }, { img: "assets/refs/07-led.jpg", tag: "Beleuchtung", title: "LED-Profil Bad", meta: "Lichtrahmen + Akzent · 2024" }, { img: "assets/refs/08-kueche.jpg", tag: "Beleuchtung", title: "Profiküche", meta: "Panel-Licht + Lastverteilung · 2023" }, { img: "assets/refs/09-verteiler.jpg", tag: "Elektro", title: "Verteilerkasten", meta: "Hauptverteilung · Messgerät · 2024" }, { img: "assets/refs/10-led.jpg", tag: "Beleuchtung", title: "LED-Stube", meta: "Holzbalken indirekt · 2023" }, { img: "assets/refs/15-pv.jpg", tag: "Photovoltaik", title: "PV-Anlage am Hofdach", meta: "Aufdach · Mölten · 2024" }], aboutEyebrow: "Über uns", aboutTitle: "ELEKTRIX.\nDein Elektriker am Berg.", aboutBody1: "Seit 2019 verlege ich Kabel, montiere Schaltschränke und schraube Module aufs Dach — von der kleinen Lichtschalterumstellung bis zur kompletten Hofsanierung.", aboutBody2: "Werkstatt in Mölten, 1.140 m über Bozen. Kurze Wege im ganzen Etschtal, Sarntal und Burggrafenamt. Ein Mann, ein Anruf, ein Termin — kein Callcenter.", aboutMeta: [ ["Inhaber", "Markus Unterkofler"], ["Sitz", "39010 Mölten (BZ)"], ["Tätig seit", "2019"], ["Sprachen", "Deutsch · Italiano"]], processEyebrow: "Ablauf", processTitle: "Vom ersten Anruf\nbis zur Inbetriebnahme.", process: [ { n: "01", t: "Anruf oder Mail", b: "Du beschreibst kurz was ansteht. Ich melde mich innerhalb von 48 Stunden zurück." }, { n: "02", t: "Lokalaugenschein", b: "Termin vor Ort. Wir gehen die Anlage durch, ich messe nach und nehme Foto-Notizen." }, { n: "03", t: "Angebot", b: "Schriftlich, gegliedert nach Position, mit Material- und Arbeitskosten getrennt." }, { n: "04", t: "Ausführung", b: "Sauber, pünktlich, mit Schutzfolie. Übergabe inkl. Konformitätserklärung." }], contactEyebrow: "Kontakt", contactTitle: "Anfrage senden.", contactSub: "Schick mir kurz worum es geht — ich melde mich werktags innerhalb von 48 Stunden zurück.", form: { name: "Name", email: "E-Mail", phone: "Telefon", topic: "Bereich", message: "Worum geht's?", send: "Anfrage senden", sent: "Danke! Deine Anfrage ist angekommen." }, topics: ["Elektro & Beleuchtung", "Antennentechnik", "Glasfaser", "Photovoltaik", "Etwas anderes"], footerTag: "Elektro · Antenne · Glasfaser · Photovoltaik", footerRights: "© 2026 ELEKTRIX des Unterkofler Markus · MwSt-Nr. IT 0000 0000 000" }, it: { nav: ["Servizi", "Lavori", "Team", "FAQ", "Appuntamento", "Contatti"], cta: "Richiedi preventivo", heroEyebrow: "Elettricista a Meltina · dal 2019", heroTitle1: "Una chiamata,", heroTitle2: "un appuntamento,", heroTitle3: "fatto.", heroSub: "Impianti elettrici, illuminazione, antenne, fibra ottica e fotovoltaico — disponibile di persona, a Meltina e in tutto l'Alto Adige.", heroPrimary: "Richiedi preventivo", heroSecondary: "Vedi i servizi", servicesEyebrow: "04 aree di intervento", servicesTitle: "Quattro cavi.\nUn unico spinotto.", servicesSub: "Dal quadro elettrico al fotovoltaico in copertura — tutto da un unico interlocutore, senza subappalti.", services: [ { slug: "elektro", n: "01", title: "Elettrico & illuminazione", body: "Nuovi impianti e ristrutturazioni, quadri, smart-home, scenari luce dimmerabili, illuminazione esterna.", items: ["Impianti civili", "Quadri elettrici", "KNX / Smart Home", "Illuminazione di sicurezza"] }, { slug: "antenne", n: "02", title: "Antenne", body: "Impianti SAT, DVB-T e multiswitch per singola abitazione o intero condominio.", items: ["SAT & Multifeed", "DVB-T2", "Multiswitch", "Misure di segnale"] }, { slug: "glasfaser", n: "03", title: "Fibra ottica", body: "Allaccio FTTH, giunzioni, patch e collaudo — fino a 10 Gbit in salotto.", items: ["Allaccio FTTH", "Giunzioni", "Cablaggio Cat6/7", "WiFi Mesh"] }, { slug: "photovoltaik", n: "04", title: "Fotovoltaico", body: "Dimensionamento, montaggio, accumulo e wallbox — chiavi in mano con pratiche di rete incluse.", items: ["Moduli & inverter", "Accumulo", "Wallbox", "Monitoraggio"] }], statEyebrow: "Numeri", stats: [ { n: "7+", l: "Anni di esperienza" }, { n: "420+", l: "Impianti realizzati" }, { n: "48h", l: "Tempo di risposta" }], refEyebrow: "Lavori", refTitle: "Impianti selezionati.", refSub: "Una piccola panoramica degli ultimi lavori intorno a Meltina, Bolzano e la Val d'Adige.", refs: [ { img: "assets/refs/03-led.jpg", tag: "Illuminazione", title: "Soffitto LED", meta: "Indiretta · soffitto in legno · 2024" }, { img: "assets/refs/04-kasten.jpg", tag: "Elettrico", title: "Quadro esterno", meta: "Cassetta CEE · 2024" }, { img: "assets/refs/05-dach.jpg", tag: "Elettrico", title: "Tubi in copertura", meta: "Predisposizione FV · 2024" }, { img: "assets/refs/06-antenne.jpg", tag: "Antenne", title: "Impianto antenne", meta: "DVB-T2 + SAT + Eolo · 2024" }, { img: "assets/refs/07-led.jpg", tag: "Illuminazione", title: "LED in bagno", meta: "Cornice + accento · 2024" }, { img: "assets/refs/08-kueche.jpg", tag: "Illuminazione", title: "Cucina professionale", meta: "Pannelli + distribuzione · 2023" }, { img: "assets/refs/09-verteiler.jpg", tag: "Elettrico", title: "Quadro elettrico", meta: "Distribuzione principale · 2024" }, { img: "assets/refs/10-led.jpg", tag: "Illuminazione", title: "LED in stube", meta: "Travi in legno · indiretta · 2023" }, { img: "assets/refs/15-pv.jpg", tag: "Fotovoltaico", title: "Impianto FV su tetto", meta: "Aufdach · Meltina · 2024" }], aboutEyebrow: "Chi siamo", aboutTitle: "ELEKTRIX.\nIl tuo elettricista in montagna.", aboutBody1: "Dal 2019 stendo cavi, monto quadri e avvito moduli sul tetto — dalla piccola modifica di un interruttore al rifacimento completo di un maso.", aboutBody2: "Officina a Meltina, 1.140 m sopra Bolzano. Tragitti brevi in tutta la Val d'Adige, Val Sarentino e Burgraviato. Una persona, una telefonata, un appuntamento — niente call-center.", aboutMeta: [ ["Titolare", "Markus Unterkofler"], ["Sede", "39010 Meltina (BZ)"], ["Attivo dal", "2019"], ["Lingue", "Deutsch · Italiano"]], processEyebrow: "Iter", processTitle: "Dalla telefonata\nalla messa in servizio.", process: [ { n: "01", t: "Telefonata o mail", b: "Mi racconti in due righe di cosa si tratta. Rispondo entro 48 ore." }, { n: "02", t: "Sopralluogo", b: "Appuntamento in loco. Verifichiamo l'impianto, prendo misure e foto." }, { n: "03", t: "Preventivo", b: "Scritto, diviso per voci, con materiale e manodopera separati." }, { n: "04", t: "Esecuzione", b: "Pulito, puntuale, con teli di protezione. Consegna con dichiarazione di conformità." }], contactEyebrow: "Contatti", contactTitle: "Richiedi preventivo.", contactSub: "Scrivimi di cosa hai bisogno — rispondo nei giorni lavorativi entro 48 ore.", form: { name: "Nome", email: "E-mail", phone: "Telefono", topic: "Area", message: "Di cosa si tratta?", send: "Invia richiesta", sent: "Grazie! Ho ricevuto la tua richiesta." }, topics: ["Elettrico & illuminazione", "Antenne", "Fibra ottica", "Fotovoltaico", "Altro"], footerTag: "Elettrico · Antenne · Fibra · Fotovoltaico", footerRights: "© 2026 ELEKTRIX di Unterkofler Markus · P.IVA IT 0000 0000 000" } }; /* ---------------------------------------------------------------- INLINE ICONS (originals, simple line) ---------------------------------------------------------------- */ const Icon = { wifi: (p) => , cam: (p) => , speaker: (p) => , bulb: (p) => , plug: (p) => , bolt: (p) => , arrow: (p) => , arrowDown: (p) => , check: (p) => }; const SERVICE_ICONS = [Icon.bulb, Icon.cam, Icon.wifi, Icon.bolt]; /* ---------------------------------------------------------------- LOGO — recreation in pure HTML/CSS of the bracket-wordmark-plug ---------------------------------------------------------------- */ function Logo({ size = 36, compact = false }) { return (
[ ELEKTRI X
); } /* ---------------------------------------------------------------- NAV ---------------------------------------------------------------- */ function Nav({ t, onContact, lang, setLang, lime }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 12); h(); window.addEventListener("scroll", h, { passive: true }); return () => window.removeEventListener("scroll", h); }, []); const ids = ["leistungen", "referenzen", "ueber-uns", "faq", "termin", "kontakt"]; return (
·
{t.cta}
{open &&
{t.nav.map((label, i) => setOpen(false)}>{label} )} setOpen(false)}>{t.cta}
}
); } /* ---------------------------------------------------------------- HERO ---------------------------------------------------------------- */ function Hero({ t, variant }) { return (
{t.heroEyebrow}

{t.heroTitle1} {t.heroTitle2} {t.heroTitle3}

{t.heroSub}

{t.heroPrimary} {t.heroSecondary}
{t.services.map((s, i) => { const I = SERVICE_ICONS[i]; return ( {s.title} ); })}
{/* Right side hero photo */}
scroll
); } function CircuitArt() { return ( {/* the big bracket from the logo, scaled up */} {/* connector tabs */} {/* nodes along the wire */} {[ { x: 130, y: 200, label: "01" }, { x: 260, y: 320, label: "02" }, { x: 130, y: 440, label: "03" }, { x: 360, y: 560, label: "04" }]. map((n, i) => {n.label} )} {/* lime square accent */} X {/* big bolt mark bottom-left */} ); } /* ---------------------------------------------------------------- MARQUEE ---------------------------------------------------------------- */ function Marquee({ t }) { const items = t.services.map((s) => s.title); const row = [...items, ...items, ...items, ...items]; return ( ); } /* ---------------------------------------------------------------- SERVICES ---------------------------------------------------------------- */ function Services({ t, lang }) { return (
{t.services.map((s, i) => { const I = SERVICE_ICONS[i]; const photos = [ "assets/refs/10-led.jpg", // Elektro & Beleuchtung "assets/refs/06-antenne.jpg", // Antenne "assets/refs/12-glasfaser.jpg", // Glasfaser (cables in conduit) "assets/refs/15-pv.jpg" // Photovoltaik ]; return (
{s.title}
{s.n}

{s.title}

{s.body}

    {s.items.map((it, j) =>
  • {it}
    • )}
{lang === "de" ? "Mehr erfahren" : "Scopri di più"}
); })}
); } /* ---------------------------------------------------------------- STATS ---------------------------------------------------------------- */ function Stats({ t }) { return (
— {t.statEyebrow}
{t.stats.map((s, i) =>
{s.n}
{s.l}
)}
); } /* ---------------------------------------------------------------- REFERENCES ---------------------------------------------------------------- */ function Refs({ t }) { return (
{t.refs.map((r, i) =>
{r.title} {r.tag}

{r.title}

{r.meta}
)}
); } function PhotoSlot({ kind, label, idx }) { // Visually distinct, illustrative slots — branded, clearly intentional placeholders // until the user supplies real on-site photos. const scenes = { pv: {/* roof */} {/* PV modules grid */} {[0, 1, 2, 3].map((r) => [0, 1, 2, 3, 4, 5].map((c) => ) )} , panel: {/* rows of breakers */} {[0, 1, 2, 3, 4].map((r) => {Array.from({ length: 12 }).map((_, c) => )} )} , fiber: {/* glowing fiber strands */} {Array.from({ length: 14 }).map((_, i) => { const y = 30 + i * 26; const hue = i % 3 === 0 ? "#c5f23d" : i % 2 === 0 ? "#5ed3ff" : "#ff9b54"; return ( ); })} {/* patch panel hint */} {Array.from({ length: 24 }).map((_, i) => )} , light: {/* hanging pendants */} {[150, 300, 450].map((x, i) => )} {/* table line */} }; return (
{scenes[kind] || scenes.panel} FOTO · {label.toUpperCase()}
); } function Placeholder({ label, idx }) { // subtle diagonal stripes, monospace label — explicit "drop a photo here" const id = "ph-" + idx; return ( FOTO · {label.toUpperCase()} ); } /* ---------------------------------------------------------------- ABOUT ---------------------------------------------------------------- */ function About({ t }) { return (
Markus · Mölten · 1.140 m
— {t.aboutEyebrow}

{t.aboutTitle.split("\n").map((l, i) => {l}
)}

{t.aboutBody1}

{t.aboutBody2}

{t.aboutMeta.map(([k, v], i) =>
{k}
{v}
)}
); } function PortraitPlaceholder() { // Real photo — LED Stube, captures the brand: warm finish, technical excellence. return (
LED-Beleuchtung in der Stube ANLAGE · LED-STUBE
); } /* ---------------------------------------------------------------- PROCESS ---------------------------------------------------------------- */ function Process({ t }) { const ref = useRef(null); const [active, setActive] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver( (entries) => entries.forEach(e => { if (e.isIntersecting) { setActive(true); io.disconnect(); } }), { threshold: 0.25 } ); io.observe(ref.current); return () => io.disconnect(); }, []); const total = t.process.length; return (
    {t.process.map((p, i) =>
    2. )}
); } /* ---------------------------------------------------------------- CONTACT ---------------------------------------------------------------- */ function Contact({ t, lang }) { const [form, setForm] = useState({ name: "", email: "", phone: "", topic: t.topics[0], message: "" }); const [sent, setSent] = useState(false); const u = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); const subject = encodeURIComponent(`[ELEKTRIX-Anfrage] ${form.topic} · ${form.name}`); const lines = [ `Name: ${form.name}`, `E-Mail: ${form.email}`, `Telefon: ${form.phone || "—"}`, `Bereich: ${form.topic}`, "", "Worum geht's:", form.message, "", "— gesendet via elektrix.it", ]; const body = encodeURIComponent(lines.join("\n")); window.location.href = `mailto:info@elektrix.it?subject=${subject}&body=${body}`; setSent(true); setTimeout(() => setSent(false), 4000); }; return (
— {t.contactEyebrow}

{t.contactTitle}

{t.contactSub}

{t.topics.map((tp) => )}