[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":12,"_29":30,"_31":30,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69b3bf785a7481918a450b77243b1e9d","versionInt","title","Solar Rooftop Packages Page","type","code/react","content","import { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Sun, Phone, Calculator, BarChart3, ShieldCheck, FileText, ChevronRight, MapPin, Mail, MonitorSmartphone, Zap, Building2, Cpu, LineChart, CheckCircle2 } from \"lucide-react\";\n\nexport default function SolarRooftopPackagesPage() {\n const packages = [\n {\n name: \"3 kW\",\n price: 85000,\n displayPrice: \"85,000 บาท\",\n production: \"12–15 kWh/วัน\",\n monthly: \"360–450 kWh/เดือน\",\n annual: \"> 5,000 kWh/ปี\",\n roi: \"คืนทุนประมาณ 4–6 ปี\",\n suitable: \"บ้านพักอาศัยขนาดเล็ก ร้านค้าขนาดเล็ก โฮมออฟฟิศ\",\n panels: \"550 W x 6 แผง\",\n inverter: \"On-Grid 3 kW\",\n savingsPerMonth: \"1,440–2,025 บาท\",\n },\n {\n name: \"5 kW\",\n price: 110000,\n displayPrice: \"110,000 บาท\",\n production: \"20–25 kWh/วัน\",\n monthly: \"600–750 kWh/เดือน\",\n annual: \"8,000–9,000 kWh/ปี\",\n roi: \"คืนทุนประมาณ 3–5 ปี\",\n suitable: \"บ้านพักอาศัยขนาดกลาง ร้านค้า สำนักงานขนาดเล็ก\",\n panels: \"550 W x 10 แผง\",\n inverter: \"On-Grid 5 kW\",\n savingsPerMonth: \"2,400–3,375 บาท\",\n },\n {\n name: \"10 kW\",\n price: 195000,\n displayPrice: \"195,000 บาท\",\n production: \"40–50 kWh/วัน\",\n monthly: \"1,200–1,500 kWh/เดือน\",\n annual: \"ประมาณ 18,000 kWh/ปี\",\n roi: \"คืนทุนประมาณ 3–5 ปี\",\n suitable: \"บ้านขนาดใหญ่ คาเฟ่ ร้านอาหาร สำนักงาน ธุรกิจขนาดเล็กถึงกลาง\",\n panels: \"625 W x 16 แผง\",\n inverter: \"On-Grid 10 kW\",\n savingsPerMonth: \"4,800–6,750 บาท\",\n },\n ];\n\n const installationSteps = [\n \"สำรวจหน้างานและวิเคราะห์พื้นที่ติดตั้ง\",\n \"ตรวจสอบโหลดไฟฟ้าและพฤติกรรมการใช้ไฟ\",\n \"ออกแบบระบบและคำนวณกำลังผลิต\",\n \"เสนอราคาและแผนการติดตั้ง\",\n \"ติดตั้งแผง อินเวอร์เตอร์ และระบบป้องกันไฟฟ้า\",\n \"ทดสอบระบบ ส่งมอบ และแนะนำการใช้งาน\",\n ];\n\n const premiumFeatures = [\n \"ฟรีสำรวจหน้างาน\",\n \"ฟรีวิเคราะห์การใช้ไฟฟ้าเบื้องต้น\",\n \"ฟรีออกแบบระบบด้วย PVsyst + OpenSolar + AI Dashboard\",\n \"Monitoring ผ่านมือถือ\",\n \"อุปกรณ์มาตรฐานระดับโลก\",\n \"ติดตั้งโดยทีมงานมืออาชีพ\",\n ];\n\n const pvTools = [\n {\n title: \"PVsyst\",\n icon: Cpu,\n description: \"จำลองกำลังผลิตไฟฟ้า วิเคราะห์ shading loss และประเมินประสิทธิภาพระบบในเชิงวิศวกรรม\",\n },\n {\n title: \"OpenSolar\",\n icon: Building2,\n description: \"ออกแบบเลย์เอาต์แผงบนหลังคา จัดทำ proposal และเปรียบเทียบขนาดระบบให้เหมาะกับหน้างานจริง\",\n },\n {\n title: \"AI Dashboard\",\n icon: MonitorSmartphone,\n description: \"สรุปผลผลิต รายรับประหยัดค่าไฟ KPI และมุมมองบริหารโครงการแบบเข้าใจง่ายสำหรับลูกค้าและผู้บริหาร\",\n },\n ];\n\n const [selectedPackage, setSelectedPackage] = useState(packages[1]);\n const [monthlyBill, setMonthlyBill] = useState(4500);\n const [daytimeUsage, setDaytimeUsage] = useState(60);\n const [electricRate, setElectricRate] = useState(4.2);\n const [customerName, setCustomerName] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [location, setLocation] = useState(\"\");\n const [propertyType, setPropertyType] = useState(\"บ้านพักอาศัย\");\n const [notes, setNotes] = useState(\"\");\n\n const roiData = useMemo(() => {\n const monthlyProductionMap = {\n \"3 kW\": 405,\n \"5 kW\": 675,\n \"10 kW\": 1350,\n };\n\n const production = monthlyProductionMap[selectedPackage.name] ?? 675;\n const usableRatio = Math.min(Math.max(daytimeUsage / 100, 0.2), 1);\n const usableEnergy = production * usableRatio;\n const monthlySavings = usableEnergy * electricRate;\n const annualSavings = monthlySavings * 12;\n const paybackYears = annualSavings > 0 ? selectedPackage.price / annualSavings : 0;\n const roi5Years = annualSavings * 5 - selectedPackage.price;\n const roi10Years = annualSavings * 10 - selectedPackage.price;\n const billReduction = monthlyBill > 0 ? Math.min((monthlySavings / monthlyBill) * 100, 100) : 0;\n\n return {\n production,\n usableEnergy,\n monthlySavings,\n annualSavings,\n paybackYears,\n roi5Years,\n roi10Years,\n billReduction,\n };\n }, [selectedPackage, monthlyBill, daytimeUsage, electricRate]);\n\n const formatCurrency = (value) =>\n new Intl.NumberFormat(\"th-TH\", {\n maximumFractionDigits: 0,\n }).format(Math.max(value, 0));\n\n return (\n

\n\n

\n \n \n SIAM INNOVATION SOLAR CO., LTD.\n \n\n \n Premium Solar Rooftop Landing Page\n \n PVsyst + OpenSolar + AI Dashboard\n \n \n\n \n ระบบโซลาร์เซลล์สำหรับบ้านและธุรกิจแบบครบวงจร ตั้งแต่สำรวจ ออกแบบ วิเคราะห์ ROI\n ติดตั้ง และแสดงผลด้วย Dashboard ระดับมืออาชีพ เพื่อช่วยให้ลูกค้าตัดสินใจได้ง่าย\n มั่นใจ และเห็นความคุ้มค่าก่อนติดตั้งจริง\n \n\n \n \n ขอใบเสนอราคา \n \n \n ดู ROI Dashboard \n \n \n\n

\n {[\n { label: \"แพ็กเกจเริ่มต้น\", value: \"3 / 5 / 10 kW\" },\n { label: \"ฟรีวิเคราะห์เบื้องต้น\", value: \"PVsyst + OpenSolar\" },\n { label: \"Monitoring\", value: \"AI Dashboard\" },\n ].map((item) => (\n

{item.label}

{item.value}

\n ))}\n

\n\n \n

Solar Intelligence Snapshot

Executive Energy View

\n Live Demo\n

\n\n

\n {premiumFeatures.map((feature) => (\n

\n \n {feature}\n

\n ))}\n

\n \n

\n\n

แพ็กเกจ Solar Rooftop แนะนำ

เลือกขนาดระบบให้เหมาะกับการใช้ไฟ งบประมาณ และเป้าหมายการลดค่าไฟ

\n ราคาเริ่มต้นพร้อมบริการสำรวจและออกแบบเบื้องต้น\n

\n\n

\n {packages.map((pkg) => {\n const active = selectedPackage.name === pkg.name;\n return (\n setSelectedPackage(pkg)}\n className={`text-left rounded-[30px] border p-6 shadow-xl transition ${\n active\n ? \"border-amber-300 bg-gradient-to-b from-amber-400/15 to-white/5 shadow-amber-500/10\"\n : \"border-white/10 bg-white/5 shadow-black/20\"\n }`}\n >\n

{pkg.name}

เหมาะสำหรับ {pkg.suitable}

เริ่มต้น

{pkg.displayPrice}

\n\n

\n กำลังผลิตต่อวัน\n {pkg.production}\n

\n กำลังผลิตต่อเดือน\n {pkg.monthly}\n

\n กำลังผลิตต่อปี\n {pkg.annual}\n

\n แผงโซลาร์\n {pkg.panels}\n

\n อินเวอร์เตอร์\n {pkg.inverter}\n

\n ประหยัดต่อเดือน\n {pkg.savingsPerMonth}\n

\n ROI โดยประมาณ\n {pkg.roi}\n

\n\n

\n เลือกแพ็กเกจนี้ \n

\n \n );\n })}\n

