"use client";

import { useState } from "react";
import Link from "next/link";
import DreamStages from "@/components/DreamStages";

const IMG = "/img/";

/* ----------------------------- data ----------------------------- */
const FEATURES = [
  "Luxury Construction",
  "Completion Assistance",
  "3D Planning",
  "Transparent Pricing",
  "Fast-Track Delivery",
  "Map Sanction",
  "Authority Support",
];

const VILLAS = [
  { name: "The Studio", price: "₹ 62 L Onwards", desc: "Starter luxury villa · YEIDA Sector 18", months: "8 months", bhk: "2 BHK + Study", sqm: "300 SQM", floor: "G", img: "260673733859890d3cc4cd00cba8c0197bd07e63" },
  { name: "The Concise", price: "₹ 78 L Onwards", desc: "Compact luxury villa · YEIDA Sector 18", months: "10 months", bhk: "2 BHK + Study", sqm: "400 SQM", floor: "G", img: "2b11df2c1b3ab3fe9367d57ff8965f82e176bf9d" },
  { name: "The Garden", price: "₹ 1.1 Cr Onwards", desc: "Garden-facing villa · YEIDA Sector 20", months: "11 months", bhk: "3 BHK + Study", sqm: "1000 SQM", floor: "G", img: "3c45a739408e4c5f8901dd031dd17f18921f049c" },
  { name: "The Atrium", price: "₹ 1.4 Cr Onwards", desc: "Family villa with courtyard · YEIDA Sector 20", months: "12 months", bhk: "4 BHK + Family", sqm: "400 SQM", floor: "G", img: "5ac76fa178443b164f80c144e980a590487e6dfe" },
  { name: "The Veranda", price: "₹ 3.2 Cr Onwards", desc: "Signature villa with pool · YEIDA Sector 22", months: "14 months", bhk: "5 BHK + Lounge", sqm: "1000 SQM", floor: "G", img: "666e01cadb8633aefea2ea4b1bcf69d23eeecf39" },
  { name: "The Manor", price: "₹ 4.6 Cr Onwards", desc: "Manor villa with pool + lawn · YEIDA Sector 22", months: "16 months", bhk: "4 BHK + Family", sqm: "300 SQM", floor: "G", img: "6db83255bd459fd9990645d1bc5f776f02681de7" },
  { name: "The Reserve", price: "₹ 6.8 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "18 months", bhk: "6 BHK + Guest", sqm: "1000 SQM", floor: "G", img: "9a497e6a609739cd2eb4c7c4aab0fe269966a1ed" },
  { name: "The Estate", price: "₹ 9.5 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "20 months", bhk: "6 BHK + Guest Wing", sqm: "1000 SQM", floor: "G", img: "da583e482b78b5c755f13845f0c99fdbf73a78fc" },
  { name: "The Pavilion", price: "₹ 2.1 Cr Onwards", desc: "Double-height pavilion villa · YEIDA Sector 22", months: "13 months", bhk: "4 BHK + Office", sqm: "300 SQM", floor: "G", img: "e007385022aaad05abe46b68e101211b9623adb5" },
];

const WALK_TABS = [
  { label: "VERANDA- 1000 SQM", img: "631d471a32ee1dcc3f6e79f1d5eba77011cf4a50" },
  { label: "ATRIUM- 500 SQN", img: "6529219216839b0700cdffee82ac9490aba78014" },
  { label: "CONCISE- 300 say", img: "888fe17730be5dc5dfc0f500a63c3ff6092ada9a" },
  { label: "ESTATE- 4000 SQM", img: "b531d04468f7eb1eee6b5e3f79b73ed1b8d100ed" },
];

const PROJECTS = [
  { name: "Yamuna Expressway 2009 Scheme", desc: "Premium plotted development with world-class infrastructure along the Yamuna Expressway corridor.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "Active", img: "4c1a7f34f0e3e77e692b19783a29f6714591867d", big: true },
  { name: "Tapobhoomi Township", desc: "Spiritual residential community in the sacred city of Vrindavan with premium amenities.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "", img: "4e6c629b7443425930d9417cfc1429b56f529ba5", big: true },
  { name: "Noida Grand Construction", desc: "Large-scale commercial and residential building project in the heart of Noida, architecture and smart building systems.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Planning Stage", img: "64eacbc46d457e3caa7ff1f4c267c7c13c2b0eae", big: false },
  { name: "Rishikesh Development", desc: "Eco-friendly residential plots near the holy city of Rishikesh with mountain views.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Coming Soon", img: "e4361e334aae2a2478bde9df49bea7404f46c40a", big: false },
  { name: "Future Smart Township", desc: "Next-generation smart township with integrated technology and sustainable living.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Future Development", img: "f93db7ef0ae5819bafd69306463bb2ed1d3856b1", big: false },
];

const JOURNEY = [
  {
    no: "01 / 06", week: "Week 1", title: "Consultation & Site Survey",
    sub: "Discuss your vision and verify your site with expert architectural guidance.",
    body: "Meet with our architects to discuss your vision and project requirements in detail. Our team completes site verification and soil testing to ensure accurate and reliable planning.",
    img: "ca01253b7173e27cd1fc5ac3280f55a300f96bcc",
    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
  },
  {
    no: "02 / 06", week: "Week 4-8", title: "Design & Planning",
    sub: "Create detailed plans, realistic 3D visuals, and refined material selections collaboratively.",
    body: "Our architects create detailed blueprints, realistic 3D renders, and curated material selections for your vision. We refine every detail through revisions for seamless execution planning.",
    img: "5cbc2b713ab3173098792ba280d0f70b6b91b370",
    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
  },
  {
    no: "03 / 06", week: "Week 9-11", title: "Approvals & Permissions",
    sub: "Sit down with the architecture & approvals team.",
    body: "Free 90-minute consult at our Yamuna Expressway studio or virtually. We map your budget, family programme, plot sector and timeline before quoting a single rupee.",
    img: "c7d1d4e66fb753236a565bd1116cdd0e6c9c6c58",
    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
  },
];

const WALK_FEATURES = ["360° Room Views", "Interactive Navigation", "VR Headset Compatible", "Material Customization"];

const COMPANIES = [
  { name: "JL Contractor", country: "United States", tag: "Excellence in Construction & Infrastructure", desc: "Leading construction and infrastructure solutions provider in the United States, specializing in commercial buildings, highways, and large-scale infrastructure projects.", s1: "150+", s2: "20+", logo: "d48ff36e874da766aa3b84f0db1770e720501a4b" },
  { name: "HouseCoin", country: "United States", tag: "Redefining Property Technology", desc: "Innovative real estate technology and property management platform transforming how properties are bought, sold, and managed in the digital age.", s1: "5000+", s2: "50K+", logo: "" },
  { name: "Tapobhumi Projects", country: "India", tag: "Creating Landmark Developments", desc: "Premier residential and commercial development company in India, sustainable communities and iconic structures across major cities and destinations.", s1: "150+", s2: "20+", logo: "cce1388fd0c4acb41f7d5717d9b8be23e0dd0f23" },
];

const WHY = [
  { t: "Transparent Pricing", d: "No hidden costs. Detailed BOQ with itemized pricing for every material and service." },
  { t: "Contract-Based Construction", d: "Legal agreements protecting your investment with clear deliverables and timelines." },
  { t: "Milestone Payments", d: "Pay only based on verified completion stages. Your money stays safe with escrow options." },
  { t: "Dedicated Project Manager", d: "Single point of contact managing your entire project from conception to completion." },
  { t: "Authority Support", d: "We handle all approvals, NOCs, and legal documentation with government authorities." },
  { t: "Live Project Tracking", d: "Real-time updates via app with photos, videos, and milestone completion reports." },
];

const TESTIMONIALS = [
  { name: "Rajeev & Vandana Mehra", role: "Owner · Plot 1000 · Sector 22", stars: 3, avatar: "112456567d96e8cf77540da1be6724c006872d85", quote: "We had spent eighteen months chasing approvals on our own. From the first meeting, the team handed us a written timeline — and then beat it. The completion certificate arrived nine weeks ahead of schedule, and the construction quality is genuinely better than any flat we have ever seen." },
  { name: "Dr. Aditya Singh", role: "Owner · Plot 500 · Sector 20", stars: 3, avatar: "e988e6ef720aa675113d122b1059a42df6b88463", quote: "What sold us was the architecture — but what kept us was the honesty on the weekly cost sheets. Every rupee accounted for, no surprise change orders, no quiet escalations. As a doctor I rarely have time to chase contractors. I never had to." },
  { name: "Priya & Karan Kapoor", role: "Owner · Plot 300 · Sector 18", stars: 3, avatar: "0911254513dc8e934b2c3590779029edfc045895", quote: "A first home is supposed to be stressful. Ours was not. The 3D walkthrough let us walk through three iterations before we committed, and the YEIDA approvals were handled while we were on holiday. It just worked." },
];

function Stars({ n }: { n: number }) {
  return (
    <span className="stars">
      {[1, 2, 3, 4, 5].map((i) => (
        <span key={i} className={i <= n ? "on" : ""}>★</span>
      ))}
    </span>
  );
}

export default function Home() {
  const [walk, setWalk] = useState(0);
  const [projTab, setProjTab] = useState<"current" | "upcoming">("current");
  const [journey, setJourney] = useState(0);
  const [why, setWhy] = useState(0);

  return (
    <>
      {/* ============================ HERO ============================ */}
      <section className="hero">
        <video
          className="hero-bg"
          autoPlay
          muted
          loop
          playsInline
          poster={`${IMG}0aa5ce6385ccc238bd370683062e61a261428786.png`}
        >
          <source src={`${IMG}builddream.mp4`} type="video/mp4" />
        </video>
        <div className="hero-overlay" />
        <div className="hero-content">
          <h1>
            Build Your Dream Home on
            <br />
            <span>Yamuna Expressway</span>
          </h1>
          <p className="hero-sub">
            Architecture, approvals, construction, supervision and completion,
            <br />a single accountable team for your YEIDA villa.
          </p>
          <Link href="/contact" className="btn btn-light hero-cta">
            Free Consultation <span className="arrow">→</span>
          </Link>
        </div>
        <span className="hero-note">Yamuna Expressway<br />is the new NCR.</span>
      </section>

      {/* ===================== FEATURE STRIP ========================= */}
      <div className="feature-strip">
        <div className="feature-track">
          {[...FEATURES, ...FEATURES].map((f, i) => (
            <span key={i} className="feature-item">
             <img src="/img/luxuryicon.svg" alt="" /> {f}
            </span>
          ))}
        </div>
      </div>

      {/* ===================== EXCLUSIVE PLOTS ======================= */}
      <section className="section plots">
        <div className="container">
          <div className="section-head">
            <div>
              <p className="eyebrow">02 — Choose Your Canvas</p>
              <h2 className="section-title">Exclusive plot sizes for<br />elite modern homes</h2>
            </div>
            <div className="head-aside">
              <p className="lead">From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
              <Link href="/projects" className="btn btn-dark">Explore All Programmes <span className="arrow">→</span></Link>
            </div>
          </div>
        </div>

        <div className="plots-rail container">
          {VILLAS.map((v) => (
            <article key={v.name} className="villa-card">
              <div className="villa-media">
                <img src={`${IMG}${v.img}.png`} alt={v.name} />
                <span className="villa-tags">
                  <span>{v.bhk}</span>  <span className="villa-floor">{v.floor}</span><span>{v.sqm}</span>
                </span>
              
              </div>
              <div className="villa-body">
              <span> <h3>{v.name}</h3>
                <p className="villa-desc">{v.desc}</p></span> 
                <div className="villa-foot">
                  <div className="villa-price"><small>FROM</small>{v.price}</div>
                  <span className="villa-months">{v.months}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="container plots-pager">
          <span className="pager-count">01 / 09</span>
          <div className="pager-line"><span /></div>
          <div className="pager-btns"><button>←</button><button>→</button></div>
        </div>
      </section>

      {/* ================== LUXURY LIVING VISUALIZED ================= */}
      <section className="section walkthrough">
        <div className="container">
          <div className="section-head">
            <h2 className="section-title">Luxury Living,<br />Visualized in Advance</h2>
            <p className="lead">Every design ships with an interactive 3D walkthrough — explore rooms, sun angles, view lines and material finishes. Toggle day or night, tap a hotspot, switch villa from any device.</p>
          </div>

          <div className="walk-stage">
  <img
    src={`${IMG}${WALK_TABS[walk].img}.png`}
    alt={WALK_TABS[walk].label}
  />

  {/* Corner Borders */}
  <span className="corner tl"></span>
  <span className="corner tr"></span>
  <span className="corner bl"></span>
  <span className="corner br"></span>

  <div className="walk-overlay" />

  <button className="play-btn" aria-label="Play">
    <span>▶</span>
  </button>

  <span className="walk-caption">{WALK_TABS[walk].label}</span>
  <span className="walk-meta">
    YEX·E-24-02 &nbsp; 04:32 · 4K · INTERACTIVE · MIDDAY
  </span>
</div>

          <div className="walk-tabs">
            {WALK_TABS.map((t, i) => (
              <button key={t.label} className={`walk-tab ${i === walk ? "active" : ""}`} onClick={() => setWalk(i)}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ====================== DREAM REALIZED ====================== */}
      <DreamStages />

      {/* ==================== FROM LAND TO LANDMARK ================= */}
      <section className="section landmark">
        <div className="container">
          <div className="section-head">
            <div>
              <p className="eyebrow">04 — Case Study</p>
              <h2 className="section-title">From Land To Landmark</h2>
              <p className="lead" style={{ marginTop: 14 }}>From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
            </div>
            <div className="proj-tabs">
              <button className={projTab === "current" ? "active" : ""} onClick={() => setProjTab("current")}>Current Project</button>
              <button className={projTab === "upcoming" ? "active" : ""} onClick={() => setProjTab("upcoming")}>Upcoming Project</button>
            </div>
          </div>

          <div className="proj-big">
            {PROJECTS.filter((p) => p.big).map((p) => (
              <article key={p.name} className="proj-card big">
                <div className="proj-media">
                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
                  {p.badge && <span className="proj-badge">{p.badge}</span>}
                </div>
                <div className="proj-body">
                  <h3>{p.name}</h3>
                  <p>{p.desc}</p>
                  <div className="proj-stats">
                    <div><strong>{p.area}</strong><span>Total Area</span></div>
                    <div><strong>{p.units}</strong><span>Units</span></div>
                    <div><strong>{p.time}</strong><span>Timeline</span></div>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className="proj-small">
            {PROJECTS.filter((p) => !p.big).map((p) => (
              <article key={p.name} className="proj-card small">
                <div className="proj-media">
                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
                  {p.badge && <span className="proj-badge dark">{p.badge}</span>}
                </div>
                <div className="proj-body">
                  <h3>{p.name}</h3>
                  <p>{p.desc}</p>
                  <div className="proj-stats">
                    <div><strong>{p.area}</strong><span>Total Area</span></div>
                    <div><strong>{p.units}</strong><span>Units</span></div>
                    <div><strong>{p.time}</strong><span>Timeline</span></div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ======================== YOUR JOURNEY ====================== */}
      <section className="section journey">
        <div className="container">
          <div className="section-head">
            <div>
              <p className="eyebrow">Transparent Process</p>
              <h2 className="section-title">Your Journey</h2>
            </div>
            <p className="lead">From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
          </div>

          <div className="journey-list">
            {JOURNEY.map((j, i) => (
              <div key={j.title} className={`journey-row ${i === journey ? "open" : ""}`} onClick={() => setJourney(i)}>
                <div className="journey-media">
                  <img src={`${IMG}${j.img}.png`} alt={j.title} />
                </div>
                <div className="journey-main">
                  <div className="journey-head">
                    <span className="journey-week">{j.week}</span>
                    <span className="journey-no">{j.no}</span>
                  </div>
                  <h3>{j.title}</h3>
                  <p className="journey-sub">{j.sub}</p>
                  {i === journey && <p className="journey-body">{j.body}</p>}
                </div>
                <div className="journey-items">
                  {j.items.map(([label, day]) => (
                    <div key={label} className="journey-item">
                      <span>{label}</span><span className="day">{day}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===================== VIRTUAL WALKTHROUGHS ================= */}
      <section className="section virtual">
        <div className="container">
          <div className="virtual-head">
            <h2 className="section-title">Virtual Walkthroughs</h2>
            <p className="lead">Experience your future home in immersive 3D before construction begins. See every detail, every room, every finish.</p>
          </div>
          <div className="virtual-stage">
            <img src={`${IMG}f470f21a29fb7fe287ce1d5ffb94d0b4845b5367.png`} alt="500 sqm Contemporary Villa" />
            <div className="virtual-overlay" />
            <button className="play-btn" aria-label="Play"><span>▶</span></button>
            <div className="virtual-caption">
              <h3>500 sqm Contemporary Villa</h3>
              <p>Full 3D Virtual Walkthrough • 4 BHK • ₹85L</p>
            </div>
            <div className="virtual-features">
              {WALK_FEATURES.map((f) => (
                <span key={f}>● {f}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ===================== GROUP COMPANIES ====================== */}
      <section className="section companies">
        <div className="container">
          <div className="companies-head">
            <p className="eyebrow">05 — Brands</p>
            <h2 className="section-title">Our Group Companies</h2>
            <p className="lead center">A powerful network of specialized companies delivering excellence across construction, technology, and development</p>
          </div>
          <div className="companies-grid">
            {COMPANIES.map((c) => (
              <article key={c.name} className="company-card">
                <div className="company-logo">
                  {c.logo ? <img src={`${IMG}${c.logo}.png`} alt={c.name} /> : <span className="company-mark">⬢ HOUSECOIN</span>}
                </div>
                <span className="company-country">{c.country}</span>
                <h3>{c.name}</h3>
                <p className="company-tag">{c.tag}</p>
                <p className="company-desc">{c.desc}</p>
                <div className="company-stats">
                  <div><strong>{c.s1}</strong><span>Projects Completed</span></div>
                  <div><strong>{c.s2}</strong><span>Years Experience</span></div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ======================= WHY CHOOSE US ====================== */}
      <section className="section why">
        <div className="container">
          <div className="why-head">
            <p className="eyebrow">Excellence Guaranteed</p>
            <h2 className="section-title">Why Choose Us</h2>
            <p className="lead">Industry-leading standards combined with personalized service for an unmatched construction experience</p>
          </div>
          <div className="why-grid">
            <div className="why-visual">
              <img className="why-tall" src={`${IMG}1cf7daea2239eeca5e11497628834804a0b5ec46.png`} alt="" />
            </div>
            <div className="why-list">
              <img className="why-wide" src={`${IMG}888fe17730be5dc5dfc0f500a63c3ff6092ada9a.png`} alt="" />
              {WHY.map((w, i) => (
                <div key={w.t} className={`why-row ${i === why ? "open" : ""}`} onClick={() => setWhy(i)}>
                  <span className="why-no">{String(i + 1).padStart(2, "0")}</span>
                  <div className="why-text">
                    <h4>{w.t}</h4>
                    {i === why && <p>{w.d}</p>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ===================== HOUSECOIN SHOWCASE =================== */}
      <section className="showcase">
        <img className="showcase-bg" src={`${IMG}e491ff3eb992ddab282e135da4acd830cdd8bf45.png`} alt="" />
        <div className="showcase-overlay" />
        <span className="showcase-brand">HOUSECOIN</span>
        <div className="showcase-card">
          <img src={`${IMG}dac66fb1980459d72c43173854d68cab518070cd.png`} alt="The PIQUE of Home Design" />
          <div className="showcase-bar">
            <span className="sc-menu">☰ MENU</span>
            <span className="sc-logo">PIQUE</span>
            <span className="sc-contact">✦ CONTACT</span>
          </div>
          <div className="showcase-caption">
            <h3>The PIQUE of<br />Home Design</h3>
          </div>
        </div>
      </section>

      {/* ======================= TESTIMONIALS ======================= */}
      <section className="section testimonials">
        <div className="container">
          <div className="section-head">
            <div>
              <p className="eyebrow">07 — Owner Stories</p>
              <h2 className="section-title">The villas you can<br />Visit and verify.</h2>
            </div>
            <p className="lead">Every owner here is reachable for a reference call. Every plot is registered to verifiable YEIDA records.</p>
          </div>
          <div className="testi-grid">
            {TESTIMONIALS.map((t) => (
              <article key={t.name} className="testi-card">
                <span className="quote-mark">&ldquo;</span>
                <Stars n={t.stars} />
                <p className="testi-quote">{t.quote}</p>
                <div className="testi-author">
                  <img src={`${IMG}${t.avatar}.png`} alt={t.name} />
                  <div>
                    <strong>{t.name}</strong>
                    <span>{t.role}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div className="testi-more"><Link href="/blog">View all Stories</Link></div>
        </div>
      </section>
    </>
  );
}