const { Button, IconButton, Icon, Badge, Tag, Rating, MetadataRow, Tabs, Breadcrumbs, PackageCard, PhotoFrame, Alert } = window.VE;

function Gallery({ photos, alt }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)', gridTemplateRows: '1fr 1fr', gap: 8, height: 460 }}>
      <div style={{ gridRow: 'span 2', position: 'relative', borderRadius: 'var(--radius-lg) 0 0 var(--radius-lg)', overflow: 'hidden' }}>
        <img src={vePhoto(photos[0], 1400, 1000)} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
      {photos.slice(1, 5).map((p, i) => (
        <div key={p + i} style={{ overflow: 'hidden', borderRadius: i === 1 ? '0 var(--radius-lg) 0 0' : i === 3 ? '0 0 var(--radius-lg) 0' : 0, position: 'relative' }}>
          <img src={vePhoto(p, 700, 500)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          {i === 3 ? (
            <button type="button" className="ve-btn ve-btn--inverse ve-btn--sm" style={{ position: 'absolute', right: 12, bottom: 12, boxShadow: 'var(--elevation-card)' }}>
              <Icon name="Camera" size={15} />Show all photos
            </button>
          ) : null}
        </div>
      ))}
    </div>
  );
}

function FAQList({ faqs }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {faqs.map((f, i) => (
        <div key={f.q} style={{ borderTop: '1px solid var(--color-hairline-soft)' }}>
          <button type="button" onClick={() => setOpen(open === i ? -1 : i)}
            style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
            <span className="ve-heading-sm">{f.q}</span>
            <Icon name={open === i ? 'Minus' : 'Plus'} size={18} color="var(--color-muted)" />
          </button>
          {open === i ? <p className="ve-body-md" style={{ color: 'var(--color-muted)', paddingBottom: 22, maxWidth: '70ch' }}>{f.a}</p> : null}
        </div>
      ))}
    </div>
  );
}

function DestinationDetailScreen({ destination, onOpen, onPlanTrip }) {
  const D = window.VE_DATA;
  const d = destination || D.destinations[0];
  const [tab, setTab] = React.useState('overview');
  const photos = [d.photo, 'coast', 'market', 'food', 'viewpoint'];
  const things = [
    { title: 'Sunrise at the viewpoint', body: 'Leave before six, have the cliff to yourselves for an hour.', photo: 'viewpoint' },
    { title: 'A morning market walk', body: 'Breakfast where the sellers eat, with a guide who knows them.', photo: 'market' },
    { title: 'One long, slow dinner', body: 'A table booked for the whole evening, no second sitting.', photo: 'food' }
  ];
  return (
    <main>
      <div className="ve-container" style={{ paddingTop: 'var(--space-lg)', display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
        <Breadcrumbs items={[{ label: 'Home', href: '#' }, { label: 'Destinations', href: '#' }, { label: d.name }]} />
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-md)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <h1 className="ve-display-lg">{d.name}</h1>
            <MetadataRow items={[d.region, 'Best ' + d.season, d.duration + ' recommended']} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
            <Rating value={4.9} count={214} />
            <IconButton icon="Heart" label={'Save ' + d.name} />
            <IconButton icon="Share2" label="Share" />
            <Button variant="primary" onClick={onPlanTrip}>Plan this trip</Button>
          </div>
        </div>
        <Gallery photos={photos} alt={d.tagline + ' in ' + d.name} />
      </div>

      <div className="ve-container" style={{ marginTop: 'var(--space-xl)' }}>
        <Tabs items={[{ value: 'overview', label: 'Overview' }, { value: 'things', label: 'Things to do' }, { value: 'packages', label: 'Packages', count: 3 }, { value: 'faqs', label: 'FAQs' }]} value={tab} onChange={setTab} />
      </div>

      <div className="ve-container" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.6fr) minmax(0,1fr)', gap: 'var(--space-3xl)', paddingBlock: 'var(--space-xl) var(--space-section)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2xl)' }}>
          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Why go</h2>
            <p className="ve-body-lg" style={{ color: 'var(--color-body)', maxWidth: '62ch' }}>
              {d.name} rewards a slower plan. We build days that start early, leave the afternoons open, and put you somewhere with a view for the evening. Our specialists have driven these routes, stayed in these rooms and eaten in these kitchens.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-sm)', marginTop: 'var(--space-xs)' }}>
              {d.style.map((s) => <Tag key={s} interactive={false}>{s}</Tag>)}
              <Tag interactive={false} icon="Sun">{d.season}</Tag>
            </div>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Best time to visit</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,minmax(0,1fr))', gap: 8 }}>
              {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((m, i) => {
                const good = d.season.toLowerCase().indexOf(m.toLowerCase()) > -1 || (i > 9 || i < 4);
                return (
                  <div key={m} style={{ padding: '12px 8px', borderRadius: 'var(--radius-sm)', textAlign: 'center', fontSize: 'var(--type-body-sm-size)', background: good ? 'var(--color-primary-subtle)' : 'var(--color-surface-strong)', color: good ? 'var(--color-primary-active)' : 'var(--color-muted)' }}>{m}</div>
                );
              })}
            </div>
            <Alert tone="info">Shoulder season is quieter and about 20% cheaper. Ask us which weeks are worth it.</Alert>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Things to do</h2>
            <div className="ve-grid ve-grid--3">
              {things.map((t) => (
                <div key={t.title} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
                  <PhotoFrame src={vePhoto(t.photo, 600, 450)} alt={t.title} ratio="4/3" />
                  <h3 className="ve-heading-sm">{t.title}</h3>
                  <p className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>{t.body}</p>
                </div>
              ))}
            </div>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Packages in {d.name}</h2>
            {D.packages.slice(0, 2).map((p) => (
              <div key={p.slug} onClick={() => onOpen('package', p)} style={{ cursor: 'pointer' }}>
                <PackageCard layout="horizontal" image={vePhoto(p.photo, 700, 520)} alt={p.title} title={p.title}
                  destination={p.destination} nights={p.nights} days={p.days} price={p.price} inclusions={p.inclusions} />
              </div>
            ))}
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
            <h2 className="ve-heading-lg">Questions travellers ask</h2>
            <FAQList faqs={D.faqs} />
          </section>
        </div>

        <aside style={{ position: 'sticky', top: 'calc(var(--nav-height) + 24px)', alignSelf: 'start', border: '1px solid var(--color-hairline)', borderRadius: 'var(--radius-card)', padding: 'var(--space-lg)', display: 'flex', flexDirection: 'column', gap: 'var(--space-base)', boxShadow: 'var(--elevation-card)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span className="ve-eyebrow">Plan {d.name}</span>
            <span className="ve-heading-md">Speak to a specialist</span>
          </div>
          <p className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>
            Tell us your dates and we will send an itinerary with stays and costs within 24 hours.
          </p>
          <Button variant="primary" block onClick={onPlanTrip}>Plan my trip</Button>
          <Button variant="secondary" block leadingIcon="Phone" href="tel:+919717972359">+91 97179 72359</Button>
          <hr className="ve-divider" />
          <MetadataRow separator="none" items={[{ icon: 'Clock', label: 'Replies within a few hours' }, { icon: 'ShieldCheck', label: 'No payment until you approve' }]} />
        </aside>
      </div>
    </main>
  );
}
Object.assign(window, { DestinationDetailScreen });