/* Night-canvas overrides for the homepage: a full-bleed hero with the planner on its lower edge,
   and the featured packages set as an editorial hairline grid instead of three stacked cards.
   Everything else on the page is the design system's own section set, inheriting the dark tokens. */
const { Button, PhotoFrame, SectionHeader, PriceDisplay, MetadataRow, Rating, TripSearch } = window.VE;
const ND = window.VE_DATA;

function Hero({ onPlanTrip, search, onSearchChange, onSubmit, compactSearch }) {
  return (
    <section className="vn-hero">
      <img className="vn-hero__photo" src={vePhoto('mountains', 2400, 1400)} alt="Last light on a high mountain range above open grassland" />
      <div className="vn-hero__grade" />
      <div className="ve-container vn-hero__inner">
        <div className="vn-hero__copy">
          <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>
        {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>
    </section>
  );
}

function EditorialPackages({ 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="vn-split">
        {ND.packages.slice(0, 4).map((p) => (
          <article className="vn-split__cell" key={p.slug}>
            <div className="vn-split__text">
              <h3 className="ve-heading-lg">{p.title}</h3>
              <PriceDisplay amount={p.price} from unit="per person" size="lg" />
              <div className="vn-split__facts">
                <MetadataRow separator="none" items={[{ icon: 'MapPin', label: p.destination }]} />
                <MetadataRow separator="none" items={[{ icon: 'CalendarDays', label: p.nights + ' nights / ' + p.days + ' days' }]} />
                <MetadataRow separator="none" items={[{ icon: 'Check', label: p.inclusions.join(' · ') }]} />
                <Rating value={p.rating} count={p.reviews} />
              </div>
              <div className="vn-split__cta">
                <Button variant="secondary" trailingIcon="ArrowRight" onClick={() => onOpen('package', p)}>View package</Button>
              </div>
            </div>
            <div className="vn-split__photo">
              <PhotoFrame src={vePhoto(p.photo, 900, 1100)} alt={p.title + ' — ' + p.destination} ratio="3/4" radius="flush" zoomOnHover />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function HomeScreen({ onOpen, onPlanTrip, search, onSearchChange, onSearchSubmit, isMobile }) {
  return (
    <main>
      <Hero onPlanTrip={onPlanTrip} search={search} onSearchChange={onSearchChange} onSubmit={onSearchSubmit} compactSearch={isMobile} />
      <FeaturedDestinations onOpen={onOpen} />
      <CuratedEscapes onOpen={onOpen} />
      <EditorialPackages onOpen={onOpen} />
      <WhyVeloria />
      <HowItWorks />
      <Testimonials />
      <Inspiration />
      <FinalCTA onPlanTrip={onPlanTrip} />
      <ContactStrip onPlanTrip={onPlanTrip} />
    </main>
  );
}

Object.assign(window, { Hero, EditorialPackages, HomeScreen });