/* global React */
const { useState, useEffect, useRef } = React;
const ADBASE = (typeof window !== "undefined" && window.AD_LANDING_BASE) || "";

/* =========================================================
   Header
   ========================================================= */
function Header({ onCall }) {
  return (
    <header className="ctt-header" data-screen-label="Header">
      <div className="ctt-header__inner">
        <a href="#top" className="ctt-header__logo" aria-label="Camp Tall Timbers home">
          <img src={ADBASE+"assets/logos/CTT_Tagline_WBack.png"} alt="Camp Tall Timbers" />
        </a>
        <button className="ctt-btn ctt-header__cta" onClick={onCall}>
          <i data-lucide="phone"></i> Talk to Glenn
        </button>
      </div>
    </header>);

}

/* =========================================================
   Hero
   ========================================================= */
const HEADLINE_VARIANTS = {
  default: { main: "The Summer They'll Be Talking About", accent: "for Years.", split: false },
  punchy: { main: "Where Real Summers", accent: "Still Happen.", split: true },
  warm: { main: "Tall Trees. Big Adventures.", accent: "Their Best Summer Yet.", split: true }
};

function Hero({ onCall, onForm, t }) {
  const variant = HEADLINE_VARIANTS[t.headline] || HEADLINE_VARIANTS.default;
  const videoUrl = "https://camptalltimbers.com/wp-content/uploads/2026/05/Camp-Tall-Timbers-a-quick-look.mp4";

  if (t.heroStyle === "split") {
    return (
      <section className="ctt-hero ctt-hero--split" data-screen-label="Hero">
        <div className="ctt-hero__content">
          <div>
            <div className="ctt-hero__meta">
              <span className="dot"></span>
              Summer 2026 Enrollment Open
            </div>
            <h1>
              {variant.main}{" "}
              <span className="accent-white">{variant.accent}</span>
            </h1>
            <p className="ctt-hero__sub">
              An award-winning overnight youth camp in the Blue Ridge Mountains. Real activities,
              real friendships, no phones.
            </p>
            <div className="ctt-hero__ctas">
              <button className="ctt-btn ctt-btn--lg" onClick={onCall}>
                <i data-lucide="calendar"></i> Schedule a Call with the Camp Director
              </button>
              <button className="ctt-btn ctt-btn--ghost ctt-btn--lg" onClick={onForm}>
                Send Us a Quick Message
              </button>
            </div>
            <div className="ctt-hero__chips">
              <span className="ctt-hero__chip">2&ndash;7 Weeks</span>
              <span className="ctt-hero__chip">Blue Ridge Mountains, WV</span>
              <span className="ctt-hero__chip">Ages 7&ndash;16</span>
            </div>
          </div>
          <div className="ctt-hero__media">
            {t.heroBackground === "image" ?
            <img src={ADBASE+"assets/photos/out-doors.jpg"} alt="Camp Tall Timbers" /> :

            <video src={videoUrl} autoPlay muted loop playsInline poster={ADBASE+"assets/photos/out-doors.jpg"} />
            }
          </div>
        </div>
      </section>);

  }

  return (
    <section className="ctt-hero" data-screen-label="Hero">
      {t.heroStyle === "image" ?
      <img className="ctt-hero__bg" src={ADBASE+"assets/photos/camp-wide-shot.jpg"} alt="" /> :

      <video
        className="ctt-hero__video"
        src={videoUrl}
        autoPlay
        muted
        loop
        playsInline
        poster={ADBASE+"assets/photos/out-doors.jpg"} />

      }
      <div className="ctt-hero__overlay ctt-hero__overlay--strong"></div>

      <div className="ctt-hero__badge" style={{ opacity: "0" }}>
        Tall Trees<br />Since 1970
        <span className="since">50+ years of summers</span>
      </div>

      <div className="ctt-hero__content">
        <div className="ctt-hero__meta">
          <span className="dot"></span>
          Summer 2026 Enrollment Open
        </div>
        <h1>
          {variant.split ?
          <>
              {variant.main}<br />
              <span className="accent-white">{variant.accent}</span>
            </> :

          <>
              {variant.main} <span className="accent-white">{variant.accent}</span>
            </>
          }
        </h1>
        <p className="ctt-hero__sub" style={{ fontFamily: "Oswald", width: "500px" }}>
          2&ndash;7 weeks &nbsp;|&nbsp; Blue Ridge Mountains, West Virginia &nbsp;|&nbsp; Ages 7&ndash;16
        </p>
        <div className="ctt-hero__ctas">
          <button className="ctt-btn ctt-btn--lg" onClick={onCall}>
            <i data-lucide="calendar"></i> Schedule a Call with the Camp Director
          </button>
          <button className="ctt-btn ctt-btn--ghost ctt-btn--lg" onClick={onForm}>
            Send Us a Quick Message
          </button>
        </div>
      </div>
    </section>);

}

