import React, { useMemo, useState } from "react";
import Head from "next/head";
type Tab = {
id: string;
label: string;
heading: string;
points: string[];
};
type FaqItem = {
question: string;
answer: string;
};
const tabs: Tab[] = [
{
id: "overview",
label: "Overview",
heading: "Built for every adventure",
points: [
"Keeps contents cold for up to 24 hours with insulated walls.",
"Durable Lion Star construction resists impacts and UV exposure.",
"Lightweight 10L capacity is perfect for daily commutes or weekend picnics.",
],
},
{
id: "specs",
label: "Specifications",
heading: "Product details",
points: [
"Capacity: 10 liters (Marina Cooler Box 12S).",
"Dimensions: 33 cm × 23 cm × 25 cm (approximate).",
"Materials: Food-grade plastic with high-density insulation.",
"In the box: Cooler body, secure lid, adjustable carry handle.",
],
},
{
id: "care",
label: "Care",
heading: "Easy maintenance",
points: [
"Rinse with mild soap and warm water after each use.",
"Dry thoroughly before storage to prevent unwanted odors.",
"Store with the lid ajar to maintain freshness.",
],
},
];
const faqs: FaqItem[] = [
{
question: "How long can the Marina Cooler Box keep items cold?",
answer: "With proper ice packs, the cooler maintains a chilled temperature for up to 24 hours in moderate conditions.",
},
{
question: "Is the 10L capacity enough for a family outing?",
answer: "Yes. The 10L capacity comfortably holds around 12 standard beverage cans plus ice, making it ideal for small groups.",
},
{
question: "Does the cooler come with a warranty?",
answer: "Yes. The product includes a 6-month manufacturer warranty covering defects in materials and workmanship.",
},
];
const colors = [
{ id: "red", label: "Classic Red" },
{ id: "blue", label: "Ocean Blue" },
{ id: "green", label: "Forest Green" },
];
function calculateCans(people: number, hours: number, drinksPerHour: number, capacityLiters: number): {
requiredCans: number;
maxCans: number;
fitCans: number;
needsExtraCooler: boolean;
} {
const canVolumeLiters = 0.355;
const requiredCans = Math.ceil(people * hours * drinksPerHour);
const maxCans = Math.floor(capacityLiters / canVolumeLiters);
const fitCans = Math.min(requiredCans, maxCans);
const needsExtraCooler = requiredCans > maxCans;
return { requiredCans, maxCans, fitCans, needsExtraCooler };
}
const LandingPage: React.FC = () => {
const [selectedTab, setSelectedTab] = useState
(tabs[0]?.id ?? "overview");
const [selectedColor, setSelectedColor] = useState(colors[0]?.id ?? "red");
const [quantity, setQuantity] = useState(1);
const [cartCount, setCartCount] = useState(0);
const [people, setPeople] = useState(4);
const [hours, setHours] = useState(6);
const [drinksPerHour, setDrinksPerHour] = useState(1);
const [openFaq, setOpenFaq] = useState(null);
const capacityResult = useMemo(() => {
return calculateCans(people, hours, drinksPerHour, 10);
}, [people, hours, drinksPerHour]);
const handleAddToCart = () => {
setCartCount((previous) => previous + quantity);
};
const activeTab = tabs.find((tab) => tab.id === selectedTab) ?? tabs[0];
const handleFaqToggle = (index: number) => {
setOpenFaq((current) => (current === index ? null : index));
};
return (
<>
Marina Cooler Box 12S | Bright Electronic
Marina Cooler Box 12S – Keep Every Moment Chill
Lion Star’s 10-liter Marina Cooler Box delivers dependable cold retention in a compact, adventure-ready design. Perfect for picnics, road trips, and daily errands.
{cartCount > 0 && (
You have {cartCount} Marina Cooler Box{cartCount > 1 ? "es" : ""} in your bag.
)}
Choose your color
{colors.map((color) => (
setSelectedColor(color.id)}
className={`rounded-full border px-4 py-2 text-sm font-medium transition ${selectedColor === color.id ? "border-teal-500 bg-teal-50 text-teal-600" : "border-gray-200 bg-white text-gray-700 hover:border-teal-200"}`}
aria-pressed={selectedColor === color.id}
>
{color.label}
))}
Quantity
setQuantity((previous) => Math.max(1, previous - 1))}
aria-label="Decrease quantity"
>
–
{quantity}
setQuantity((previous) => previous + 1)}
aria-label="Increase quantity"
>
+
Add {quantity} to Cart
Why adventurers love it
From sunrise hikes to sunset picnics, the Marina Cooler Box 12S keeps your refreshments at the perfect temperature with ease and style.
Reliable insulation
Multi-layer insulation traps the cold so every sip is refreshing, even under the summer sun.
Travel-ready handle
Ergonomic carry handle makes transport effortless, whether you are walking to the beach or the office.
Secure lid latch
Tight-seal lid locks in cool air and prevents spills during bumpy rides.
Easy to clean
Smooth interior lining wipes down quickly so you can spend more time adventuring.
Discover every detail
Switch between tabs to learn more about how the Marina Cooler Box 12S fits your lifestyle.
{tabs.map((tab) => (
setSelectedTab(tab.id)}
aria-pressed={selectedTab === tab.id}
>
{tab.label}
))}
{activeTab.heading}
{activeTab.points.map((point) => (
✓
{point}
))}
Plan your cooler pack
Estimate how many drinks fit in the 10L Marina Cooler Box based on your outing.
You need {capacityResult.requiredCans} cans for this trip.
The Marina Cooler Box fits up to {capacityResult.maxCans} cans.
{capacityResult.needsExtraCooler
? `Bring an extra cooler or adjust your plan. Only ${capacityResult.fitCans} cans will fit in one Marina Cooler Box.`
: "You are all set! Everything fits comfortably with room for ice."}
Testimonials
“Took it on a beach trip. Drinks stayed cold the entire day and the handle makes carrying effortless.”
“Compact yet spacious. Fits in my scooter and is perfect for delivering cold desserts to customers.”
Frequently asked questions
{faqs.map((item, index) => (
handleFaqToggle(index)}
aria-expanded={openFaq === index}
>
{item.question}
{openFaq === index ? "–" : "+"}
{openFaq === index &&
{item.answer}
}
))}
Ready to chill your next adventure?
Order the Marina Cooler Box 12S today and enjoy fast, secure shipping from Bright Electronic on Tokopedia.
Add to Cart Now
);
};
export default LandingPage;
