/* ── HomePage Component ──────────────────────────────────── */
const { useState: useHPState } = React;

/* ─ Hero ─────────────────────────────────────────────────── */
const Hero = ({ onNavigate }) => {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };
  return (
    <section className="hero">
      <video className="hero-video" autoPlay loop muted playsInline>
        <source src="assets/hero.mp4" type="video/mp4" />
      </video>
      <div className="hero-overlay"></div>
      <div className="hero-body">
        <span className="hero-eyebrow">Exclusive Real Estate — Berlin &amp; Beyond</span>
        <h1 className="hero-title">Find Your Next<br />Luxury Home</h1>
        <p className="hero-sub">Exclusive properties designed for modern living.</p>
        <div className="hero-btns">
          <button className="btn btn-gold" onClick={() => scrollTo('properties')}>View Properties</button>
          <button className="btn btn-ghost-light" onClick={() => scrollTo('contact')}>Contact Agent</button>
        </div>
        <div className="hero-trust">
          <div className="trust-item"><div className="trust-dot"></div>Premium Listings</div>
          <div className="trust-item"><div className="trust-dot"></div>Private Viewings</div>
          <div className="trust-item"><div className="trust-dot"></div>Trusted Agents</div>
        </div>
      </div>
      <div className="scroll-hint">
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none">
          <rect x="1" y="1" width="12" height="20" rx="6" stroke="currentColor" strokeWidth="1.5"/>
          <rect x="6" y="5" width="2" height="4" rx="1" fill="currentColor"/>
        </svg>
        Scroll
      </div>
    </section>
  );
};

/* ─ Properties ───────────────────────────────────────────── */
const CARDS = [
  { id: 'property-1', name: 'Modern Glass Villa',   loc: 'Berlin, Germany',  price: '€2,450,000', spec: '5 Beds · 4 Baths · 420 m²', img: 'assets/p1/p1-1.png', badge: 'Featured'  },
  { id: 'property-2', name: 'Mediterranean Estate', loc: 'Potsdam, Germany', price: '€3,200,000', spec: '6 Beds · 5 Baths · 560 m²', img: 'assets/p2/p2-1.png', badge: 'Exclusive' },
];