/* =========================================================
   Awards strip (toggleable)
   ========================================================= */
function AwardsStrip() {
  return (
    <div className="ctt-awards-strip">
      <div className="ctt-awards-strip__inner">
        <div className="ctt-awards-strip__label">Trusted &amp; Awarded</div>
        <div className="ctt-awards-strip__items">
          <AwardBadge icon="🏆" titleStrong="Best of Bethesda" sub="Readers' Pick — Multi-year Winner" />
          <AwardBadge icon="★" titleStrong="Washington Families" sub="Best for Families — Overnight Camp" />
          <AwardBadge icon="✓" titleStrong="ACA Accredited" sub="300+ standards met" />
          <AwardBadge icon="50" titleStrong="Top 50 in the U.S." sub="Early Childhood Education Zone" />
        </div>
      </div>
    </div>);

}
function AwardBadge({ icon, titleStrong, sub }) {
  return (
    <div className="ctt-award-badge">
      <div className="ctt-award-badge__icon">{icon}</div>
      <div className="ctt-award-badge__text">
        <strong>{titleStrong}</strong>
        {sub}
      </div>
    </div>);

}

/* =========================================================
   Intro
   ========================================================= */
function Intro({ onCall, onForm }) {
  return (
    <section className="ctt-section ctt-section--cream ctt-intro" id="about">
      <img className="ctt-intro__treeline" src={ADBASE+"assets/decor/tree-background-1.png"} alt="" />
      <img className="ctt-trees-corner ctt-trees-corner--left" src={ADBASE+"assets/decor/vector-tree-group-left.webp"} alt="" />
      <img className="ctt-trees-corner ctt-trees-corner--right" src={ADBASE+"assets/decor/vector-tree-group-right.webp"} alt="" />
      <div className="container container--narrow">
        <p className="ctt-intro__lead">
          Camp Tall Timbers, is an <strong>award-winning overnight youth camp</strong> that's
          been serving up fun and rewarding camp experiences every summer for over 50 years.
        </p>
        <div className="ctt-intro__copy">
          <p>
            Our summer camp for children ages 7 to 16 offers a wide variety of entertaining,
            engaging, and inspiring activities for boys and girls of all backgrounds. The camp
            experience promotes independence, decision-making, socialization, skill-building,
            confidence, creativity, and exploring nature in a safe and nurturing environment.
            Campers are encouraged to be themselves, try something new, unplug, and have fun!
          </p>
          <p>
            Located in the beautiful foothills of the Blue Ridge Mountains, Camp Tall Timbers
            is far enough away to feel like a real adventure, but close enough for campers
            from Maryland, Virginia, Pennsylvania, and the DC area to make the drive every
            summer.
          </p>
        </div>

        <blockquote className="ctt-intro__quote" style={{ fontFamily: "Oswald" }}>
          "The best gift my parents gave my sister and me was the gift of camp. As a former
          camper, Camp Tall Timbers has given me lifetime friendships, self-confidence, and
          the ability to try new things. Today, as the mother of two campers, I love that
          they're able to try new things in a safe environment: knowing they're experiencing
          what I did at their age."
          <cite>— Cindy, former camper and current camper parent</cite>
        </blockquote>

        <div className="ctt-hero__ctas" style={{ marginTop: 40 }}>
          <button className="ctt-btn ctt-btn--lg" onClick={onCall}>
            <i data-lucide="calendar"></i> Schedule a Call with the Camp Director
          </button>
          <button className="ctt-btn ctt-btn--link" onClick={onForm}>
            Send Us a Quick Message →
          </button>
        </div>
      </div>
    </section>);

}

