import React from "react";
import { motion } from "framer-motion";
import { Building2, ClipboardCheck, HardHat, PhoneCall, ShieldCheck, Wrench, Mail, MapPin, CheckCircle2, ChevronRight } from "lucide-react";

// 단일 파일 React 컴포넌트
// TailwindCSS, framer-motion, lucide-react, shadcn/ui 사용 가능 전제
// 실제 배포 시 폼은 백엔드 연동 필요 (여기서는 프론트 데모 동작)

export default function ConstructionLanding() {
  const services = [
    { icon: <Building2 className="w-6 h-6" />, title: "건축 시공", desc: "공공·민간 건축물 신축/증축/리모델링 턴키 수행" },
    { icon: <Wrench className="w-6 h-6" />, title: "토목·플랜트", desc: "도로·교량·부지조성, 산업설비 EPC 일괄수행" },
    { icon: <HardHat className="w-6 h-6" />, title: "안전·품질관리", desc: "ISO 기반 QHSE 체계와 무재해 현장 운영" },
    { icon: <ShieldCheck className="w-6 h-6" />, title: "유지관리", desc: "준공 후 시설물 점검, 성능개선·리뉴얼" },
  ];

  const projects = [
    {
      title: "○○ 스마트 물류센터",
      tag: "산업시설 / 2024",
      img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1600&auto=format&fit=crop",
      points: ["연면적 65,000㎡", "BIM·CM 통합관리", "창고 내 ESG 설비 도입"],
    },
    {
      title: "△△ 복합주거 타워",
      tag: "주거·상업 / 2023",
      img: "https://images.unsplash.com/photo-1502005097973-6a7082348e28?q=80&w=1600&auto=format&fit=crop",
      points: ["지상 35F, 2개 동", "ALC·PC 공법 적용", "친환경 그린인프라"],
    },
    {
      title: "□□ 지식산업센터",
      tag: "업무시설 / 2025",
      img: "https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?q=80&w=1600&auto=format&fit=crop",
      points: ["연면적 48,000㎡", "모듈러 파일럿", "제로에너지 준비"],
    },
  ];

  const badges = [
    "국내외 200+ 프로젝트", "평균 준공기간 단축 12%", "안전사고 0 목표", "ESG/친환경 자재 우선",
  ];

  return (
    <div className="min-h-screen bg-white text-slate-900">
      {/* 상단 바 */}
      <header className="sticky top-0 z-40 backdrop-blur bg-white/80 border-b">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-2xl bg-slate-900 flex items-center justify-center">
              <Building2 className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold tracking-tight">(주)보성종합건설</span>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <a href="#services" className="hover:text-slate-700">서비스</a>
            <a href="#projects" className="hover:text-slate-700">실적</a>
            <a href="#process" className="hover:text-slate-700">프로세스</a>
            <a href="#about" className="hover:text-slate-700">회사소개</a>
            <a href="#contact" className="hover:text-slate-700">문의</a>
            <a href="#quote" className="ml-2 inline-flex items-center gap-1 rounded-xl border px-3 py-1.5 hover:bg-slate-50">견적요청 <ChevronRight className="w-4 h-4"/></a>
          </nav>
        </div>
      </header>

      {/* 히어로 */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <img src="https://images.unsplash.com/photo-1437419764061-2473afe69fc2?q=80&w=2400&auto=format&fit=crop" alt="건설현장" className="w-full h-full object-cover opacity-20" />
        </div>
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <motion.h1 initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} transition={{duration:0.6}} className="text-3xl md:text-5xl font-extrabold tracking-tight">
            성과로 증명하는 <span className="text-slate-900">프리미엄 시공</span>
          </motion.h1>
          <motion.p initial={{opacity:0}} animate={{opacity:1}} transition={{delay:0.2}} className="mt-4 text-lg text-slate-700 max-w-2xl">
            기획·설계·시공·유지관리까지 한 번에. 공공·민간 200+ 프로젝트 경험으로 일정·품질·안전을 확실히 책임집니다.
          </motion.p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            {badges.map((b,i)=> (
              <span key={i} className="text-xs md:text-sm rounded-full border px-3 py-1 bg-white/70">{b}</span>
            ))}
          </div>
          <div className="mt-10 flex flex-col sm:flex-row gap-3">
            <a href="#quote" className="inline-flex items-center justify-center rounded-2xl px-5 py-3 bg-slate-900 text-white font-medium hover:opacity-90">즉시 견적 요청</a>
            <a href="#projects" className="inline-flex items-center justify-center rounded-2xl px-5 py-3 border font-medium hover:bg-slate-50">주요 실적 보기</a>
          </div>
        </div>
      </section>

      {/* 서비스 */}
      <section id="services" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
        <h2 className="text-2xl md:text-3xl font-bold tracking-tight">주요 서비스</h2>
        <p className="mt-2 text-slate-600">EPC 턴키·CM·BIM 기반 통합 시공 솔루션</p>
        <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {services.map((s, i) => (
            <motion.div key={i} initial={{opacity:0, y:10}} whileInView={{opacity:1, y:0}} viewport={{once:true}} transition={{duration:0.4, delay: i*0.05}}
              className="rounded-2xl border p-5 hover:shadow-md bg-white">
              <div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center mb-3">{s.icon}</div>
              <h3 className="font-semibold">{s.title}</h3>
              <p className="text-sm mt-1 text-slate-600">{s.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* 실적 */}
      <section id="projects" className="bg-slate-50 border-y">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
          <div className="flex items-end justify-between gap-4">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">주요 실적</h2>
              <p className="mt-2 text-slate-600">품질·안전·일정 준수로 반복 수주</p>
            </div>
            <a href="#contact" className="hidden md:inline-flex items-center gap-1 text-sm font-medium hover:underline">유사 프로젝트 상담 <ChevronRight className="w-4 h-4"/></a>
          </div>
          <div className="mt-8 grid md:grid-cols-3 gap-6">
            {projects.map((p, i) => (
              <div key={i} className="rounded-2xl overflow-hidden border bg-white">
                <div className="aspect-[16/10] overflow-hidden">
                  <img src={p.img} alt={p.title} className="w-full h-full object-cover hover:scale-105 transition-transform" />
                </div>
                <div className="p-5">
                  <div className="text-xs text-slate-500">{p.tag}</div>
                  <h3 className="mt-1 font-semibold text-lg">{p.title}</h3>
                  <ul className="mt-3 space-y-1 text-sm text-slate-700">
                    {p.points.map((pt, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <CheckCircle2 className="w-4 h-4 mt-0.5" />
                        <span>{pt}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 프로세스 */}
      <section id="process" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
        <h2 className="text-2xl md:text-3xl font-bold tracking-tight">프로젝트 진행 프로세스</h2>
        <div className="mt-8 grid md:grid-cols-4 gap-5 text-sm">
          {[
            {step: "01", title: "사전 컨설팅", desc: "요구사항 분석, 예산·공정안 초안"},
            {step: "02", title: "설계·견적", desc: "BIM·VE 반영, 투명 원가·일정"},
            {step: "03", title: "시공관리", desc: "QHSE 기준, 품질·안전 점검"},
            {step: "04", title: "준공·유지", desc: "성능검증·AS·유지관리 제안"},
          ].map((it, i)=> (
            <div key={i} className="rounded-2xl border p-5 bg-white">
              <div className="text-slate-400 font-mono">{it.step}</div>
              <div className="mt-1 font-semibold">{it.title}</div>
              <div className="mt-1 text-slate-600">{it.desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 회사소개 */}
      <section id="about" className="bg-slate-50 border-y">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">회사소개</h2>
              <p className="mt-3 text-slate-700">
                (주)보성종합건설은 기획부터 유지관리까지 전 과정에서 성과를 보장하는 종합건설사입니다. 공공·민간 대형 프로젝트에서 축적한 시공 데이터와 ISO 9001/14001 기반 품질·환경 시스템으로
                예측 가능한 공정과 투명한 원가관리를 제공합니다. 발주처 동반성장을 최우선 가치로 두고 있습니다.
              </p>
              <ul className="mt-4 grid sm:grid-cols-2 gap-3 text-sm">
                <li className="flex items-center gap-2"><ClipboardCheck className="w-4 h-4"/> ISO 9001/14001 인증</li>
                <li className="flex items-center gap-2"><ShieldCheck className="w-4 h-4"/> 무재해 목표 관리</li>
                <li className="flex items-center gap-2"><Wrench className="w-4 h-4"/> BIM·CM 통합관리</li>
                <li className="flex items-center gap-2"><Building2 className="w-4 h-4"/> 공공·민간 200+ 레퍼런스</li>
              </ul>
            </div>
            <div className="rounded-3xl overflow-hidden border">
              <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1600&auto=format&fit=crop" alt="회사 이미지" className="w-full h-full object-cover"/>
            </div>
          </div>
        </div>
      </section>

      {/* 문의 및 연락처 */}
      <section id="contact" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
        <div className="grid md:grid-cols-3 gap-8">
          <div className="md:col-span-1">
            <h2 className="text-2xl md:text-3xl font-bold tracking-tight">연락처</h2>
            <p className="mt-3 text-slate-700">아래 연락처로 빠르게 상담받으세요.</p>
            <div className="mt-5 space-y-3 text-sm">
              <div className="flex items-center gap-2"><PhoneCall className="w-4 h-4"/> 055-267-1198</div>
              <div className="flex items-center gap-2"><Mail className="w-4 h-4"/> bscons@bscons.co.kr</div>
              <div className="flex items-center gap-2"><MapPin className="w-4 h-4"/> 경남 창원시 성산구 원이대로646, 1001호</div>
            </div>
          </div>
          <div id="quote" className="md:col-span-2">
            <div className="rounded-2xl border p-6 bg-white">
              <h3 className="font-semibold text-lg">프로젝트 상담·견적 요청</h3>
              <p className="text-sm text-slate-600">예산/일정/용도 입력 시 개략 견적과 일정안을 회신드립니다.</p>
              <form className="mt-4 grid md:grid-cols-2 gap-4" onSubmit={(e)=>{e.preventDefault(); alert('문의가 접수되었습니다. 담당자가 연락드립니다.')}}>
                <div>
                  <label className="text-sm text-slate-600">성함</label>
                  <input className="mt-1 w-full rounded-xl border px-3 py-2" placeholder="홍길동" required />
                </div>
                <div>
                  <label className="text-sm text-slate-600">연락처</label>
                  <input className="mt-1 w-full rounded-xl border px-3 py-2" placeholder="010-0000-0000" required />
                </div>
                <div className="md:col-span-2">
                  <label className="text-sm text-slate-600">프로젝트 개요</label>
                  <input className="mt-1 w-full rounded-xl border px-3 py-2" placeholder="예: ○○부지 지식산업센터 신축(연면적 45,000㎡)" />
                </div>
                <div>
                  <label className="text-sm text-slate-600">예산(억원)</label>
                  <input type="number" className="mt-1 w-full rounded-xl border px-3 py-2" placeholder="예: 300" />
                </div>
                <div>
                  <label className="text-sm text-slate-600">희망 준공</label>
                  <input type="month" className="mt-1 w-full rounded-xl border px-3 py-2" />
                </div>
                <div className="md:col-span-2">
                  <label className="text-sm text-slate-600">상세 내용</label>
                  <textarea className="mt-1 w-full rounded-xl border px-3 py-2 h-28" placeholder="용도, 위치, 층수, 특이사항 등"></textarea>
                </div>
                <div className="md:col-span-2 flex items-center justify-between">
                  <div className="text-xs text-slate-500">입력하신 정보는 상담 목적 외 사용하지 않습니다.</div>
                  <button type="submit" className="rounded-2xl px-5 py-2.5 bg-slate-900 text-white hover:opacity-90">견적 요청 보내기</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* 푸터 */}
      <footer className="border-t">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10 text-sm text-slate-600">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-xl bg-slate-900 flex items-center justify-center">
                <Building2 className="w-4 h-4 text-white" />
              </div>
              <div>
                <div className="font-semibold">(주)보성종합건설</div>
                <div className="text-xs text-slate-500">사업자등록 609-81-81624 · 대표자 권영훈</div>
              </div>
            </div>
            <div className="flex flex-wrap gap-3">
              <a href="#services" className="hover:underline">서비스</a>
              <a href="#projects" className="hover:underline">실적</a>
              <a href="#about" className="hover:underline">회사소개</a>
              <a href="#contact" className="hover:underline">문의</a>
            </div>
          </div>
          <div className="mt-6 text-xs text-slate-400">© {new Date().getFullYear()} BOSUNG CONSTRUCTION. All rights reserved.</div>
        </div>
      </footer>
    </div>
  );
}