\n\n

\n \n

ฟอร์มขอใบเสนอราคา

\n กรอกข้อมูลเบื้องต้นเพื่อให้ทีมงานประเมินขนาดระบบ วิเคราะห์ความคุ้มค่า และจัดทำใบเสนอราคาได้ตรงความต้องการมากขึ้น\n

\n\n

\n \n ชื่อผู้ติดต่อ\n setCustomerName(e.target.value)}\n placeholder=\"เช่น นายสมชาย ใจดี\"\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none ring-0 placeholder:text-slate-500 focus:border-amber-300\"\n />\n \n \n เบอร์โทร\n setPhone(e.target.value)}\n placeholder=\"08x-xxx-xxxx\"\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none placeholder:text-slate-500 focus:border-amber-300\"\n />\n \n \n จังหวัด / พื้นที่ติดตั้ง\n setLocation(e.target.value)}\n placeholder=\"ปทุมธานี / กรุงเทพฯ / อยุธยา\"\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none placeholder:text-slate-500 focus:border-amber-300\"\n />\n \n \n ประเภทอาคาร\n setPropertyType(e.target.value)}\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none focus:border-amber-300\"\n >\n \n \n \n \n \n \n \n \n \n แพ็กเกจที่สนใจ\n {\n const found = packages.find((pkg) => pkg.name === e.target.value);\n if (found) setSelectedPackage(found);\n }}\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none focus:border-amber-300\"\n >\n {packages.map((pkg) => (\n \n ))}\n \n \n \n รายละเอียดเพิ่มเติม\n setNotes(e.target.value)}\n rows={4}\n placeholder=\"เช่น ค่าไฟต่อเดือน พื้นที่หลังคา ประเภทหลังคา เวลาที่สะดวกให้สำรวจ\"\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none placeholder:text-slate-500 focus:border-amber-300\"\n />\n \n