/* =========================================================
   Standing Tall
   ========================================================= */
const ACTIVITY_CATS = [
  {
    name: "Sports",
    href: "https://camptalltimbers.com/sports/",
    photo: ADBASE + "assets/photos/sports.jpg",
    items: ["Archery","Baseball","Basketball","Dodgeball","Field Hockey","Floor Hockey","Football","Frisbee Golf","GaGa","Golf","Kickball","Lacrosse","Newcomb","Parachute Games","Pickleball","Soccer","Softball","Tennis","Volleyball","Ultimate Frisbee"]
  },
  {
    name: "Aquatics",
    href: "https://camptalltimbers.com/aquatics/",
    photo: ADBASE + "assets/photos/lake-front-full.jpg",
    items: ["Canoeing","Kayaking","Swimming — Instructional & Free Time","Paddle Boating","SUP (Stand Up Paddle Boarding)","Tubing","Water Polo","Water Volleyball"]
  },
  {
    name: "Equestrian",
    href: "https://camptalltimbers.com/activities/equestrian/",
    photo: ADBASE + "assets/photos/equestrian.jpg",
    items: ["Horseback Riding","Caring for Horses","Feeding Horses","Trail Riding","In-Ring Instruction","Barrel Competition"]
  },
  {
    name: "Great Outdoors",
    href: "https://camptalltimbers.com/great-outdoors/",
    photo: ADBASE + "assets/photos/out-doors.jpg",
    items: ["Archery","Fishing","Hiking","Mountain Biking","Mountain Boarding","Nature","Riflery"]
  },
  {
    name: "Challenge",
    href: "https://camptalltimbers.com/activities/challenge/",
    photo: ADBASE + "assets/photos/rope-climb.jpg",
    items: ["Adventure Park","Climbing","High Ropes","Zipline","Low Ropes","Team Building"]
  },
  {
    name: "Arts",
    href: "https://camptalltimbers.com/arts/",
    photo: ADBASE + "assets/photos/art.jpg",
    items: ["Beadwork","Cartooning","Ceramics","Cheerleading","Crafts","Dance","Drama","Improv","Jewelry Design","Lanyards","Macrame","Music","Rocketry","Talent Night","T-Shirt Design & Tie Dying"]
  }
];

function StandingTall({ t, onCall, onForm }) {
  return (
    <section className="ctt-section ctt-section--white ctt-standing-tall" id="program">
      <div className="ctt-banner">
        <img className="ctt-banner__img" src={ADBASE+"assets/photos/cabin-hero-cropped.jpg"} alt="Camp Tall Timbers lakefront cabin" />
        <div className="ctt-banner__overlay"></div>
        <h2 className="ctt-banner__title">
          Standing Tall Over <span className="accent">Other Sleepaway Camps.</span>
        </h2>
      </div>

      <div className="container container--wide">
        <div className="ctt-feature-block">
          <h3>
            Five Activity Periods.<br />
            Zero Boredom.<br />
            <span className="accent">Total Ownership.</span>
          </h3>
          <p>
            Every camper picks their own schedule each day from a wide range of program
            categories. That means your child gets to lean into what excites them and try new
            things they never expected to love.
          </p>
          <p>
            Tuition covers everything: Chef-prepared meals, all activities, and all evening
            programs are included. No surprise add-ons.
          </p>
          <div className="ctt-pill-row" style={{ marginTop: 28, justifyContent: "center" }}>
            <span className="ctt-pill">All-Inclusive</span>
            <span className="ctt-pill">Chef-Prepared Meals</span>
            <span className="ctt-pill">No Phones</span>
          </div>
        </div>

        <div className="ctt-section-head--centered">
          <h3>
            What's Available <span className="accent">Each Day</span>
          </h3>
        </div>

        <ul className="ctt-activity-list">
          <li>Horseback riding: every session, no extra charge</li>
          <li>Swimming, archery, zipline, and challenge courses</li>
          <li>Arts, music, drama, and creative expression</li>
          <li>Sports and team activities</li>
          <li>Outdoor adventure and nature exploration</li>
          <li>Evening programs: something different every night</li>
        </ul>

        {t.showCollage &&
          <div className="ctt-collage">
            {ACTIVITY_CATS.map((cat) =>
              <a key={cat.name} className="ctt-collage__tile" href={cat.href} target="_blank" rel="noopener noreferrer">
                <div className="ctt-collage__media">
                  <img src={cat.photo} alt={cat.name} />
                  <div className="ctt-collage__cap">{cat.name}</div>
                </div>
                <div className="ctt-collage__menu" aria-hidden="true">
                  <ul className="ctt-collage__list">
                    {cat.items.map((item) => <li key={item}>{item}</li>)}
                  </ul>
                </div>
              </a>
            )}
          </div>
        }

        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 60, justifyContent: "center" }}>
          <button className="ctt-btn ctt-btn--lg" onClick={onCall}>
            <i data-lucide="calendar"></i> Schedule a Call with the Camp Director
          </button>
          <button className="ctt-btn ctt-btn--dark ctt-btn--lg" onClick={onForm}>
            <i data-lucide="message-square"></i> Send Us a Quick Message
          </button>
        </div>
      </div>
    </section>);

}

/* =========================================================
   50 Years section (wood texture, awards lockup, benefits, marquee)
   ========================================================= */
function FiftyYears({ t }) {
  return (
    <section className="ctt-section ctt-section--wood" id="trust">
      <div className="ctt-trust-bg" aria-hidden="true"></div>
      <div className="container container--wide">
        <div className="ctt-section-head">
          <div style={{ display: "inline-flex", marginBottom: 30 }}>
            <span className="ctt-sign">50 Years of<br />Summer Camps.</span>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.6, maxWidth: "60ch", margin: "30px auto 0", color: "rgba(255,255,255,0.9)" }}>
            Some camps are new. Some are franchises. Some are still figuring out what they
            are. <strong>Camp Tall Timbers has been doing this since the 1970s</strong>, and has a
            track record of accreditation and awards to back it up. The continuity, of
            leadership, culture, and values, is what makes this camp different from programs
            that come and go.
          </p>
        </div>

        <h3 style={{ textAlign: "center", fontFamily: "var(--font-heading)", color: "var(--primary-accent)", fontSize: 14, letterSpacing: "0.18em", marginTop: 40, marginBottom: 0 }}>
          Accredited and Award-Winning
        </h3>

        <div className="ctt-awards-lockup">
          <div className="ctt-award-card">
            <h4 className="ctt-award-card__title">Best of Bethesda</h4>
            <p className="ctt-award-card__sub">Readers' Pick: Best Overnight Summer Camp, multiple years</p>
          </div>
          <div className="ctt-award-card">
            <h4 className="ctt-award-card__title">Washington Families</h4>
            <p className="ctt-award-card__sub">"Best for Families" Winner: Overnight Summer Camp</p>
          </div>
          <div className="ctt-award-card">
            <h4 className="ctt-award-card__title">ACA Accredited</h4>
            <p className="ctt-award-card__sub">American Camp Association: 300+ standards: staff, safety, health, programming</p>
          </div>
          <div className="ctt-award-card">
            <h4 className="ctt-award-card__title">Top 50 in the U.S.</h4>
            <p className="ctt-award-card__sub">Early Childhood Education Zone + Top Education Degrees</p>
          </div>
        </div>

        <div style={{ marginTop: 80 }}>
          <h3 style={{ textAlign: "center", color: "var(--white)", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(32px, 4vw, 48px)", textTransform: "capitalize", letterSpacing: 0, lineHeight: 1.1 }}>
            What Your Child <span style={{ color: "var(--primary-accent)" }}>Gains Beyond Activities</span>
          </h3>

          {t.benefitsStyle === "numbered" &&
          <div className="ctt-benefits ctt-benefits--numbered">
              <BenefitNum num="01" title="A Real Break From Phones" body="A no-phones environment, giving a real break from screens, social media pressure, and constant connectivity." />
              <BenefitNum num="02" title="Independence" body="Developing independence by making their own decisions and living in a collaborative environment." />
              <BenefitNum num="03" title="Genuine Friendships" body="Deep, genuine friendships formed when kids are fully present with each other." />
              <BenefitNum num="04" title="Lasting Confidence" body="Confidence that follows them home and into the school year." />
              <BenefitNum num="05" title="Time Away From Home" body="The experience of being away from home and discovering they can do it." />
              <BenefitNum num="06" title="Space to Try & Fail" body="Space to try things, fail, try again: without expectations." />
            </div>
          }
          {t.benefitsStyle === "list" &&
          <ul className="ctt-benefits-list">
              <li><strong>A real break from phones</strong> — A no-phones environment, giving a real break from screens, social media pressure, and constant connectivity.</li>
              <li><strong>Independence</strong> — Developing independence by making their own decisions and living in a collaborative environment.</li>
              <li><strong>Genuine friendships</strong> — Deep, genuine friendships formed when kids are fully present with each other.</li>
              <li><strong>Lasting confidence</strong> — Confidence that follows them home and into the school year.</li>
              <li><strong>Time away from home</strong> — The experience of being away from home and discovering they can do it.</li>
              <li><strong>Space to try and fail</strong> — Space to try things, fail, try again: without expectations.</li>
            </ul>
          }
          {(t.benefitsStyle === "icons" || !t.benefitsStyle) &&
          <div className="ctt-benefits">
              <Benefit icon="phone-off" title="A Real Break From Phones" body="A no-phones environment, giving a real break from screens, social media pressure, and constant connectivity." />
              <Benefit icon="compass" title="Independence" body="Developing independence by making their own decisions and living in a collaborative environment." />
              <Benefit icon="users" title="Genuine Friendships" body="Deep, genuine friendships formed when kids are fully present with each other." />
              <Benefit icon="sparkles" title="Lasting Confidence" body="Confidence that follows them home and into the school year." />
              <Benefit icon="tent" title="Time Away From Home" body="The experience of being away from home and discovering they can do it." />
              <Benefit icon="leaf" title="Space to Try & Fail" body="Space to try things, fail, try again: without expectations." />
            </div>
          }
        </div>

        <div style={{ marginTop: 90 }}>
          <h3 style={{ textAlign: "center", color: "var(--white)", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(28px, 3.5vw, 40px)", textTransform: "capitalize", letterSpacing: 0, lineHeight: 1.1, marginBottom: 0 }}>
            What Camp Tall Timbers <span style={{ color: "var(--primary-accent)" }}>Families Say</span>
          </h3>
        </div>
        <Testimonials variant={t.testimonialStyle} />
      </div>
    </section>);

}

function Benefit({ icon, title, body }) {
  return (
    <div className="ctt-benefit">
      <div className="ctt-benefit__icon"><i data-lucide={icon}></i></div>
      <h3>{title}</h3>
      <p>{body}</p>
    </div>);

}
function BenefitNum({ num, title, body }) {
  return (
    <div className="ctt-benefit ctt-benefit--num">
      <div className="ctt-benefit__num">{num}</div>
      <h3>{title}</h3>
      <p>{body}</p>
    </div>);

}

const QUOTES = [
{ body: "Our kid's first year was amazing. Can't wait to attend again!", by: "Camper Parent" },
{ body: "Great camp for young people. Great leadership. Very nice counselors.", by: "Camper Parent" },
{ body: "THIS PLACE IS TRULY SPECIAL!", by: "Camper Family" },
{ body: "Lots of fun with a friendly staff.", by: "Camper Parent" },
{ body: "2nd year in a row going here. Our kids love it and Glenn and his staff seem to really care.", by: "Returning Family" }];


function Testimonials({ variant }) {
  if (variant === "grid") return <TestimonialsGrid />;
  if (variant === "billboard") return <TestimonialsBillboard />;
  if (variant === "polaroid") return <TestimonialsPolaroid />;
  return <TestimonialsMarquee />;
}

function TestimonialsGrid() {
  return (
    <div className="ctt-testimonial-grid">
      {QUOTES.map((q, i) =>
      <figure key={i} className="ctt-quote-card ctt-quote-card--grid">
          <blockquote className="ctt-quote-card__body">
            {q.body}
            <cite className="ctt-quote-card__by">— {q.by}</cite>
          </blockquote>
        </figure>
      )}
    </div>);

}

function TestimonialsBillboard() {
  return (
    <div className="ctt-testimonial-billboard">
      <figure className="ctt-billboard-quote" style={{ fontFamily: "Montserrat" }}>
        <blockquote style={{ fontFamily: "Montserrat", fontWeight: "900", fontSize: "70px" }}>THIS PLACE IS TRULY SPECIAL!</blockquote>
        <cite>— Camp Tall Timbers Family</cite>
      </figure>
      <div className="ctt-billboard-side">
        {QUOTES.slice(0, 4).filter((q) => q.body !== "THIS PLACE IS TRULY SPECIAL!").map((q, i) =>
        <figure key={i} className="ctt-mini-quote">
            <blockquote>{q.body}</blockquote>
            <cite>— {q.by}</cite>
          </figure>
        )}
      </div>
    </div>);

}

function TestimonialsPolaroid() {
  const tilts = [-3, 2, -2, 3, -1];
  return (
    <div className="ctt-testimonial-polaroid">
      {QUOTES.map((q, i) =>
      <figure key={i} className="ctt-polaroid" style={{ transform: `rotate(${tilts[i] || 0}deg)` }}>
          <blockquote>{q.body}</blockquote>
          <cite>— {q.by}</cite>
        </figure>
      )}
    </div>);

}

function TestimonialsMarquee() {
  const items = [...QUOTES, ...QUOTES];
  return (
    <div className="ctt-marquee ctt-marquee-wood">
      <div className="ctt-marquee__track">
        {items.map((q, i) =>
        <figure key={i} className="ctt-quote-card">
            <blockquote className="ctt-quote-card__body">
              {q.body}
              <cite className="ctt-quote-card__by">— {q.by}</cite>
            </blockquote>
          </figure>
        )}
      </div>
    </div>);

}

/* =========================================================
   Glenn
   ========================================================= */
function MeetGlenn({ onCall, onForm }) {
  return (
    <section className="ctt-section ctt-section--cream" id="director">
      <div className="container container--wide">
        <div className="ctt-glenn">
          <div className="ctt-glenn__photo">
            <img src={ADBASE+"assets/photos/ready-to-kayak.jpeg"} alt="Glenn Smith with campers" />
          </div>
          <div>
            <div className="ctt-glenn__subtitle">Meet Your Camp Director</div>
            <h2 className="ctt-glenn__title">
              <span className="accent"><span style={{ color: "#402e00" }}>Glenn Smith</span></span>
            </h2>
            <p>
              Glenn Smith is the Director of Camp Tall Timbers, and he's been running summer
              programs here long enough to now have <strong>counselors who were once his
              campers</strong>. He personally connects with every family before enrollment and
              would love to answer your questions.
            </p>
            <p style={{ fontSize: 18, fontWeight: 600, color: "var(--brown)", marginTop: 20 }}>
              Don't worry: this isn't a sales call. It's your chance to talk to the person
              who will know your child by name all summer.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 30 }}>
              <button className="ctt-btn ctt-btn--lg" onClick={onCall}>
                <i data-lucide="calendar"></i> Schedule a Call with Glenn
              </button>
              <button className="ctt-btn ctt-btn--link" onClick={onForm}>
                Send a Message →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   Sessions / Pricing
   ========================================================= */
function Sessions() {
  return (
    <section className="ctt-section ctt-sessions" id="sessions">
      <div className="container container--wide">
        <div className="ctt-section-head">
          <h2 className="ctt-display-title">Sessions & Tuition

          </h2>
          <p style={{ color: "rgba(255,255,255,0.85)", fontSize: 17, marginTop: 12 }}>
            All-inclusive: meals, activities, evening programs: everything.
          </p>
        </div>
        <div className="ctt-pricing">
          <div className="ctt-price-card" style={{ "--tilt": "-2deg" }}>
            <div className="ctt-price-card__days">14 Days</div>
            <div className="ctt-price-card__weeks">Two-Week<br />Session</div>
            <div className="ctt-price-card__price">$3,775</div>
          </div>
          <div className="ctt-price-card" style={{ "--tilt": "1.5deg" }}>
            <div className="ctt-price-card__days">21 Days</div>
            <div className="ctt-price-card__weeks">Three-Week<br />Session</div>
            <div className="ctt-price-card__price">$5,250</div>
          </div>
          <div className="ctt-price-card" style={{ "--tilt": "-1.5deg" }}>
            <div className="ctt-price-card__days">35 Days</div>
            <div className="ctt-price-card__weeks">Five-Week<br />Session</div>
            <div className="ctt-price-card__price">$7,850</div>
          </div>
          <div className="ctt-price-card" style={{ "--tilt": "2deg" }}>
            <div className="ctt-price-card__days">49 Days</div>
            <div className="ctt-price-card__weeks">Seven-Week<br />Session</div>
            <div className="ctt-price-card__price">$9,985</div>
          </div>
        </div>
        <div className="ctt-sessions__note">
          <div className="ctt-sessions__discount">
            <i data-lucide="gift"></i>
            <span>Sibling discounts and referral credits available</span>
          </div>
          <a className="ctt-btn ctt-btn--lg" href="https://camptalltimbers.com/sessions/" target="_blank" rel="noopener">
            <i data-lucide="calendar"></i> View 2026 Dates and Rates
          </a>
        </div>
      </div>
    </section>);

}

/* =========================================================
   Contact / Form
   ========================================================= */
function ContactForm({ variant }) {
  const mountRef = useRef(null);
  useEffect(() => {
    const src = document.getElementById('gf-source');
    if (src && mountRef.current && src.firstChild) {
      while (src.firstChild) mountRef.current.appendChild(src.firstChild);
    }
  }, []);
  return (
    <div className={`ctt-form ctt-form--${variant}`}>
      <h3>Send Us a Quick Message</h3>
      <p className="ctt-form-sub">We'll get back to you, usually same-day.</p>
      <div ref={mountRef} className="ctt-gform-mount"></div>
    </div>);

}

function Contact({ onCall, t }) {
  const style = t && t.contactStyle || "doodle";

  const lead =
  <>
      <p>
        Signing up for a multi-week camp is a big step. Your child will be away from
        home, away from their phone, away from their routine. For a lot of parents,
        that's the part that gives them pause. <strong>If you're not sure, let's talk!</strong>
      </p>
      <p>
        If you have never done this before and don't know where to start, you're in
        good company. Most of the questions we get are the same ones we asked when our
        own kids first went away to camp: and we love answering every one of them.
      </p>
    </>;


  if (style === "doodle") {
    return (
      <section className="ctt-section ctt-contact ctt-contact--doodle" id="contact" data-screen-label="Contact">
        <div className="container container--wide">
          <div className="ctt-contact-doodle__head">
            <h2 className="ctt-display-title">
              You have a lot of questions.<br />
              <span className="accent">We'd love to answer them.</span>
            </h2>
          </div>

          <div className="ctt-contact-grid">
            <div className="ctt-contact__lead">
              {lead}
              <figure className="ctt-quote-card ctt-quote-card--inline">
                <blockquote className="ctt-quote-card__body">
                  2nd year in a row going here. Our kids love it and Glenn and his
                  staff really care about making sure our kids have a great time. Lots
                  and lots of camp activity choices too!
                  <cite className="ctt-quote-card__by">— Returning Camp Family</cite>
                </blockquote>
              </figure>
            </div>
            <ContactForm variant="doodle" />
          </div>
        </div>
      </section>);

  }

  if (style === "cream") {
    return (
      <section className="ctt-section ctt-contact ctt-contact--cream" id="contact" data-screen-label="Contact">
        <div className="container container--wide">
          <div className="ctt-contact-cream__grid">
            <div className="ctt-contact-cream__lead">
              <h2 className="ctt-display-title">
                You have a lot of questions.<br />
                <span className="accent">We'd love to answer them.</span>
              </h2>
              {lead}
              <figure className="ctt-quote-card ctt-quote-card--paper">
                <blockquote className="ctt-quote-card__body" style={{ fontFamily: "Scout", fontSize: "26px" }}>
                  Our kids love it and Glenn and his staff really care about making sure
                  our kids have a great time. Lots and lots of camp activity choices too!
                  <cite className="ctt-quote-card__by">— Returning Camp Family</cite>
                </blockquote>
              </figure>
            </div>
            <ContactForm variant="cream" />
          </div>
        </div>
      </section>);

  }

  // "postcard" — yellow envelope-style card on cream
  return (
    <section className="ctt-section ctt-contact ctt-contact--postcard" id="contact" data-screen-label="Contact">
      <div className="container container--wide">
        <div className="ctt-contact-postcard">
          <div className="ctt-contact-postcard__head">
            <h2 className="ctt-display-title">
              You have a lot of questions.<br />
              <span className="accent">We'd love to answer them.</span>
            </h2>
            <figure className="ctt-quote-card ctt-quote-card--postcard">
              <blockquote className="ctt-quote-card__body">
                Our kids love it and Glenn and his staff really care about making sure
                our kids have a great time. Lots and lots of camp activity choices too!
                <cite className="ctt-quote-card__by">— Returning Camp Family</cite>
              </blockquote>
            </figure>
          </div>
          <div className="ctt-contact-postcard__body">
            <div className="ctt-contact__lead">{lead}</div>
            <ContactForm variant="postcard" />
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   Closing CTA + Footer
   ========================================================= */
function ClosingCTA({ onCall, onForm }) {
  return (
    <section className="ctt-section ctt-section--yellow ctt-section--sm">
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <h2 className="ctt-display-title" style={{ color: "var(--brown)" }}>
            Still Have Questions? <span style={{ color: "var(--white)", textShadow: "2px 2px 0 var(--brown)" }}>
That's What We're Here For.</span>
          </h2>
          <p style={{ fontSize: 18, color: "var(--brown)", maxWidth: "55ch", margin: "0 auto 30px", lineHeight: 1.5 }}>
            <strong>You don't need to have this figured out before you reach out.</strong> Most
            parents start with a single question. Our staff are happy to take it from there.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="ctt-btn ctt-btn--dark ctt-btn--lg" onClick={onCall}>
              <i data-lucide="calendar"></i> Schedule a Call with the Camp Director
            </button>
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer className="ctt-footer" data-screen-label="Footer">
      <div className="ctt-footer__inner">
        <div className="ctt-footer__brand">
          <img src={ADBASE+"assets/logos/ctt-logo-notag.png"} alt="Camp Tall Timbers" />
          <div>An award-winning overnight youth camp.<br />Blue Ridge Mountains, West Virginia.</div>
        </div>
        <div className="ctt-footer__meta">
          <a href="tel:3018740111">301.874.0111</a>
          <a href="https://camptalltimbers.com" target="_blank" rel="noopener">camptalltimbers.com</a>
          <span>Blue Ridge Mountains, WV</span>
        </div>
      </div>
      <div className="ctt-footer__bottom">
        © Camp Tall Timbers. All rights reserved.
      </div>
    </footer>);

}

/* =========================================================
   Sticky mobile call bar
   ========================================================= */
function StickyCallBar({ onCall, onForm }) {
  useEffect(() => {
    document.body.classList.add("has-sticky-bar");
    return () => document.body.classList.remove("has-sticky-bar");
  }, []);
  return (
    <div className="ctt-sticky-bar">
      <button className="ctt-btn" onClick={onCall}><i data-lucide="phone"></i> Talk to Glenn</button>
      <button className="ctt-btn ctt-btn--ghost" onClick={onForm} style={{ borderColor: "var(--primary-accent)", color: "var(--primary-accent)" }}>Message</button>
    </div>);

}

/* =========================================================
   Calendly modal (placeholder)
   ========================================================= */
function CalendlyModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="ctt-modal" onClick={onClose}>
      <div className="ctt-modal__inner" onClick={(e) => e.stopPropagation()}>
        <button className="ctt-modal__close" onClick={onClose} aria-label="Close">
          <i data-lucide="x"></i>
        </button>
        <h3>Schedule a Call with Glenn</h3>
        <p style={{ color: "var(--gray)", margin: "10px 0 24px" }}>
          This would open a Calendly embed where parents pick a 15-minute call with Glenn.
        </p>
        <a className="ctt-btn ctt-btn--lg" href="https://calendly.com/camptalltimbers/meet-with-glenn" target="_blank" rel="noopener noreferrer">
          <i data-lucide="external-link"></i> Open Calendly
        </a>
      </div>
    </div>);

}

/* =========================================================
   Export to window
   ========================================================= */
Object.assign(window, {
  Header, Hero, AwardsStrip, Intro, StandingTall, FiftyYears, Benefit, BenefitNum,
  Testimonials, TestimonialsMarquee, TestimonialsGrid, TestimonialsBillboard, TestimonialsPolaroid,
  MeetGlenn, Sessions, Contact, ClosingCTA, Footer, StickyCallBar, CalendlyModal
});