const { Button, Icon, Tag, TextInput, Textarea, Select, DatePicker, TravellerSelector, Alert, SectionHeader, ContactBlock, PhotoFrame } = window.VE;

const TRAVEL_STYLES = ['Beach', 'Mountains', 'Culture', 'Honeymoon', 'Family', 'Luxury', 'Adventure', 'Weekend'];

function PlanMyTripScreen({ onToast }) {
  const [styles, setStyles] = React.useState(['Honeymoon']);
  const [dates, setDates] = React.useState({ start: null, end: null });
  const [party, setParty] = React.useState({ adults: 2, children: 0, rooms: 1 });
  const [sent, setSent] = React.useState(false);
  const toggle = (s) => setStyles((prev) => (prev.includes(s) ? prev.filter((x) => x !== s) : prev.concat(s)));

  return (
    <main>
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <img src={vePhoto('lake', 2000, 700)} alt="A still lake below snow-lined peaks" 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-3xl)', display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', maxWidth: 640 }}>
          <span className="ve-eyebrow ve-eyebrow--onphoto">Plan my trip</span>
          <h1 className="ve-display-lg" style={{ color: '#fff' }}>Tell us where you want to go</h1>
          <p className="ve-body-lg" style={{ color: 'rgba(255,255,255,.88)', maxWidth: '42ch' }}>
            A few details are enough. A specialist will come back with a plan, not a brochure.
          </p>
        </div>
      </section>

      <div className="ve-container" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.5fr) minmax(0,1fr)', gap: 'var(--space-3xl)', paddingBlock: 'var(--space-section)' }}>
        <form style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xl)' }} onSubmit={(e) => e.preventDefault()}>
          {sent ? <Alert tone="success" title="Thank you — your request is in">A Veloria specialist will reply from veloriaescape@gmail.com within a few hours.</Alert> : null}

          <fieldset style={{ border: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <legend className="ve-heading-md" style={{ marginBottom: 'var(--space-sm)' }}>Where and when</legend>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-base)' }}>
              <TextInput label="Where would you like to go?" icon="MapPin" placeholder="Bali, Maldives, or somewhere quiet" help="Not sure yet? Tell us the kind of place." />
              <Select label="Roughly when?" placeholder="Select a month" options={['November 2026', 'December 2026', 'January 2027', 'February 2027', 'Flexible']} />
            </div>
            <DatePicker label="Exact dates, if you have them" value={dates} onChange={setDates} minDate={new Date()} help="Pick a rough week — we can move it by a day or two." />
          </fieldset>

          <fieldset style={{ border: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <legend className="ve-heading-md" style={{ marginBottom: 'var(--space-sm)' }}>Who is travelling</legend>
            <TravellerSelector value={party} onChange={setParty} />
          </fieldset>

          <fieldset style={{ border: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <legend className="ve-heading-md" style={{ marginBottom: 'var(--space-sm)' }}>How you like to travel</legend>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-sm)' }}>
              {TRAVEL_STYLES.map((s) => <Tag key={s} selected={styles.includes(s)} onClick={() => toggle(s)}>{s}</Tag>)}
            </div>
            <Select label="Budget per person" placeholder="Select a range" options={['Under \u20B975,000', '\u20B975,000 – \u20B91,50,000', '\u20B91,50,000 – \u20B93,00,000', 'Above \u20B93,00,000', 'Not sure yet']} />
            <Textarea label="Anything we should know?" rows={4} placeholder="Anniversary trip, we love long breakfasts and short drives." help="Dietary needs, accessibility, celebrations — all useful." />
          </fieldset>

          <fieldset style={{ border: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <legend className="ve-heading-md" style={{ marginBottom: 'var(--space-sm)' }}>How to reach you</legend>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-base)' }}>
              <TextInput label="Full name" placeholder="Ananya Sharma" required />
              <TextInput label="Phone" type="tel" icon="Phone" placeholder="+91" required />
              <TextInput label="Email" type="email" icon="Mail" placeholder="you@email.com" required />
              <Select label="Best way to reach you" options={['Phone call', 'Email', 'Either is fine']} />
            </div>
          </fieldset>

          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--space-md)' }}>
            <Button variant="primary" size="lg" type="submit" onClick={() => { setSent(true); if (onToast) onToast('Trip request sent'); }}>Send my request</Button>
            <span className="ve-caption">No payment now. We reply within a few hours.</span>
          </div>
        </form>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', position: 'sticky', top: 'calc(var(--nav-height) + 24px)', alignSelf: 'start' }}>
          <PhotoFrame src={vePhoto('cafe', 700, 520)} alt="Coffee on a quiet café table" ratio="4/3" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <h2 className="ve-heading-md">What happens next</h2>
            {[['MessageCircle', 'A specialist reads your notes and calls or emails you.'], ['Compass', 'You get an itinerary with stays, routes and costs.'], ['ShieldCheck', 'Nothing is booked until you say yes.']].map((row) => (
              <div key={row[1]} style={{ display: 'flex', gap: 'var(--space-md)', alignItems: 'flex-start' }}>
                <Icon name={row[0]} size={20} color="var(--color-primary)" />
                <span className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>{row[1]}</span>
              </div>
            ))}
          </div>
          <hr className="ve-divider" />
          <ContactBlock heading="Prefer to talk?" note="Phone and email are both answered by the team that plans your trip." />
        </aside>
      </div>
    </main>
  );
}
Object.assign(window, { PlanMyTripScreen });