const { Button, IconButton, Icon, SectionHeader, Badge, Tag, Rating, PriceDisplay, MetadataRow,
  DestinationCard, PackageCard, ExperienceCard, TestimonialCard, InspirationCard, TripSearch, Footer } = window.VE;
const D = window.VE_DATA;

function Hero({ onPlanTrip, search, onSearchChange, onSubmit, compactSearch }) {
  return (
    <section style={{ position: 'relative', minHeight: 'min(88vh, 780px)', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      <img src={vePhoto('coast', 2000, 1200)} alt="Late light along a Mediterranean coastline" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'var(--overlay-photo-hero)' }} />
      <div className="ve-container" style={{ position: 'relative', paddingTop: 'calc(var(--nav-height) + 96px)', paddingBottom: 'var(--space-2xl)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', maxWidth: 640 }}>
          <span className="ve-eyebrow ve-eyebrow--onphoto">Your next escape</span>
          <h1 className="ve-display-xl" style={{ color: '#fff' }}>Travel beautifully.<br />We&rsquo;ll plan the rest.</h1>
          <p className="ve-body-lg" style={{ color: 'rgba(255,255,255,.88)', maxWidth: '46ch' }}>
            Curated journeys, personalised itineraries, and seamless travel planning with Veloria Escape.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-md)', marginTop: 'var(--space-xs)' }}>
            <Button variant="inverse" size="lg" onClick={onPlanTrip}>Plan my trip</Button>
            <Button variant="ghost-inverse" size="lg" href="#destinations">Explore destinations</Button>
          </div>
        </div>
        <div style={{ marginTop: 'var(--space-2xl)', maxWidth: 960 }}>
          {compactSearch
            ? <TripSearch compact destination={search.destination} onExpand={onSubmit} />
            : <TripSearch destination={search.destination} dates={search.dates} travellers={search.travellers}
                activeField={search.activeField} onFieldFocus={(field) => onSearchChange({ ...search, activeField: field })} onSubmit={onSubmit} />}
        </div>
      </div>
    </section>
  );
}

function FeaturedDestinations({ onOpen }) {
  return (
    <section className="ve-section ve-container" id="destinations">
      <SectionHeader eyebrow="Where to next" title="Destinations we know well"
        description="Eight places our specialists travel to often, with the seasons and stays already worked out."
        action={<Button variant="tertiary" trailingIcon="ArrowRight" onClick={() => onOpen('listing')}>All destinations</Button>} />
      <div className="ve-grid ve-grid--4">
        {D.destinations.slice(0, 4).map((d) => (
          <DestinationCard key={d.slug} image={vePhoto(d.photo, 800, 600)} alt={d.tagline + ' in ' + d.name}
            name={d.name} region={d.region} tagline={d.tagline} priceFrom={d.priceFrom} badge={d.badge} saveable
            onClick={(e) => { e.preventDefault(); onOpen('destination', d); }} />
        ))}
      </div>
    </section>
  );
}