\n\n

\n \n \n

\n\n

\n \n

ROI Dashboard Calculator

\n Interactive Demo\n

\n ปรับค่าไฟ พฤติกรรมการใช้ไฟกลางวัน และอัตราค่าไฟ เพื่อดูผลประหยัดและระยะเวลาคืนทุนเบื้องต้นได้ทันที\n

\n\n

\n \n ค่าไฟต่อเดือน (บาท)\n setMonthlyBill(Number(e.target.value || 0))}\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none focus:border-amber-300\"\n />\n \n \n การใช้ไฟช่วงกลางวัน (%)\n setDaytimeUsage(Number(e.target.value || 0))}\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none focus:border-amber-300\"\n />\n \n \n ค่าไฟเฉลี่ยต่อหน่วย (บาท)\n setElectricRate(Number(e.target.value || 0))}\n className=\"w-full rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-3 text-white outline-none focus:border-amber-300\"\n />\n \n

\n\n

\n {[\n {\n label: \"กำลังผลิตเฉลี่ย/เดือน\",\n value: `${formatCurrency(roiData.production)} kWh`,\n icon: Zap,\n tone: \"text-amber-300\",\n },\n {\n label: \"พลังงานที่ใช้ได้จริง\",\n value: `${formatCurrency(roiData.usableEnergy)} kWh`,\n icon: LineChart,\n tone: \"text-sky-300\",\n },\n {\n label: \"ประหยัดต่อเดือน\",\n value: `${formatCurrency(roiData.monthlySavings)} บาท`,\n icon: BarChart3,\n tone: \"text-emerald-300\",\n },\n {\n label: \"ลดบิลค่าไฟ\",\n value: `${roiData.billReduction.toFixed(0)}%`,\n icon: ShieldCheck,\n tone: \"text-pink-300\",\n },\n ].map((card) => {\n const Icon = card.icon;\n return (\n

\n {card.label}\n \n

{card.value}

\n );\n })}\n

