import React, { useState, useEffect } from ‘react’;
import {
Factory,
Phone,
Package,
Info,
ChevronRight,
CheckCircle,
MessageCircle,
ChevronLeft
} from ‘lucide-react’;

const App = () => {
const [activeTab, setActiveTab] = useState(‘home’);
const [showContact, setShowContact] = useState(false);
const [currentSlide, setCurrentSlide] = useState(0);

const slides = [
{
badge: “PROMO KHUSUS”,
title: “Mixer Sicoma Kini Lebih Canggih!”,
description: “Solusi terbaik untuk proyek beton Anda dengan teknologi pencampuran tersinkronisasi untuk hasil maksimal.”,
image: “https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “READY STOCK”,
title: “Kapasitas 2 Sampai 4 Kubik”,
description: “Kami menyediakan stok siap kirim untuk mendukung kelancaran proyek infrastruktur Anda tanpa menunggu lama.”,
image: “https://images.unsplash.com/photo-1541888946425-d81bb19480c5?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “MITRA RESMI”,
title: “Bandang Rejeki Lestari”,
description: “Distributor terpercaya untuk memastikan Anda mendapatkan unit Sicoma original dengan layanan purna jual terbaik.”,
image: “https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “HARGA TERBAIK”,
title: “Miliki Sekarang Juga!”,
description: “Dapatkan penawaran harga kompetitif dan konsultasi teknis gratis dari tim ahli kami sekarang juga.”,
image: “https://images.unsplash.com/photo-1589939705384-5185138a0470?q=80&w=1000&auto=format&fit=crop”
}
];

// Auto-play slider
useEffect(() => {
if (activeTab === ‘home’) {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
}, 5000);
return () => clearInterval(timer);
}
}, [activeTab]);

const products = [
{
size: “2 Kubik”,
type: “Twin Shaft Concrete Mixer”,
features: [“Efisiensi Tinggi”, “Tahan Lama”, “Ready Stock”]
},
{
size: “3 Kubik”,
type: “Twin Shaft Concrete Mixer”,
features: [“Teknologi Terbaru”, “Maintenance Mudah”, “Ready Stock”]
},
{
size: “4 Kubik”,
type: “Twin Shaft Concrete Mixer”,
features: [“Kapasitas Besar”, “Automated System”, “Ready Stock”]
}
];

const handleContactClick = () => {
setShowContact(true);
};

return (

{/* Header / Navigation */}

{/* Hero Section with Slider */}
{activeTab === ‘home’ && (

{/* Content Side */}

{slides[currentSlide].badge}

{slides[currentSlide].title.split(” “).map((word, i) =>
word.toLowerCase() === “canggih!” || word.toLowerCase() === “sekarang” ?
{word} : word + ” ”
)}

{slides[currentSlide].description}

setActiveTab(‘products’)}
className=”bg-black text-white px-8 py-4 rounded-xl font-bold hover:bg-gray-800 transition-all shadow-lg flex items-center gap-2″
>
Cek Katalog


Konsultasi Gratis

{/* Slider Indicators */}

{slides.map((_, idx) => (
setCurrentSlide(idx)}
className={`h-2 rounded-full transition-all duration-300 ${currentSlide === idx ? ‘w-8 bg-yellow-400’ : ‘w-2 bg-gray-200 hover:bg-gray-300’}`}
/>
))}

{/* Image Side */}

{/* Slider Controls */}
setCurrentSlide((prev) => (prev – 1 + slides.length) % slides.length)}
className=”absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-md p-2 rounded-full text-white transition-all opacity-0 group-hover:opacity-100″
>


setCurrentSlide((prev) => (prev + 1) % slides.length)}
className=”absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-md p-2 rounded-full text-white transition-all opacity-0 group-hover:opacity-100″
>

Produk Unggulan

Sicoma Twin Shaft Mixer

)}

{/* Stats/Quick Info */}
{activeTab === ‘home’ && (

2-4m³

Ready Stock

100%

Suku Cadang Asli

24/7

Dukungan Teknis

Premium

Kualitas Standar Dunia

)}

{/* Products Section */}
{activeTab === ‘products’ && (

Lini Produk Unggulan

Pilih kapasitas yang sesuai dengan kebutuhan proyek Anda.

{products.map((item, idx) => (

STOCK TERSEDIA

{item.size}

{item.type}

{item.features.map((f, i) => (
• {f}

))}

Minta Penawaran Harga

))}

)}

{/* About Section */}
{activeTab === ‘about’ && (

PT SICOMA INDO PERKASA

Sole Distributor of Sicoma Italy in Indonesia

“Kami hadir untuk memastikan setiap proyek pembangunan di Indonesia didukung oleh teknologi pencampuran beton kelas dunia yang efisien dan andal.”

Visi Kami

Terus berinovasi menghadirkan mesin industri yang mampu meningkatkan produktivitas serta menjaga standar kualitas beton yang presisi.

Distribusi Nasional

Bekerjasama erat dengan mitra strategis seperti **Bandang Rejeki Lestari** untuk menjangkau seluruh pelosok negeri.

)}

{/* Modal Contact */}
{showContact && (

setShowContact(false)}
className=”absolute top-4 right-4 bg-black/10 hover:bg-black/20 p-1 rounded-full transition-all”
>
✕

Hubungi Kami Sekarang

Konsultasi Harga & Stok 2-4m³

WhatsApp Sales

+62 812-3456-7890

Email Marketing

sales@sicomaindoperkasa.id

Lokasi Kantor

Jakarta & Surabaya – Melayani Seluruh Indonesia

)}

{/* Footer */}

);
};

export default App;