const Properties = ({ onNavigate }) => (
  <section className="section" id="properties">
    <div className="container">
      <div className="sec-head">
        <span className="eyebrow">Featured Properties</span>
        <h2 className="sec-title">Curated for Exceptional Living</h2>
        <p className="sec-sub">Handpicked properties that redefine luxury in Germany's most coveted locations.</p>
      </div>
      <div className="props-grid">
        {CARDS.map(p => (
          <div key={p.id} className="prop-card" onClick={() => onNavigate(p.id)}>
            <div className="prop-card-img">
              <img src={p.img} alt={p.name} />
              <span className="prop-badge">{p.badge}</span>
            </div>
            <div className="prop-info">
              <div className="prop-loc">{p.loc}</div>
              <div className="prop-name">{p.name}</div>
              <div className="prop-spec">{p.spec}</div>
              <div className="prop-foot">
                <div className="prop-price">{p.price}</div>
                <div className="prop-link">View Listing →</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ─ About ────────────────────────────────────────────────── */
const About = () => (
  <section className="section about-sec" id="about">
    <div className="container">
      <div className="about-inner">
        <div>
          <span className="about-lbl">About Luxe Estates</span>
          <h2 className="about-h">A Better Way to Buy<br />Exceptional Homes</h2>
          <p className="about-p">We provide more than listings — we offer a curated journey through Germany's finest residential properties. Our advisors bring decades of local expertise, deep market knowledge, and an unwavering commitment to discretion.</p>
          <p className="about-p">From your first inquiry to the moment you receive the keys, every step is handled with care. Private viewings, transparent guidance, and a network of trusted professionals ensure a seamless experience from beginning to end.</p>
          <div className="about-stats">
            <div><div className="stat-n">240+</div><div className="stat-l">Premium Listings</div></div>
            <div><div className="stat-n">18</div><div className="stat-l">Years Experience</div></div>
            <div><div className="stat-n">98%</div><div className="stat-l">Client Satisfaction</div></div>
          </div>
        </div>
        <div className="about-imgs">
          <img src="assets/p1/p1-6.png" alt="Luxury exterior" />
          <img src="assets/p1/p1-2.png" alt="Interior bedroom" />
          <img src="assets/p1/p1-4.png" alt="Living area" />
        </div>
      </div>
    </div>
  </section>
);

/* ─ Process ──────────────────────────────────────────────── */
const STEPS = [
  { n:'01', icon:'◈', title:'Discover Curated Homes',        text:'Browse our exclusive portfolio of premium properties, each handpicked to meet the highest standards of design, location, and lifestyle.' },
  { n:'02', icon:'◎', title:'Schedule a Private Viewing',    text:'Your personal advisor arranges an intimate, unhurried viewing at a time that suits you — no crowds, no pressure, just the space to fall in love.' },
  { n:'03', icon:'◇', title:'Move with Confidence',          text:'From offer to completion, we handle every detail. Expert legal support, transparent pricing, and a seamless handover on your terms.' },
];

const Process = () => (
  <section className="section process-sec">
    <div className="container">
      <div className="sec-head">
        <span className="eyebrow">How It Works</span>
        <h2 className="sec-title">Your Path to the Perfect Home</h2>
        <p className="sec-sub">Three thoughtful steps — from discovery to moving in with complete confidence.</p>
      </div>
      <div className="process-grid">
        {STEPS.map(s => (
          <div key={s.n} className="proc-step">
            <div className="proc-num">{s.n}</div>
            <div className="proc-icon">{s.icon}</div>
            <div className="proc-t">{s.title}</div>
            <p className="proc-p">{s.text}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ─ Contact ──────────────────────────────────────────────── */
const Contact = () => {
  const [sent, setSent] = useHPState(false);
  const handleSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section contact-sec" id="contact">
      <div className="container">
        <div className="contact-inner">
          <div>
            <span className="contact-lbl">Get in Touch</span>
            <h2 className="contact-h">Ready to Find Your Next Home?</h2>
            <p className="contact-p">Our advisors are available for private consultations by appointment, at your convenience. Reach out and we'll be in touch within 24 hours.</p>
            <div className="c-infos">
              <div className="c-row"><div className="c-ico">✆</div>+49 30 123 456 78</div>
              <div className="c-row"><div className="c-ico">✉</div>hello@luxeestates.de</div>
              <div className="c-row"><div className="c-ico">◉</div>Kurfürstendamm 10, 10719 Berlin</div>
            </div>
          </div>
          <div>
            {sent ? (
              <div style={{ textAlign:'center', padding:'64px 0', color:'white' }}>
                <div style={{ fontSize:'3rem', marginBottom:'16px', color:'var(--gold-lt)' }}>✓</div>
                <div style={{ fontFamily:'var(--ff-d)', fontSize:'1.75rem', fontWeight:300, marginBottom:'12px' }}>Thank you</div>
                <div style={{ color:'rgba(255,255,255,.5)', fontSize:'.95rem' }}>We'll be in touch within 24 hours.</div>
              </div>
            ) : (
              <form className="form" onSubmit={handleSubmit}>
                <div className="form-row">
                  <div className="form-f">
                    <label className="form-lbl">Name</label>
                    <input className="form-inp" placeholder="Your full name" required />
                  </div>
                  <div className="form-f">
                    <label className="form-lbl">Email</label>
                    <input className="form-inp" type="email" placeholder="your@email.com" required />
                  </div>
                </div>
                <div className="form-f">
                  <label className="form-lbl">Phone</label>
                  <input className="form-inp" placeholder="+49 000 000 0000" />
                </div>
                <div className="form-f">
                  <label className="form-lbl">Message</label>
                  <textarea className="form-inp" placeholder="Tell us what you're looking for…" required></textarea>
                </div>
                <button type="submit" className="form-submit">Book a Private Viewing</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─ Footer ───────────────────────────────────────────────── */
const Footer = ({ onNavigate }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div>
          <div className="ft-logo">LUXE ESTATES</div>
          <p className="ft-tag">Premium real estate advisory in Berlin and Brandenburg. Curated properties, private viewings, trusted guidance.</p>
        </div>
        <div>
          <div className="ft-col-h">Navigate</div>
          <ul className="ft-links">
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('home'); }}>Home</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('home','properties'); }}>Properties</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('home','about'); }}>About</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('home','contact'); }}>Contact</a></li>
          </ul>
        </div>
        <div>
          <div className="ft-col-h">Properties</div>
          <ul className="ft-links">
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('property-1'); }}>Modern Glass Villa</a></li>
            <li><a href="#" onClick={e => { e.preventDefault(); onNavigate('property-2'); }}>Mediterranean Estate</a></li>
          </ul>
        </div>
        <div>
          <div className="ft-col-h">Contact</div>
          <ul className="ft-links">
            <li><a href="tel:+4930123456780">+49 30 123 456 78</a></li>
            <li><a href="mailto:hello@luxeestates.de">hello@luxeestates.de</a></li>
            <li><a href="#">Kurfürstendamm 10</a></li>
            <li><a href="#">Berlin, Germany</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <div className="ft-copy">© 2026 Luxe Estates GmbH. All rights reserved.</div>
        <div className="ft-socs">
          <div className="ft-soc">in</div>
          <div className="ft-soc">ig</div>
          <div className="ft-soc">fb</div>
        </div>
      </div>
    </div>
  </footer>
);

/* ─ Page Assembly ────────────────────────────────────────── */
const HomePage = ({ onNavigate }) => (
  <div>
    <Hero onNavigate={onNavigate} />
    <Properties onNavigate={onNavigate} />
    <About />
    <Process />
    <Contact />
    <Footer onNavigate={onNavigate} />
  </div>
);

Object.assign(window, { HomePage });