function CuratedEscapes({ onOpen }) {
  return (
    <section className="ve-section--soft" id="experiences">
      <div className="ve-section ve-container" style={{ paddingBlock: 0 }}>
        <div style={{ paddingBlock: 'var(--space-section)' }}>
          <SectionHeader eyebrow="Curated escapes" title="Journeys built around how you travel"
            description="Tell us the shape of the trip and we will fill in the rest."
            action={<Button variant="tertiary" trailingIcon="ArrowRight" onClick={() => onOpen('listing')}>View all</Button>} />
          <div className="ve-grid ve-grid--4">
            {D.experiences.map((x) => (
              <ExperienceCard key={x.title} image={vePhoto(x.photo, 700, 900)} alt={x.title}
                category={x.category} title={x.title} description={x.description} priceFrom={x.priceFrom}
                onClick={(e) => { e.preventDefault(); onOpen('listing'); }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FeaturedPackages({ onOpen }) {
  return (
    <section className="ve-section ve-container" id="packages">
      <SectionHeader eyebrow="Ready to travel" title="Packages you can leave with"
        description="Fully planned trips, still yours to change."
        action={<Button variant="tertiary" trailingIcon="ArrowRight" onClick={() => onOpen('listing')}>All packages</Button>} />
      <div className="ve-grid ve-grid--3">
        {D.packages.slice(0, 3).map((p) => (
          <div key={p.slug} onClick={() => onOpen('package', p)} style={{ cursor: 'pointer' }}>
            <PackageCard image={vePhoto(p.photo, 800, 500)} alt={p.title} title={p.title} destination={p.destination}
              nights={p.nights} days={p.days} price={p.price} rating={p.rating} reviewCount={p.reviews} inclusions={p.inclusions} />
          </div>
        ))}
      </div>
    </section>
  );
}

function WhyVeloria() {
  return (
    <section className="ve-section--soft" id="why">
      <div className="ve-container" style={{ paddingBlock: 'var(--space-section)' }}>
        <SectionHeader eyebrow="Why Veloria" title="Planning, handled by people who travel"
          description="Four things every Veloria trip includes, whatever it costs." />
        <div className="ve-grid ve-grid--4">
          {D.why.map((w) => (
            <div key={w.title} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
              <Icon name={w.icon} size={26} strokeWidth={1.5} color="var(--color-primary)" />
              <h3 className="ve-heading-sm">{w.title}</h3>
              <p className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="ve-section ve-container">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'var(--space-3xl)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', position: 'sticky', top: 'calc(var(--nav-height) + 32px)' }}>
          <span className="ve-eyebrow">How it works</span>
          <h2 className="ve-display-md">Four steps, and most of them are ours</h2>
          <p className="ve-body-md" style={{ color: 'var(--color-muted)', maxWidth: '38ch' }}>
            No forms to fight with. A conversation, a plan, and a trip you can stop thinking about.
          </p>
          <div style={{ borderRadius: 'var(--radius-image)', overflow: 'hidden', aspectRatio: '4/3', marginTop: 'var(--space-sm)' }}>
            <img src={vePhoto('viewpoint', 800, 600)} alt="A traveller looking out over a lake and mountains" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' }}>
          {D.steps.map((s, i) => (
            <li key={s.n} style={{ display: 'grid', gridTemplateColumns: '64px minmax(0,1fr)', gap: 'var(--space-lg)', padding: 'var(--space-lg) 0', borderTop: i === 0 ? 'none' : '1px solid var(--color-hairline-soft)' }}>
              <span className="ve-display-sm" style={{ color: 'var(--color-primary)' }}>{s.n}</span>
              <span style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span className="ve-heading-md">{s.title}</span>
                <span className="ve-body-md" style={{ color: 'var(--color-muted)' }}>{s.body}</span>
              </span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="ve-section--soft">
      <div className="ve-container" style={{ paddingBlock: 'var(--space-section)' }}>
        <SectionHeader eyebrow="Travellers" title="Trips people still talk about" />
        <div className="ve-grid ve-grid--3">
          {D.testimonials.map((t) => (
            <TestimonialCard key={t.name} quote={t.quote} name={t.name} trip={t.trip} date={t.date} rating={t.rating} avatar={window.VE_AVATARS[t.avatar]} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Inspiration() {
  return (
    <section className="ve-section ve-container" id="inspiration">
      <SectionHeader eyebrow="Travel inspiration" title="Get inspired for your next escape"
        description="Places our travellers came back talking about."
        action={<Button variant="tertiary" trailingIcon="ArrowRight">See more</Button>} />
      <div className="ve-grid ve-grid--4">
        {D.inspiration.map((p) => (
          <InspirationCard key={p.location} image={vePhoto(p.photo, 700, 700)} alt={p.note + ', ' + p.location} location={p.location} note={p.note} />
        ))}
      </div>
    </section>
  );
}

function FinalCTA({ onPlanTrip }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }} id="plan">
      <img src={vePhoto('horizon', 2000, 900)} alt="Calm sea meeting a pale horizon" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'var(--overlay-photo-hero)' }} />
      <div className="ve-container" style={{ position: 'relative', paddingBlock: 'var(--space-4xl)', display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', alignItems: 'flex-start', maxWidth: 720 }}>
        <h2 className="ve-display-lg" style={{ color: '#fff' }}>Your next escape starts here.</h2>
        <p className="ve-body-lg" style={{ color: 'rgba(255,255,255,.88)', maxWidth: '42ch' }}>
          Tell us where you want to go. We&rsquo;ll take care of the details.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-md)', marginTop: 'var(--space-xs)' }}>
          <Button variant="primary" size="lg" onClick={onPlanTrip}>Plan my trip</Button>
          <Button variant="ghost-inverse" size="lg" leadingIcon="Phone" href="tel:+919717972359">Talk to Veloria Escape</Button>
        </div>
      </div>
    </section>
  );
}

function ContactStrip({ onPlanTrip }) {
  return (
    <section className="ve-section--compact ve-container" id="contact" style={{ paddingBlock: 'var(--space-3xl)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-3xl)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
          <span className="ve-eyebrow">Contact</span>
          <h2 className="ve-display-sm">Tell us where you want to go</h2>
          <p className="ve-body-md" style={{ color: 'var(--color-muted)', maxWidth: '40ch' }}>
            Call or email us and a specialist will pick it up. We usually reply within a few hours.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)', borderLeft: '1px solid var(--color-hairline-soft)', paddingLeft: 'var(--space-3xl)' }}>
          <a className="ve-contact-line" href="tel:+919717972359" style={{ fontSize: 'var(--type-body-lg-size)' }}><Icon name="Phone" size={18} />+91 97179 72359</a>
          <a className="ve-contact-line" href="mailto:veloriaescape@gmail.com" style={{ fontSize: 'var(--type-body-lg-size)' }}><Icon name="Mail" size={18} />veloriaescape@gmail.com</a>
          <div style={{ display: 'flex', gap: 'var(--space-md)', marginTop: 'var(--space-sm)' }}>
            <Button variant="primary" onClick={onPlanTrip}>Plan my trip</Button>
            <Button variant="secondary" href="mailto:veloriaescape@gmail.com">Email us</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, FeaturedDestinations, CuratedEscapes, FeaturedPackages, WhyVeloria, HowItWorks, Testimonials, Inspiration, FinalCTA, ContactStrip });