/* Home page — inset hero, who it's for, how it works, pricing, quiz, about, itinerary preview, contact */
const { useState } = React;

/* The hero used to be a looping video with its own headline burned into the
   footage as atmosphere — but that meant the real headline only existed as
   pixels inside a video, invisible to Google, Pinterest and AI crawlers
   (they don't reliably wait for JS, and none of them read text out of video
   frames). It's now a plain photo (a still that was already sitting unused
   in assets/, with no baked-in text) behind a real HTML headline, subheading
   and quiz button — the same "real text in the page" approach the blog
   pages already use. */
function HomeHero() {
  return (
    <section className="hx" id="home-hero">
      <div className="hx-frame hx-frame--sky reveal">
        <img className="hx-video" src="assets/hero-palms-beach.webp" alt="A woman sitting alone on a quiet beach framed by palm leaves, looking out at the water" />
        <div className="hx-scrim hx-scrim--photo" />
        <div className="hx-inner hx-inner--sky">
          <div className="hx-hero-copy">
            <h1 className="hx-title" style={{ fontSize: 'clamp(32px, 5vw, 56px)' }}>Solo travel planning for women,<br />built around how you actually want to feel</h1>
            <div className="hx-cta">
              <a className="gtg-pill" href="#quiz">What kind of solo trip do you need? <Icon name="arrowRight" size={16} stroke={1.9} /></a>
            </div>
            <p className="hx-lead">A 2-minute quiz matches you to the trip you need &mdash; then I plan it.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "statementFontSize": 24
}/*EDITMODE-END*/;

function WhoItsFor({ statementFontSize }) {
  const cards = [
    { icon: 'sunrise', title: 'You know there is more to life than your current routine.' },
    { icon: 'leaf', title: 'Your current environment is not helping you move forward with what you are going through \u2014 let it be grief, breakup, career change or any life transition.' },
    { icon: 'moon', title: 'You could use a trip that is only about You, and what You need \u2014 without having to constantly adjust to others.' },
  ];
  const whyCards = [
    { icon: 'compass', text: 'I have been there \u2014 I can relate to how you feel mentally, and have been to where you want to go physically. I can now use all my experience to make sure your solo trip will be safe, smooth and completely matched to your personality.' },
    { icon: 'feather', text: 'There\u2019s so much information out there \u2014 I can reduce the noise for you and take the stress off your shoulders. You can skip the overwhelming research phase and the uncertainty \u2014 all you need to do is be there.' },
    { icon: 'star', text: 'I care and want the best for you. Solo travel changed the way I see life, and I want you to experience this too. Whether it\u2019s your first time travelling alone, or if you\u2019re used to it, a solo trip planned with intention can really make a difference.' },
  ];
  return (
    <>
      <section className="gtg-who anchor" id="who">
        <div className="gtg-who-head reveal-pan">
          <h2 className="gtg-section-title gtg-who-headline">You need a solo trip if:</h2>
        </div>
        <div className="gtg-who-grid gtg-who-grid--stack">
          {cards.map((c, i) => (
            <div className={'gtg-who-card reveal gtg-float-' + (i % 2 === 0 ? 'left' : 'right')} key={c.title} style={{ transitionDelay: (i * 220) + 'ms' }}>
              <span className="gtg-who-badge"><Icon name={c.icon} size={20} stroke={1.6} /></span>
              <h3>{c.title}</h3>
            </div>
          ))}
        </div>
      </section>
      <section className="gtg-who anchor" id="why-me">
        <div className="gtg-who-head reveal-pan">
          <h2 className="gtg-section-title gtg-who-headline">Why plan with me:</h2>
        </div>
        <div className="gtg-who-grid gtg-who-grid--stack">
          {whyCards.map((c, i) => (
            <div className={'gtg-who-card reveal gtg-float-' + (i % 2 === 0 ? 'left' : 'right')} key={c.text} style={{ transitionDelay: (i * 220) + 'ms' }}>
              <span className="gtg-who-badge"><Icon name={c.icon} size={20} stroke={1.6} /></span>
              <h3>{c.text}</h3>
            </div>
          ))}
        </div>
      </section>
      <section className="gtg-who-statement">
        <div className="gtg-statement-inner reveal">
          <video className="gtg-statement-video" src="assets/who-statement-video.mp4" autoPlay muted loop playsInline style={{ width: '100%', maxWidth: 900, display: 'block', margin: '0 auto', borderRadius: 'var(--r-lg)' }}></video>
        </div>
      </section>
    </>
  );
}

function HowItWorks() {
  const steps = [
    { icon: 'quizQ', n: '01', title: 'Take the quiz for inspiration', href: '#quiz' },
    { icon: 'mail', n: '02', title: 'Choose your package', href: '#contact' },
    { icon: 'phone', n: '03', title: 'Book your consultation call', href: '#contact' },
    { icon: 'mapPin', n: '04', title: 'Enjoy your solo trip' },
  ];
  return (
    <section className="gtg-how anchor" id="how">
      <div className="gtg-how-head reveal">
        <h2 className="gtg-section-title">How it works</h2>
      </div>
      <div className="gtg-how-grid gtg-how-grid--stack">
        {steps.map((s, i) => (
          <div className="gtg-step reveal" style={{ transitionDelay: (i * 140) + 'ms' }} key={s.n}>
            {s.href
              ? <a className="gtg-step-icon" href={s.href} aria-label={s.title}><Icon name={s.icon} size={22} stroke={1.6} /></a>
              : <div className="gtg-step-icon"><Icon name={s.icon} size={22} stroke={1.6} /></div>}
            <span className="gtg-step-n">{s.n}</span>
            <h3 className="gtg-step-title">{s.title}</h3>
          </div>
        ))}
      </div>
    </section>
  );
}

function PtCell({ v, featured }) {
  const cls = 'gtg-pt-cell' + (featured ? ' gtg-pt-featured' : '') + (v === 'x' ? ' icon-x' : '');
  if (v === 'check') return <div className={cls}><Icon name="check" size={18} stroke={2} /></div>;
  if (v === 'x') return <div className={cls}><Icon name="x" size={16} stroke={2} /></div>;
  return <div className={cls}><span className="gtg-pt-text">{v}</span></div>;
}

function PricingSection({ onContact }) {
  const rows = [
    { label: 'Experience- and Psychology-based advice', a: 'check', b: 'check', c: 'x' },
    { label: 'Tailored to your personality, wellbeing, and budget', a: 'check', b: 'check', c: 'Some' },
    { label: 'Accommodation, transportation, and flights advice', a: 'Some', b: 'check', c: 'x' },
    { label: 'Complete day-by-day itinerary and extensive research done for you', a: 'x', b: 'check', c: 'x' },
    { label: 'Restaurants, caf\u00e9s, bars recommendations tailored to your preferences', a: 'x', b: 'check', c: 'x' },
    { label: 'Solo-female safety vetting and support calls', a: 'Some', b: 'check', c: 'x' },
    { label: 'Access to solo female traveller certified businesses and benefits', a: 'Some', b: 'check', c: 'x' },
    { label: 'Free Destination Guide', a: 'x', b: 'check', c: 'x' },
    { label: 'One round of revision', a: 'x', b: 'check', c: 'x' },
    { label: 'Your time & effort', a: 'Some', b: 'Minimal', c: 'A lot' },
  ];
  return (
    <section className="gtg-pricing anchor" id="pricing">
      <div className="gtg-pricing-head reveal">
        <span className="gtg-eyebrow">Services & pricing</span>
        <h2 className="gtg-section-title">Planning together compared to planning on your own:</h2>
        <p className="gtg-pricing-sub">Whether you only need a little help or the entire trip planned out for you, here's the packages you can choose from:</p>
      </div>
      <div className="gtg-pricing-tablewrap reveal">
        <div className="gtg-pricing-table">
          <div className="gtg-pt-row gtg-pt-head">
            <div className="gtg-pt-cell gtg-pt-label"></div>
            <div className="gtg-pt-cell">
              <span className="gtg-pt-title gtg-pt-title--full">Solo Trip Direction Package<br/></span>
              <span className="gtg-pt-title gtg-pt-title--short">Solo call</span>
              <span className="gtg-pt-sub">60-min call</span>
            </div>
            <div className="gtg-pt-cell gtg-pt-featured">
              <span className="gtg-pt-flag">Most chosen</span>
              <span className="gtg-pt-title gtg-pt-title--full">Grounding to Go<br/>full package</span>
              <span className="gtg-pt-title gtg-pt-title--short">Full package</span>
              <span className="gtg-pt-sub"></span>
            </div>
            <div className="gtg-pt-cell">
              <span className="gtg-pt-title gtg-pt-title--full">On your own</span>
              <span className="gtg-pt-title gtg-pt-title--short">DIY</span>
              <span className="gtg-pt-sub">DIY</span>
            </div>
          </div>
          {rows.map((r, i) => (
            <div className={'gtg-pt-row' + (i === rows.length - 1 ? ' gtg-pt-row--last' : '')} key={r.label}>
              <div className="gtg-pt-cell gtg-pt-label">{r.label}</div>
              <PtCell v={r.a} />
              <PtCell v={r.b} featured />
              <PtCell v={r.c} />
            </div>
          ))}
        </div>
      </div>
      <div className="gtg-pricing-cards">
        <div className="gtg-pricing-card reveal">
          <span className="gtg-eyebrow">FOUNDING RATE</span>
          <h3>Grounding to Go Full Package</h3>
          <p className="gtg-pricing-body">A complete, custom-made plan for your trip including:</p>
          <ul className="gtg-pricing-list">
            <li>A 60-minute introduction call</li>
            <li>Daily plan of restaurants, caf&eacute;s, and bars to visit (breakfast, lunch, dinner)</li>
            <li>Complete plan of daily activities</li>
            <li>Access to GroundingtoGo solo female traveller certified businesses for added safety and benefits</li>
            <li>Accommodation and neighbourhood options matched to your budget and preference</li>
            <li>Advice on transportation and flights</li>
            <li>Safety vetting</li>
          </ul>
          <p className="gtg-pricing-and">and</p>
          <p className="gtg-pricing-body">A free comprehensive guide to your destination including:</p>
          <ul className="gtg-pricing-list">
            <li>Local culture and customs</li>
            <li>Appropriate conduct</li>
            <li>What to pack</li>
            <li>Souvenir guide</li>
            <li>Most beautiful photo spots</li>
          </ul>
          <p className="gtg-pricing-addon"><strong>Optional add-on:</strong> a private printable online diary with prompts to track your experience.</p>
          <p className="gtg-pricing-fine">The plan comes in an interactive online format and a printable PDF. Booking the flights and accommodation is not included.</p>
          <button className="gtg-pill gtg-pill--ghost-clay" onClick={() => onContact('Grounding to Go Full Package')}>Get your quote</button>
        </div>
        <div className="gtg-pricing-card gtg-pricing-card--featured reveal">
          <span className="gtg-eyebrow">Founding rate</span>
          <h3>Solo Trip Direction Package</h3>
          <p className="gtg-pricing-body">Not ready to commit just yet? Or you only need a bit of guidance? The Solo Trip Direction package includes:</p>
          <ul className="gtg-pricing-list">
            <li>A 60-minute direction call</li>
            <li>A written summary of the call</li>
            <li>A private printable online diary with prompts to help you decide on your next steps</li>
          </ul>
          <p className="gtg-pricing-fine"></p>
          <p className="gtg-pricing-highlight">If you do decide to book the GTG full package afterwards, your purchase amount will be deducted from your final price.</p>
          <button className="gtg-pill" onClick={() => onContact('Solo Trip Direction Package')}>Get your quote</button>
        </div>
      </div>
    </section>
  );
}

function QuizSection() {
  return (
    <section className="gtg-quizsec anchor" id="quiz">
      <div className="gtg-quiz-head reveal" style={{ maxWidth: 620, margin: '0 auto 36px' }}>
        <div className="gtg-quiz-kicker"><span className="gtg-dot" /><span className="gtg-eyebrow">Quiz</span></div>
        <h2 className="gtg-quiz-title">So where should you go?</h2>
        <p className="gtg-quiz-sub">There&rsquo;s no wrong answer and nothing to sign up for, take this quiz to find out what kind of solo trip matches your psychological wellbeing, personality, and needs the most.</p>
      </div>
      {window.Quiz ? React.createElement(window.Quiz, null) : null}
    </section>
  );
}

function AboutMe() {
  return (
    <section className="gtg-about anchor" id="about">
      <div className="gtg-about-inner">
        <div className="gtg-about-media reveal">
          <image-slot
            id="about-portrait"
            src="assets/about-portrait.webp"
            shape="rounded"
            radius="18"
            fit="cover"
            placeholder="Drop your portrait"
            style={{ display: 'block', width: '349px', height: '551px', aspectRatio: '326 / 461', boxShadow: 'var(--shadow-image)' }}
          ></image-slot>
        </div>
        <div className="gtg-about-copy reveal">
          <span className="gtg-eyebrow">About me</span>
          <h2 className="gtg-section-title">Hi, I&rsquo;m Laura.</h2>
          <p>I created Grounding<em>to</em>Go because I genuinely believe that a well-planned solo trip is one of the most powerful things a woman can do for herself. Taking time to focus entirely on you &mdash; your pace, your interests, your energy &mdash; in a new and inspiring environment has a way of shifting things that nothing else quite does. I&rsquo;ve experienced it myself, and I want more women to have access to it.</p>
          <p>To help you get there, I draw on my BA in Hospitality, my MSc in Psychology, and 10+ years of travelling independently around the world. That combination lets me tailor your trip to your personality, your current state of mind, and your personal goals.</p>
          <p>I personally can&rsquo;t wait to work with you, and bring some positive change into the way you see your world.</p>
          <p className="gtg-about-sign">&mdash; Laura</p>
        </div>
      </div>
    </section>
  );
}

function ContactSection() {
  const [form, setForm] = React.useState({ name: '', email: '', style: '', destination: '', when: '', message: '' });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [failed, setFailed] = React.useState('');

  React.useEffect(() => {
    try { const s = localStorage.getItem('gtg_style'); if (s) {
      const map = { coast: 'Coast', desert: 'Desert', forest: 'Forest', mountain: 'Mountains' };
      setForm((f) => ({ ...f, style: map[s] || '' }));
    } } catch (e) {}
  }, []);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'Tell us your name.';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = 'A valid email, so we can reach you.';
    if (!form.message.trim()) er.message = 'A line or two about what you need.';
    setErrs(er);
    if (Object.keys(er).length) return;
    setFailed(''); setBusy(true);
    const res = await sendEnquiry(form, 'Contact section');
    setBusy(false);
    if (res.ok) setSent(true); else setFailed(res.error);
  };

  return (
    <section className="gtg-contact anchor" id="contact">
      <div className="gtg-contact-grid">
        <aside className="gtg-contact-aside reveal">
          <span className="gtg-eyebrow">CONTACT</span>
          <h2>Take the first step here</h2>
          <p>Leave a quick message and I&rsquo;ll get back to you!</p>
          <div className="gtg-contact-list">
            <div className="gtg-contact-item">
              <span className="ic"><Icon name="mapPin" size={18} stroke={1.7} /></span>
              <div><div className="k">Email</div><a className="v" href="mailto:hello@groundingtogo.com">hello@groundingtogo.com</a></div>
            </div>
          </div>
        </aside>

        <div className="gtg-form reveal">
          {!sent ? (
            <form onSubmit={submit} noValidate>
              <div className="gtg-form-row">
                <div className="gtg-field">
                  <label htmlFor="c-name">Your name</label>
                  <input id="c-name" value={form.name} onChange={set('name')} className={errs.name ? 'err' : ''} />
                  {errs.name && <div className="errmsg">{errs.name}</div>}
                </div>
                <div className="gtg-field">
                  <label htmlFor="c-email">Email</label>
                  <input id="c-email" type="email" value={form.email} onChange={set('email')} className={errs.email ? 'err' : ''} />
                  {errs.email && <div className="errmsg">{errs.email}</div>}
                </div>
              </div>
              <div className="gtg-form-row">
                <div className="gtg-field">
                  <label htmlFor="c-destination">Planned destination</label>
                  <input id="c-destination" value={form.destination} onChange={set('destination')} placeholder="e.g. Lisbon" />
                </div>
                <div className="gtg-field">
                  <label htmlFor="c-when">When would you like to go?</label>
                  <input id="c-when" value={form.when} onChange={set('when')} placeholder="e.g. early autumn" />
                </div>
              </div>
              <div className="gtg-field">
                <label htmlFor="c-message">Anything else I should know?</label>
                <textarea id="c-message" value={form.message} onChange={set('message')} className={errs.message ? 'err' : ''} />
                {errs.message && <div className="errmsg">{errs.message}</div>}
              </div>
              {failed && <div className="gtg-form-error">{failed}</div>}
              <div className="gtg-form-foot">
                <p className="gtg-form-fine">No newsletter, no spam.</p>
                <button className="gtg-pill" type="submit" disabled={busy}>{busy ? 'Sending\u2026' : 'Send'} <Icon name="arrowRight" size={16} stroke={1.9} /></button>
              </div>
            </form>
          ) : (
            <div className="gtg-form-done">
              <div className="gtg-done-mark"><Icon name="check" size={26} stroke={2} /></div>
              <h3>Your note&rsquo;s with us, {form.name.split(' ')[0]}.</h3>
              <p>It has landed in my inbox and I&rsquo;ll reply within two days. Until then &mdash; go gently.</p>
              <button className="gtg-pill gtg-pill--block" style={{ maxWidth: 260, margin: '24px auto 0' }} onClick={() => { setSent(false); setFailed(''); setForm({ name: '', email: '', style: '', destination: '', when: '', message: '' }); }}>Send another</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* Floating "Take the Quiz" pill — fixed on screen so it's available no
   matter where you've scrolled to. It stays hidden while the hero (with its
   own "What kind of solo trip do you need?" button) is on screen, so the two
   never sit on top of each other, then fades in once the hero has scrolled
   out of view. */
function FloatingQuizButton() {
  const [visible, setVisible] = useState(false);
  React.useEffect(() => {
    const hero = document.getElementById('home-hero');
    if (!hero || !('IntersectionObserver' in window)) { setVisible(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => setVisible(!en.isIntersecting));
    }, { threshold: 0 });
    io.observe(hero);
    return () => io.disconnect();
  }, []);
  return (
    <a className={'gtg-pill gtg-floatquiz' + (visible ? ' is-visible' : '')} href="#quiz" aria-hidden={!visible} tabIndex={visible ? 0 : -1}>Take the Quiz</a>
  );
}

function HomeApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useState({ open: false, trip: null });
  const [contact, setContact] = useState({ open: false, topic: '' });
  const start = () => setModal({ open: true, trip: null });
  const openContact = (topic) => setContact({ open: true, topic: topic || '' });
  useReveal();

  // Land on the right section when arriving with a #hash from another page
  // (e.g. clicking "How it works" in the nav from the blog) — on first load
  // the browser tries to jump to it before React has rendered the page, so
  // the native scroll misses and we have to do it ourselves once mounted.
  React.useEffect(() => {
    const id = (location.hash || '').replace('#', '');
    if (!id) return;
    // The page transpiles its JSX in the browser on every load, so how long
    // the target section takes to exist in the DOM varies — poll briefly
    // instead of assuming a fixed delay is always enough.
    let tries = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' });
      } else if (tries++ < 40) {
        setTimeout(tryScroll, 100);
      }
    };
    setTimeout(tryScroll, 100);
  }, []);

  return (
    <>
      <GlobalNav active="home" onStart={start} onContact={openContact} />
      <HomeHero />
      <FloatingQuizButton />
      <WhoItsFor statementFontSize={t.statementFontSize} />
      <HowItWorks />
      <PricingSection onContact={openContact} />
      <QuizSection />
      <AboutMe />
      <ContactSection />
      <Footer onStart={start} />
      <ResetModal open={modal.open} trip={modal.trip} onClose={() => setModal({ open: false, trip: null })} />
      <ContactModal open={contact.open} topic={contact.topic} onClose={() => setContact({ open: false, topic: '' })} />
      <TweaksPanel>
        <TweakSection label="Who it's for" />
        <TweakSlider label="Statement font size" value={t.statementFontSize} min={14} max={40} unit="px" onChange={(v) => setTweak('statementFontSize', v)} />
      </TweaksPanel>
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp />);