/* global React */
const { useState, useEffect, useRef } = React;

/* ---------------------------------------------------------------- ornaments */
function Star({ size = 12, color = 'var(--accent-live)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <path d="M16 2 L17.5 14.5 L30 16 L17.5 17.5 L16 30 L14.5 17.5 L2 16 L14.5 14.5 Z" fill={color} />
    </svg>
  );
}

function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    const vh0 = window.innerHeight || document.documentElement.clientHeight;
    // arm only below-the-fold elements so above-fold content paints immediately
    els.forEach(e => { if (e.getBoundingClientRect().top > vh0 * 0.85) e.classList.add('armed'); });
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      els.forEach(e => {
        if (e.classList.contains('is-in') || !e.classList.contains('armed')) return;
        if (e.getBoundingClientRect().top < vh * 0.88) e.classList.add('is-in');
      });
    };
    reveal();
    window.addEventListener('scroll', reveal, { passive: true });
    window.addEventListener('resize', reveal);
    const failsafe = setTimeout(() => els.forEach(e => e.classList.add('is-in')), 2200);
    return () => {
      window.removeEventListener('scroll', reveal);
      window.removeEventListener('resize', reveal);
      clearTimeout(failsafe);
    };
  }, []);
}

/* ----------------------------------------------------------------- wordmark */
function Wordmark({ onDark = false }) {
  return (
    <span className="wordmark">
      <span className="b" style={onDark ? { color: 'var(--paper)' } : null}>Eliava</span>
      <span className="ops" style={{ color: 'var(--accent-live-ink)' }}>Travel&nbsp;Ops</span>
    </span>
  );
}

/* ---------------------------------------------------------------------- NAV */
function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#top" style={{ backgroundImage: 'none' }}><Wordmark /></a>
        <nav className="nav__links">
          <a className="navlink" href="#how">How it works</a>
          <a className="navlink" href="#resources">Resources</a>
          <a className="navlink" href="#consulting">Consulting</a>
          <a className="navlink" href="#about">About</a>
          <a className="btn btn--primary" style={{ padding: '11px 18px' }} href="#resources">Browse the shop →</a>
        </nav>
      </div>
    </header>
  );
}

/* --------------------------------------------------------------------- HERO */
function Hero({ headline, headlineMark }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero__grid">
          <div className="reveal">
            <div className="hero__eyebrow eyebrow eyebrow-gold">
              <span>Building AI operations for travel agencies</span>
              <Star size={11} />
              <span style={{ color: 'var(--sand)' }}>5,000+ real workflows</span>
            </div>
            <h1>
              {headline}{' '}
              <span className="mark">{headlineMark}</span>
            </h1>
            <p className="lead">
              I spent five years as a virtual assistant inside luxury travel practices — building the
              perfect itineraries, researching and writing the proposals, chasing commission, wiring up
              the automations. Now I package that back-office system into guides, templates, and
              playbooks you can put to work this week.
            </p>
            <div className="hero__cta">
              <a className="btn btn--primary" href="#resources">Browse the resources →</a>
              <a className="btn btn--ghost" href="#how">How it works</a>
            </div>
          </div>
          <div className="hero__portrait reveal">
            <image-slot id="hero-portrait" shape="rounded" radius="6" placeholder="Drop your headshot" src="assets/founder-hero.webp"></image-slot>
            <p className="hero__note">
              <b>Kady Dennis</b>, Founder — a luxury-travel operator, not an agent.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------- STATS */
function Stats() {
  const stats = [
    { n: <><em>5,000+</em></>, label: 'Real tasks / workflows mapped', body: 'Across five years inside luxury travel practices. The basis for every template here.' },
    { n: <>5 <span style={{ fontSize: 28 }}>yrs</span></>, label: 'In luxury travel ops (and 10+ in business operations)', body: 'As a travel coordinator/VA and operations expert building, chasing, and automating the back office.' },
    { n: <><em>20+</em> <span style={{ fontSize: 28 }}>hrs</span></>, label: 'Given back each month', body: 'The real average hours calculated that an advisor stops spending on ops that never needed them when working with Eliava.' },
  ];
  return (
    <section className="stats">
      <div className="wrap">
        <div className="stats__row">
          {stats.map((s, i) => (
            <div className="stat reveal" key={i} style={{ transitionDelay: (i * 80) + 'ms' }}>
              <div className="stat__n">{s.n}</div>
              <div className="stat__label">{s.label}</div>
              <p className="stat__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --------------------------------------------------------- chapter header */
function Chapter({ no, eyebrow, title, lead }) {
  return (
    <div className="chapter">
      <div className="chapter__body reveal">
        <hr className="rule-gold" />
        <div className="eyebrow eyebrow-gold">№ {no} · {eyebrow}</div>
        <h2>{title}</h2>
        <p className="lead">{lead}</p>
      </div>
      <div className="numeral-big" aria-hidden="true">№&thinsp;{no}</div>
    </div>
  );
}

/* ------------------------------------------------------------------ PROCESS */
function Process() {
  const steps = [
    { n: 'STEP 01', t: 'Start with a guide.', b: 'Free. Learn the right way to build the work before you automate it. The thinking first, the tool second.',
      paths: [
        { label: 'Read the free guides', b: 'Build an itinerary the right way and automate without the overwhelm. No fluff, no upsell to read them.', href: '#resources', cta: 'Browse guides' },
        { label: 'Build the operating layer', b: 'Stand a real project-management system around your practice so the work stops living in your head.', href: '#resources', cta: 'See the guides' },
      ] },
    { n: 'STEP 02', t: 'Drop in the templates.', b: 'The files your business needed yesterday. Outreach, proposals, and follow-up, written for you and ready to use.',
      paths: [
        { label: 'Outreach & proposals', b: 'Hotel, concierge, and supplier scripts, plus a proposal template built to win the booking.', href: '#resources', cta: 'Browse templates' },
        { label: 'Chase every commission', b: 'A follow-up tracker and cadence that catches every dollar owed between booking and payout.', href: '#resources', cta: 'See the templates' },
      ] },
    { n: 'STEP 03', t: 'Wire up the automation.', b: 'Tern, Travefy, Travel Joy, each set up once, exactly as written, so the busywork runs without you.',
      paths: [
        { label: 'On your own', b: 'Follow the playbook and stand each platform up exactly as written, at your own pace.', href: '#resources', cta: 'Browse playbooks' },
        { label: 'With guided assistance', b: 'Or build it with me, so you keep the hands-on knowledge and full documentation of how every workflow is customized to your business.', href: '#consulting', cta: 'Work with me' },
      ] },
  ];
  return (
    <section className="section section--linen" id="how">
      <div className="wrap">
        <Chapter
          no="01"
          eyebrow="The method"
          title="Build the system once. Stop rebuilding it every trip."
          lead="Most advisors don't have a process problem. They have a process that lives in their head. Here's how the pieces come together, in the order that actually works."
        />
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step reveal" key={i} style={{ transitionDelay: (i * 80) + 'ms' }}>
              <div className="step__head">
                <div className="step__n">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
              {s.paths.map((p, j) => (
                <div className="step__path" key={j}>
                  <span className="step__path-label">{p.label}</span>
                  <p>{p.b}</p>
                  {p.href && <a className="btn--link" href={p.href}>{p.cta}</a>}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------- RESOURCE PORTAL */
const RESOURCES = [
  { cat: 'guides', type: 'Free guide', price: 'Free', tag: 'Guide', title: 'Build an itinerary the right way', body: 'The structure, sequence, and detail that separates a polished itinerary from a glorified list. Steal the framework.' },
  { cat: 'guides', type: 'Free guide', price: 'Free', tag: 'Guide', title: 'Automate without the overwhelm', body: 'Where to start, what to leave manual, and the three workflows worth automating first. A calm map, not a tech stack.' },
  { cat: 'guides', type: 'Playbook', price: '$39', tag: 'Operations', title: 'Project management for your agency', body: 'Stand up Asana, ClickUp, or Notion around how a travel practice actually runs — so tasks stop living in your inbox.' },
  { cat: 'templates', type: 'Template kit', price: '$49', tag: 'Outreach', title: 'The outreach template kit', body: 'Hotel contacts, concierge intros, supplier requests, and commission follow-ups. Every email your business sends, written for you.' },
  { cat: 'templates', type: 'Template', price: '$39', tag: 'Proposals', title: 'Build a proposal that wins the booking', body: 'A proposal template and the logic behind it — what to lead with, what to cut, and how to make the price feel inevitable.' },
  { cat: 'templates', type: 'Template', price: '$29', tag: 'Commission', title: 'Commission follow-up tracker', body: 'The spreadsheet and cadence that catches every dollar owed — so nothing slips between booking and payout.' },
  { cat: 'automations', type: 'Playbook', price: '$29', tag: 'Tern', title: 'Tern automation playbook', body: 'Set up Tern once, the right way. The exact triggers, fields, and handoffs that make it run quietly in the background.' },
  { cat: 'automations', type: 'Playbook', price: '$29', tag: 'Travefy', title: 'Travefy automation playbook', body: 'Itineraries, forms, and client touchpoints on autopilot. A step-by-step build you copy, not interpret.' },
  { cat: 'automations', type: 'Playbook', price: '$29', tag: 'Travel Joy', title: 'Travel Joy automation playbook', body: 'Payments, reminders, and trip flows wired up individually — so the platform works for you instead of the reverse.' },
];

const FILTERS = [
  { id: 'all', label: 'Everything' },
  { id: 'guides', label: 'Free guides' },
  { id: 'templates', label: 'Templates' },
  { id: 'automations', label: 'Automation playbooks' },
  { id: 'course', label: 'Courses' },
  { id: 'consulting', label: 'Consulting' },
];

function ResourceCard({ r }) {
  return (
    <article className="rcard reveal">
      <div className="rcard__top">
        <span className="rcard__type">{r.type}</span>
        <span className={'rcard__price' + (r.price === 'Free' ? ' free' : '')}>{r.price}</span>
      </div>
      <h3>{r.title}</h3>
      <p>{r.body}</p>
      <div className="rcard__foot">
        <span className="rcard__cat">{r.tag}</span>
        <span className="rcard__go">{r.price === 'Free' ? 'Get it' : 'View'} <span className="arrow">→</span></span>
      </div>
    </article>
  );
}

function CourseFeature() {
  return (
    <article className="rcard rcard--feature reveal">
      <div className="rcard__half">
        <span className="rcard__type">Course · Self-paced</span>
        <h3>Commission Chasing for Virtual Assistants</h3>
        <p>
          The full system for the most ignored money in travel. How to track what's owed, when to
          follow up, the exact scripts that get suppliers to pay, and how to run it as a service your
          advisors will never want to lose.
        </p>
      </div>
      <div className="rcard__half" style={{ flex: '0 0 auto', textAlign: 'right' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600, lineHeight: 1, marginBottom: 'var(--s-2)' }}>$249</div>
        <div className="micro" style={{ color: 'rgba(250,248,245,0.6)', marginBottom: 'var(--s-5)' }}>Lifetime access · updates included</div>
        <a className="btn btn--primary" href="#" style={{ backgroundImage: 'none' }}>Enroll now →</a>
      </div>
    </article>
  );
}

function BundleFeature() {
  const includes = ['Every guide & playbook', 'All template kits', 'Commission course', 'Lifetime updates'];
  return (
    <article className="bundle reveal">
      <div className="bundle__main">
        <div className="eyebrow bundle__eyebrow">Course · The complete program</div>
        <h3>Virtual Assistant <span className="arrow">→</span> Travel Assistant Expert</h3>
        <p>
          The complete path, in order. Every guide, template, and automation playbook — plus the
          commission course — built into one program that takes you from new VA to the operator
          advisors won't let go of.
        </p>
        <div className="bundle__includes">
          {includes.map((x, i) => <span className="bundle__chip" key={i}><span className="s">✦</span> {x}</span>)}
        </div>
      </div>
      <div className="bundle__buy">
        <div className="bundle__price">$775</div>
        <div className="bundle__note">One-time · lifetime access</div>
        <a className="btn btn--primary" href="#" style={{ backgroundImage: 'none', width: '100%', justifyContent: 'center' }}>Start the program →</a>
        <div className="bundle__sub">Everything in the shop, sequenced into a curriculum.</div>
      </div>
    </article>
  );
}

function ConsultingPromo() {
  return (
    <a className="shop-consult reveal" href="#consulting">
      <div>
        <span className="shop-consult__tag">Consulting · Done-with-you</span>
        <h3>Build it with me, one-to-one.</h3>
        <p>Custom automation builds, back-office consulting, and VA enablement, implemented alongside you, with full documentation of how every workflow is customized to your business.</p>
      </div>
      <div className="shop-consult__side">
        <div className="shop-consult__rate">$75<span>/hr</span></div>
        <div className="shop-consult__terms">3-month min · ~20 hrs/mo</div>
        <span className="btn btn--ghost shop-consult__cta">See consulting →</span>
      </div>
    </a>
  );
}

function Portal() {
  const [filter, setFilter] = useState('all');
  const isAll = filter === 'all';
  const showGrid = isAll || filter === 'guides' || filter === 'templates' || filter === 'automations';
  const showCourses = isAll || filter === 'course';
  const showConsult = isAll || filter === 'consulting';
  const cards = RESOURCES.filter(r => isAll || r.cat === filter);
  return (
    <section className="section" id="resources">
      <div className="wrap">
        <Chapter
          no="02"
          eyebrow="The shop"
          title="Guides, templates, and playbooks — file by file."
          lead="Start free. Buy what you need when you need it. No subscription, no sales call. The same system I built inside real luxury practices, packaged so you can use it today."
        />
        <div className="portal__filters reveal">
          {FILTERS.map(f => (
            <button
              key={f.id}
              className={'filter' + (filter === f.id ? ' is-active' : '')}
              onClick={() => setFilter(f.id)}
            >{f.label}</button>
          ))}
        </div>
        {showGrid && (
          <div className="cards">
            {cards.map((r) => <ResourceCard r={r} key={r.title} />)}
          </div>
        )}
        {showCourses && (
          <div className="shop-features">
            <BundleFeature />
            <CourseFeature />
          </div>
        )}
        {showConsult && <ConsultingPromo />}
      </div>
    </section>
  );
}

/* --------------------------------------------------------------- CONSULTING */
function Consulting() {
  const CAL = 'https://cal.com/kady-dennis/discovery-call';
  const includes = [
    { t: 'Custom automation builds', b: 'Tern, Travefy, Travel Joy — and the connective tissue between them, wired to how you actually work.' },
    { t: 'Back-office consulting', b: 'We find what\u2019s quietly eating your hours and rebuild the workflow around it, not the other way around.' },
    { t: 'Working with your VA', b: 'Train and systematize your assistant so the process runs without you hovering over it.' },
    { t: 'Implementation, not just advice', b: 'I build it alongside you, then tune it over the weeks until it sticks.' },
  ];
  return (
    <section className="section section--linen" id="consulting">
      <div className="wrap">
        <Chapter
          no="03"
          eyebrow="Work with me"
          title="Or build it with me, one-to-one."
          lead="When the templates aren't enough, I'll come in directly — implement the automations, fix the bottlenecks, and get your operation running the way it should."
        />
        <div className="consult__grid">
          <ul className="consult__list">
            {includes.map((it, i) => (
              <li className="reveal" key={i} style={{ transitionDelay: (i * 70) + 'ms' }}>
                <span className="consult__check" aria-hidden="true">✓</span>
                <div>
                  <h4>{it.t}</h4>
                  <p>{it.b}</p>
                </div>
              </li>
            ))}
          </ul>
          <aside className="consult__card reveal">
            <div className="eyebrow eyebrow-gold">The engagement</div>
            <div className="consult__rate"><span className="amt">$75</span><span className="per">/ hour</span></div>
            <ul className="consult__terms">
              <li><span className="k">Commitment</span><span className="v">3-month minimum</span></li>
              <li><span className="k">Cadence</span><span className="v">~20 hours / month</span></li>
              <li><span className="k">Covers</span><span className="v">Discovery → build → tweaking</span></li>
            </ul>
            <a className="btn btn--primary" href={CAL} target="_blank" rel="noopener" style={{ backgroundImage: 'none', width: '100%', justifyContent: 'center', marginTop: 'var(--s-5)' }}>Book a discovery call →</a>
            <p className="consult__fine">A short call to scope the work and see if we're a fit. No charge.</p>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------- TESTIMONIALS */
function Testimonials() {
  const quotes = [
    { q: 'I stopped rebuilding the same proposal from scratch every single week. The template paid for itself on the first client — and it actually reads like my voice.', a: 'Independent luxury advisor · Texas' },
    { q: 'The Travefy playbook saved my assistant a full day a month. Set it up once, exactly as written, and it just runs. That\u2019s the whole pitch and it\u2019s true.', a: 'Host agency owner · Florida' },
  ];
  return (
    <section className="section section--ink">
      <div className="wrap">
        <div className="reveal">
          <hr className="rule-gold" />
          <div className="eyebrow" style={{ color: 'var(--accent-live)' }}>№ 04 · In their words</div>
        </div>
        <div className="quotes">
          {quotes.map((c, i) => (
            <blockquote className="quote reveal" key={i} style={{ transitionDelay: (i * 90) + 'ms', margin: 0 }}>
              <Star size={16} />
              <p>{c.q}</p>
              <div className="attr">{c.a}</div>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------- ABOUT */
function About() {
  return (
    <section className="section section--linen" id="about">
      <div className="wrap">
        <div className="about__grid">
          <div className="about__portrait reveal">
            <image-slot id="about-portrait" shape="rounded" radius="6" placeholder="Drop a photo of Kady" src="assets/founder-about.webp"></image-slot>
          </div>
          <div className="about__body reveal">
            <hr className="rule-gold" />
            <div className="eyebrow eyebrow-gold">№ 05 · Who's behind it</div>
            <h2>Five years in the back office of luxury travel.</h2>
            <p>
              I'm Kady — founder of Eliava Travel Ops. For five years I worked as a virtual assistant
              inside independent luxury travel practices: building itineraries, writing proposals,
              chasing commission, and quietly automating the parts that ate everyone's evenings.
            </p>
            <p>
              I'm not a travel agent and I'm not a tech company. I'm the operator who has actually done
              the work — and now I hand you the system, one guide, template, and playbook at a time.
            </p>
            <div className="about__sig">
              Kady Dennis
              <small>Founder, Eliava Travel Ops · Greater Atlanta Area, Georgia</small>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------- CTA band */
function CtaBand() {
  return (
    <section className="section">
      <div className="wrap cta reveal">
        <hr className="rule-gold" style={{ margin: '0 auto var(--s-5)' }} />
        <div className="eyebrow eyebrow-gold" style={{ textAlign: 'center' }}>№ 06 · Start free</div>
        <h2>Get the free guides. Keep the evenings.</h2>
        <p className="lead">Two free guides in your inbox, plus a note whenever a new template or playbook lands. No spam, no funnel — just the work.</p>
        <form className="signup" onSubmit={(e) => e.preventDefault()}>
          <input className="input" type="email" placeholder="you@youragency.com" aria-label="Email address" />
          <button className="btn btn--primary" type="submit" style={{ backgroundImage: 'none' }}>Send the guides →</button>
        </form>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------- FOOTER */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div>
            <Wordmark onDark={true} />
            <p className="footer__tag">The luxury travel back-office — packaged file by file, so you can build the system once and stop rebuilding it every trip.</p>
          </div>
          <div className="footer__col">
            <h4>Resources</h4>
            <ul>
              <li><a href="#resources">Free guides</a></li>
              <li><a href="#resources">Templates</a></li>
              <li><a href="#resources">Automation playbooks</a></li>
              <li><a href="#resources">The course</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Eliava</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="mailto:hello@eliavatravel.com">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__base">
          <span>© 2026 Eliava Travel Ops. All rights reserved.</span>
          <span><Star size={10} /> &nbsp; № est. 2026 · Greater Atlanta Area, Georgia</span>
        </div>
      </div>
    </footer>
  );
}

window.EliavaParts = { Nav, Hero, Stats, Process, Portal, Consulting, Testimonials, About, CtaBand, Footer, useReveal };