\n\n

ประหยัดต่อปี

{formatCurrency(roiData.annualSavings)} บาท

คืนทุนโดยประมาณ

{roiData.paybackYears.toFixed(1)} ปี

กำไรสะสม 10 ปี

{formatCurrency(roiData.roi10Years)} บาท

\n\n

\n {[\n { label: \"ปี 1\", value: roiData.annualSavings * 1 },\n { label: \"ปี 3\", value: roiData.annualSavings * 3 },\n { label: \"ปี 5\", value: roiData.roi5Years + selectedPackage.price },\n { label: \"ปี 10\", value: roiData.roi10Years + selectedPackage.price },\n ].map((bar) => {\n const max = Math.max(roiData.annualSavings * 10, 1);\n const height = Math.max((bar.value / max) * 100, 12);\n return (\n

{bar.label}

\n \n

\n );\n })}\n

\n\n

\n \n

PVsyst + OpenSolar + AI Dashboard

\n เสริมความน่าเชื่อถือของข้อเสนอด้วยเครื่องมือออกแบบและวิเคราะห์ระดับมืออาชีพ ตั้งแต่การจำลองกำลังผลิตเชิงวิศวกรรม การออกแบบเลย์เอาต์บนหลังคา ไปจนถึง Dashboard สำหรับสรุปผลด้านพลังงานและการเงิน\n

\n\n

\n {pvTools.map((tool) => {\n const Icon = tool.icon;\n return (\n

\n \n

{tool.title}

{tool.description}

\n );\n })}\n

\n\n

\n \n

ความปลอดภัยและมาตรฐานงานติดตั้ง

• ออกแบบและติดตั้งตามหลักวิศวกรรม
• ใช้อุปกรณ์มาตรฐานสำหรับงานโซลาร์
• มีระบบป้องกันไฟฟ้า AC/DC และระบบกราวด์
• โครงสร้างแข็งแรง ลดความเสี่ยงน้ำรั่วซึม
• ตรวจสอบและบำรุงรักษาระบบได้ในระยะยาว

\n\n

\n \n

ข้อมูลบริษัท

บริษัท สยามนวัตกรรมโซล่าร์ จำกัด

\n \n

8/14 หมู่ 2 ตำบลคลองหก อำเภอคลองหลวง จังหวัดปทุมธานี 12120

\n \n

02-077-1585, 086-346-1898

\n \n

to.engcon123@gmail.com

\n \n

เว็บไซต์: siaminnovationsolar.com

\n\n

\n ขอใบเสนอราคา\n ROI Dashboard\n PVsyst + OpenSolar + AI Dashboard\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","4795931999054645266","traceTime",1777508814749]