/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakText, TweakToggle */

const { useState, useEffect, useMemo } = React;

const PALETTES = /*EDITMODE-BEGIN*/{
  "porch": {
    "name": "Front Porch",
    "cream": "#F4ECD8",
    "paper": "#FBF6E9",
    "ink": "#1F1A14",
    "clay": "#B6512C",
    "moss": "#3D5A3A",
    "muted": "#8A7A5C"
  },
  "smoky": {
    "name": "Smoky Dusk",
    "cream": "#EDE6D3",
    "paper": "#F5EFDD",
    "ink": "#181410",
    "clay": "#A04527",
    "moss": "#2C4A3E",
    "muted": "#7A6A4F"
  },
  "honey": {
    "name": "Honey Hollow",
    "cream": "#F8F0DC",
    "paper": "#FCF6E5",
    "ink": "#231C12",
    "clay": "#C66A2C",
    "moss": "#4F6B36",
    "muted": "#9A8866"
  },
  "magnolia": {
    "name": "Magnolia",
    "cream": "#F0E8D6",
    "paper": "#F7F1E0",
    "ink": "#1C1611",
    "clay": "#9C3F2E",
    "moss": "#324A35",
    "muted": "#857353"
  }
} /*EDITMODE-END*/;

const FONT_PAIRINGS = {
  "heritage": {
    name: "Heritage (Recoleta + Inter)",
    display: "'Roboto Slab', 'Recoleta', Georgia, serif",
    displayWeight: 700,
    body: "'Inter', system-ui, sans-serif",
    googleImports: "family=Roboto+Slab:wght@500;700;900&family=Inter:wght@400;500;600"
  },
  "almanac": {
    name: "Almanac (Old Standard + Work Sans)",
    display: "'Old Standard TT', 'Caslon', Georgia, serif",
    displayWeight: 700,
    body: "'Work Sans', system-ui, sans-serif",
    googleImports: "family=Old+Standard+TT:wght@400;700&family=Work+Sans:wght@400;500;600"
  },
  "porch": {
    name: "Porch (Zilla Slab + IBM Plex)",
    display: "'Zilla Slab', Georgia, serif",
    displayWeight: 700,
    body: "'IBM Plex Sans', system-ui, sans-serif",
    googleImports: "family=Zilla+Slab:wght@500;700;900&family=IBM+Plex+Sans:wght@400;500;600"
  },
  "modern": {
    name: "Modern (Fraunces + DM Sans)",
    display: "'Fraunces', Georgia, serif",
    displayWeight: 700,
    body: "'DM Sans', system-ui, sans-serif",
    googleImports: "family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=DM+Sans:wght@400;500;600"
  }
};

const TAGLINES = {
  "plan": "Plan Tennessee, your way.",
  "porch": "From porch swings to peak views — plotted for you.",
  "back": "Backroads, bonfires, and bookings — in one trip.",
  "soft": "A softer, smarter way to wander Tennessee.",
  "build": "Build the trip. Book it. Hit the road."
};

const DEFAULTS = /*EDITMODE-BEGIN-2*/{
  "palette": "porch",
  "fonts": "heritage",
  "tagline": "porch",
  "heroLayout": "split",
  "disclaimerStyle": "ribbon",
  "showTexture": true
} /*EDITMODE-END-2*/;

// Inject Google Fonts dynamically
function useGoogleFonts(fontKey) {
  useEffect(() => {
    const id = "google-fonts-link";
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      document.head.appendChild(link);
    }
    const all = Object.values(FONT_PAIRINGS).map((f) => f.googleImports).join("&");
    link.href = `https://fonts.googleapis.com/css2?${all}&display=swap`;
  }, []);
}

function Wordmark({ palette, fonts }) {
  return (
    <a href="/" aria-label="TNVacations.com — independent Tennessee trip planner" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
      <img
        src="logo.png"
        alt="TNVacations.com"
        style={{ height: 32, width: "auto", display: "block" }} />
      
    </a>);

}

function DisclaimerRibbon({ style, palette }) {
  if (style === "none") return null;

  const text = "Looking for the Tennessee Department of Tourist Development? Visit TNVacation.com";

  if (style === "ribbon") {
    return (
      <div style={{ ...{
          background: palette.ink,
          color: palette.cream,
          textAlign: "center",
          padding: "8px 20px",
          fontSize: 12,
          letterSpacing: "0.06em",
          textTransform: "uppercase",
          fontWeight: 500
        }, background: "rgb(9, 48, 91)" }}>
        <span style={{ opacity: 0.6, marginRight: 10 }}>※</span>
        {text}
      </div>);

  }

  if (style === "inline") {
    return (
      <div style={{
        background: "transparent",
        color: palette.muted,
        textAlign: "center",
        padding: "10px 20px",
        fontSize: 11,
        letterSpacing: "0.04em",
        fontStyle: "italic",
        borderBottom: `1px solid ${palette.muted}33`
      }}>
        {text}
      </div>);

  }

  if (style === "badge") {
    return (
      <div style={{
        textAlign: "center",
        padding: "12px 20px",
        background: palette.cream
      }}>
        <span style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          background: palette.paper,
          border: `1px solid ${palette.muted}55`,
          borderRadius: 999,
          padding: "5px 14px",
          fontSize: 11,
          color: palette.ink,
          letterSpacing: "0.04em"
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: palette.clay }} />
          Independent — not affiliated with the State of Tennessee
        </span>
      </div>);

  }
  return null;
}

function PaperTexture({ show, palette }) {
  if (!show) return null;
  return (
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", mixBlendMode: "multiply", opacity: 0.4 }} aria-hidden="true">
      <filter id="paper">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="3" />
        <feColorMatrix values="0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0.18 0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#paper)" />
    </svg>);

}

function HeroBadge({ palette, fonts }) {
  return (
    <div style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      padding: "6px 14px 6px 8px",
      background: palette.paper,
      border: `1px solid ${palette.ink}22`,
      borderRadius: 999,
      fontFamily: fonts.body,
      fontSize: 12,
      letterSpacing: "0.08em",
      textTransform: "uppercase",
      color: palette.ink,
      fontWeight: 500
    }}>
      <span style={{ ...{
          width: 22, height: 22, borderRadius: "50%",
          background: palette.clay, color: palette.cream,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontSize: 11, fontWeight: 700
        }, background: "rgb(59, 90, 125)" }}>★</span>
      A platform for curating amazing vacations in Tennessee
    </div>);

}

function SignupForm({ palette, fonts, compact }) {
  const [email, setEmail] = useState("");
  const [interests, setInterests] = useState({ lodging: false, activities: false, food: false });
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError("Please enter a valid email.");
      return;
    }
    setError("");
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div style={{
        background: palette.paper,
        border: `1px solid ${palette.moss}55`,
        borderRadius: 14,
        padding: "22px 24px",
        fontFamily: fonts.body
      }}>
        <div style={{
          fontFamily: fonts.display,
          fontWeight: fonts.displayWeight,
          fontSize: 22,
          color: palette.moss,
          marginBottom: 6,
          letterSpacing: "-0.01em"
        }}>
          You're on the list.
        </div>
        <div style={{ color: palette.ink, opacity: 0.75, fontSize: 14, lineHeight: 1.5 }}>
          We'll send a note when itinerary planning opens up. No spam — just the launch and a few hidden-gem dispatches.
        </div>
      </div>);

  }

  const interestPills = [
  { key: "lodging", label: "Lodging" },
  { key: "activities", label: "Activities" },
  { key: "food", label: "Food & drink" }];


  return (
    <form onSubmit={submit} style={{ fontFamily: fonts.body }}>
      <div style={{
        display: "flex",
        flexDirection: compact ? "column" : "row",
        gap: 8,
        background: palette.paper,
        border: `1px solid ${palette.ink}22`,
        borderRadius: 14,
        padding: 8
      }}>
        <input
          type="email"
          value={email}
          onChange={(e) => {setEmail(e.target.value);setError("");}}
          placeholder="your@email.com"
          style={{
            flex: 1,
            border: "none",
            outline: "none",
            background: "transparent",
            padding: "12px 14px",
            fontFamily: fonts.body,
            fontSize: 16,
            color: palette.ink,
            minWidth: 0
          }} />
        
        <button type="submit" style={{
          background: palette.ink,
          color: palette.cream,
          border: "none",
          borderRadius: 10,
          padding: "12px 22px",
          fontFamily: fonts.body,
          fontWeight: 600,
          fontSize: 14,
          letterSpacing: "0.04em",
          textTransform: "uppercase",
          cursor: "pointer",
          whiteSpace: "nowrap"
        }}>
          Notify Me →
        </button>
      </div>

      <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
        <span style={{ fontSize: 12, color: palette.ink, opacity: 0.6, letterSpacing: "0.04em", textTransform: "uppercase", marginRight: 4 }}>
          Tell us what you'd plan:
        </span>
        {interestPills.map((p) => {
          const on = interests[p.key];
          return (
            <button
              key={p.key}
              type="button"
              onClick={() => setInterests({ ...interests, [p.key]: !on })}
              style={{
                border: `1px solid ${on ? palette.clay : palette.ink + "33"}`,
                background: on ? palette.clay : "transparent",
                color: on ? palette.cream : palette.ink,
                borderRadius: 999,
                padding: "6px 14px",
                fontSize: 13,
                fontFamily: fonts.body,
                cursor: "pointer",
                transition: "all .15s ease"
              }}>
              {on ? "✓ " : ""}{p.label}
            </button>);

        })}
      </div>

      {error &&
      <div style={{ marginTop: 10, color: palette.clay, fontSize: 13 }}>{error}</div>
      }
    </form>);

}

function HeroSplit({ palette, fonts, tagline, showTexture }) {
  return (
    <section className="hero hero-split" style={{
      display: "grid",
      gridTemplateColumns: "1.05fr 1fr",
      minHeight: "calc(100vh - 110px)",
      background: palette.cream,
      position: "relative"
    }}>
      <PaperTexture show={showTexture} palette={palette} />
      <div className="hero-split-text" style={{
        padding: "70px 72px 60px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        position: "relative",
        zIndex: 1
      }}>
        <HeroBadge palette={palette} fonts={fonts} />

        <div style={{ marginTop: 40 }}>
          <h1 style={{ ...{
              fontFamily: fonts.display,
              fontWeight: fonts.displayWeight,
              fontSize: "clamp(56px, 6.4vw, 96px)",
              lineHeight: 0.98,
              letterSpacing: "-0.025em",
              color: palette.ink,
              margin: 0,
              textWrap: "balance"
            }, fontFamily: "Recoleta", fontSize: "67px" }}>
            {tagline}
          </h1>
          <p style={{
            fontFamily: fonts.body,
            fontSize: 18,
            lineHeight: 1.55,
            color: palette.ink,
            opacity: 0.78,
            maxWidth: 480,
            marginTop: 28,
            textWrap: "pretty"
          }}>
            We're building a quieter way to plan a Tennessee trip — custom itineraries,
            stays you'll actually remember, and the kind of detours locals send to friends.
            Launching summer 2026.
          </p>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 48, color: palette.muted, fontFamily: fonts.body, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase" }}>
          <span style={{ width: 28, height: 1, background: palette.muted }} />
          Built by travelers who love the Volunteer State
        </div>
      </div>

      <div className="hero-split-image" style={{ position: "relative", overflow: "hidden", background: palette.moss }}>
        <img
          src="hero.webp"
          alt="Tennessee landscape"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "37% 50%", display: "block" }} />
        <div style={{
          position: "absolute",
          left: 28,
          bottom: 28,
          background: palette.paper + "ee",
          backdropFilter: "blur(6px)",
          border: `1px solid ${palette.ink}22`,
          borderRadius: 12,
          padding: "10px 14px",
          fontFamily: fonts.body,
          fontSize: 12,
          color: palette.ink,
          letterSpacing: "0.04em"
        }}>
          <span style={{ color: palette.clay, fontWeight: 600 }}>◐</span> Itinerary preview · 4 days · Smokies → Nashville
        </div>
      </div>
    </section>);

}

function HeroFullbleed({ palette, fonts, tagline, showTexture }) {
  return (
    <section className="hero hero-full" style={{ position: "relative", minHeight: "calc(100vh - 110px)", background: palette.ink, overflow: "hidden" }}>
      <img
        src="hero.webp"
        alt="Tennessee landscape"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "37% 50%", display: "block" }} />
      <div style={{
        position: "absolute", inset: 0,
        background: `linear-gradient(180deg, ${palette.ink}55 0%, ${palette.ink}00 30%, ${palette.ink}aa 100%)`
      }} />
      <div className="hero-full-inner" style={{
        position: "relative",
        zIndex: 2,
        padding: "70px 72px 60px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        minHeight: "calc(100vh - 110px)",
        color: palette.cream
      }}>
        <HeroBadge palette={palette} fonts={fonts} />
        <div style={{ maxWidth: 720 }}>
          <h1 style={{
            fontFamily: fonts.display,
            fontWeight: fonts.displayWeight,
            fontSize: "clamp(64px, 7.2vw, 112px)",
            lineHeight: 0.98,
            letterSpacing: "-0.025em",
            color: palette.cream,
            margin: 0,
            textWrap: "balance"
          }}>
            {tagline}
          </h1>
          <p style={{
            fontFamily: fonts.body,
            fontSize: 18,
            lineHeight: 1.55,
            color: palette.cream,
            opacity: 0.85,
            maxWidth: 520,
            marginTop: 24
          }}>
            Custom itineraries, lodging, and the detours locals actually take.
            Launching summer 2026.
          </p>
        </div>
        <div />
      </div>
    </section>);

}

function HeroCentered({ palette, fonts, tagline, showTexture }) {
  return (
    <section className="hero hero-center" style={{
      position: "relative",
      minHeight: "calc(100vh - 110px)",
      background: palette.cream,
      padding: "60px 40px",
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    }}>
      <PaperTexture show={showTexture} palette={palette} />
      <div style={{ position: "relative", zIndex: 1, textAlign: "center", maxWidth: 820, paddingTop: 20 }}>
        <HeroBadge palette={palette} fonts={fonts} />
        <h1 style={{
          fontFamily: fonts.display,
          fontWeight: fonts.displayWeight,
          fontSize: "clamp(56px, 7vw, 104px)",
          lineHeight: 0.98,
          letterSpacing: "-0.025em",
          color: palette.ink,
          margin: "28px 0 0",
          textWrap: "balance"
        }}>
          {tagline}
        </h1>
        <p style={{
          fontFamily: fonts.body,
          fontSize: 19,
          lineHeight: 1.55,
          color: palette.ink,
          opacity: 0.78,
          maxWidth: 580,
          margin: "24px auto 0"
        }}>
          Custom itineraries, stays you'll remember, and the detours locals send to friends.
          Launching summer 2026.
        </p>
      </div>

      <div className="hero-center-strip" style={{ position: "relative", zIndex: 1, marginTop: 56, width: "100%", maxWidth: 1200, display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 14, height: 280 }}>
        <img src="hero.webp" alt="Tennessee landscape" style={{ width: "100%", height: "100%", borderRadius: 14, objectFit: "cover", objectPosition: "37% 50%", display: "block" }} />
        <div style={{ width: "100%", height: "100%", borderRadius: 14, background: palette.moss, opacity: 0.25 }}></div>
        <div style={{ width: "100%", height: "100%", borderRadius: 14, background: palette.clay, opacity: 0.2 }}></div>
      </div>
    </section>);

}

function Features({ palette, fonts }) {
  const features = [
  {
    n: "01",
    title: "Custom itinerary builder",
    body: "Tell us your pace, party, and a few must-dos. We'll draft a day-by-day plan you can shuffle, swap, and book in one spot."
  },
  {
    n: "02",
    title: "Hidden-gem recommendations",
    body: "Beyond the obvious. Roadside diners, fly-fishing holes, gallery openings, and the cabin off the main road — vetted, never sponsored."
  },
  {
    n: "03",
    title: "Activities & experiences",
    body: "Hikes, distilleries, music halls, paddle trips. Filter by who's coming and we'll only show what fits the trip."
  },
  {
    n: "04",
    title: "Built for groups & families",
    body: "Plan together, vote on stops, and split the booking. Works for a long weekend with friends or a five-person family reunion."
  }];


  return (
    <section className="features" style={{ background: palette.paper, padding: "100px 72px", position: "relative" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, gap: 40, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 580 }}>
            <div style={{
              fontFamily: fonts.body, fontSize: 12, letterSpacing: "0.12em",
              textTransform: "uppercase", color: palette.clay, fontWeight: 600, marginBottom: 14
            }}>
              What we're building
            </div>
            <h2 style={{
              fontFamily: fonts.display,
              fontWeight: fonts.displayWeight,
              fontSize: "clamp(36px, 4vw, 56px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              color: palette.ink,
              margin: 0,
              textWrap: "balance"
            }}>
              A whole trip, planned in an afternoon — not a spreadsheet.
            </h2>
          </div>
          <div style={{
            fontFamily: fonts.body, fontSize: 14, color: palette.muted,
            maxWidth: 280, lineHeight: 1.55
          }}>
            One quiet little app. No ads. No 47 browser tabs. Just a trip you'll actually want to take.
          </div>
        </div>

        <div className="features-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 0,
          borderTop: `1px solid ${palette.ink}22`
        }}>
          {features.map((f, i) =>
          <div key={f.n} style={{
            padding: "32px 28px 36px",
            borderRight: i < features.length - 1 ? `1px solid ${palette.ink}22` : "none",
            borderBottom: `1px solid ${palette.ink}22`
          }}>
              <div style={{
              fontFamily: fonts.display,
              fontWeight: fonts.displayWeight,
              fontSize: 14,
              color: palette.clay,
              letterSpacing: "0.05em",
              marginBottom: 18
            }}>
                {f.n} —
              </div>
              <h3 style={{
              fontFamily: fonts.display,
              fontWeight: fonts.displayWeight,
              fontSize: 22,
              lineHeight: 1.15,
              letterSpacing: "-0.01em",
              color: palette.ink,
              margin: "0 0 12px"
            }}>
                {f.title}
              </h3>
              <p style={{
              fontFamily: fonts.body,
              fontSize: 14.5,
              lineHeight: 1.55,
              color: palette.ink,
              opacity: 0.72,
              margin: 0,
              textWrap: "pretty"
            }}>
                {f.body}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Footer({ palette, fonts }) {
  return (
    <footer className="site-footer" style={{
      background: palette.ink,
      color: palette.cream,
      padding: "60px 72px 40px",
      fontFamily: fonts.body
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div className="footer-cols" style={{
          display: "grid",
          gridTemplateColumns: "1.5fr 1fr 1fr",
          gap: 40,
          paddingBottom: 40,
          borderBottom: `1px solid ${palette.cream}22`
        }}>
          <div>
            <img
              src="logo.png"
              alt="TNVacations.com"
              style={{ height: 28, width: "auto", display: "block", filter: "brightness(0) invert(1)" }} />
            
            <p style={{
              fontSize: 13,
              lineHeight: 1.6,
              color: palette.cream,
              opacity: 0.65,
              margin: "16px 0 0",
              maxWidth: 360
            }}>TNVacations.com is an all new SaaS trip-planning platform launching in summer 2026.

            </p>
          </div>
          <div>
            <div style={{
              fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
              color: palette.cream, opacity: 0.5, marginBottom: 14, fontWeight: 600
            }}>
              Services
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <li><a href="#" style={{ color: palette.cream, textDecoration: "none", opacity: 0.8 }}>Itinerary Builders</a></li>
              <li><a href="#" style={{ color: palette.cream, textDecoration: "none", opacity: 0.8 }}>Recommendations Engines</a></li>
              <li><a href="#" style={{ color: palette.cream, textDecoration: "none", opacity: 0.8 }}>Advanced Group Planning</a></li>
            </ul>
          </div>
          <div style={{ height: "20px" }}>
            <div style={{
              fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
              color: palette.cream, opacity: 0.5, marginBottom: 14, fontWeight: 600
            }}>

            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <li><a href="mailto:hello@tnvacations.com" style={{ color: palette.cream, textDecoration: "none", opacity: 0.8 }}></a></li>
              <li><a href="#" style={{ color: palette.cream, textDecoration: "none", opacity: 0.8 }}>Privacy</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          paddingTop: 28,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 20,
          fontSize: 12,
          color: palette.cream,
          opacity: 0.6
        }}>
          <div style={{ maxWidth: 720, lineHeight: 1.5 }}>
            <strong style={{ color: palette.cream, opacity: 1, fontWeight: 600 }}>Disclaimer:</strong>{" "}
            TNVacations.com is not affiliated with, endorsed by, or sponsored by the State of Tennessee, the Tennessee Department of Tourist Development, or any other state, federal, or local government agency. All trademarks belong to their respective owners.
          </div>
          <div>© 2026 TNVacations.com</div>
        </div>
      </div>
    </footer>);

}

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color palette">
        <TweakColor
          tweaks={tweaks}
          setTweak={setTweak}
          k="palette"
          options={Object.keys(PALETTES).map((k) => [PALETTES[k].cream, PALETTES[k].clay, PALETTES[k].moss, PALETTES[k].ink])}
          rawValues={Object.keys(PALETTES)} />
        
        <div style={{ fontSize: 11, color: "#888", marginTop: 6 }}>
          {PALETTES[tweaks.palette]?.name}
        </div>
      </TweakSection>

      <TweakSection title="Type pairing">
        <TweakSelect
          tweaks={tweaks}
          setTweak={setTweak}
          k="fonts"
          options={Object.entries(FONT_PAIRINGS).map(([k, v]) => ({ value: k, label: v.name }))} />
        
      </TweakSection>

      <TweakSection title="Hero layout">
        <TweakRadio
          tweaks={tweaks}
          setTweak={setTweak}
          k="heroLayout"
          options={[
          { value: "split", label: "Split" },
          { value: "full", label: "Full-bleed" },
          { value: "center", label: "Centered" }]
          } />
        
      </TweakSection>

      <TweakSection title="Tagline">
        <TweakSelect
          tweaks={tweaks}
          setTweak={setTweak}
          k="tagline"
          options={[
          { value: "porch", label: "From porch swings to peak views…" },
          { value: "plan", label: "Plan Tennessee, your way." },
          { value: "back", label: "Backroads, bonfires, and bookings." },
          { value: "soft", label: "A softer, smarter way to wander." },
          { value: "build", label: "Build the trip. Book it. Hit the road." }]
          } />
        
      </TweakSection>

      <TweakSection title="Disclaimer ribbon">
        <TweakRadio
          tweaks={tweaks}
          setTweak={setTweak}
          k="disclaimerStyle"
          options={[
          { value: "ribbon", label: "Solid" },
          { value: "inline", label: "Subtle" },
          { value: "badge", label: "Pill" }]
          } />
        
      </TweakSection>

      <TweakSection title="Paper texture">
        <TweakToggle tweaks={tweaks} setTweak={setTweak} k="showTexture" />
      </TweakSection>
    </TweaksPanel>);

}

// TweakColor needs raw values for palette switching — patch the component to support a parallel rawValues prop
// (since the starter stores the array as the value). We'll wrap it instead.
function PaletteSwatches({ tweaks, setTweak }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
      {Object.entries(PALETTES).map(([key, p]) => {
        const active = tweaks.palette === key;
        return (
          <button
            key={key}
            onClick={() => setTweak("palette", key)}
            style={{
              border: active ? `2px solid ${p.ink}` : "2px solid transparent",
              borderRadius: 10,
              padding: 6,
              background: "#fff",
              cursor: "pointer",
              textAlign: "left"
            }}>
            <div style={{ display: "flex", height: 32, borderRadius: 6, overflow: "hidden" }}>
              <div style={{ flex: 1, background: p.cream }} />
              <div style={{ flex: 1, background: p.clay }} />
              <div style={{ flex: 1, background: p.moss }} />
              <div style={{ flex: 1, background: p.ink }} />
            </div>
            <div style={{ fontSize: 11, marginTop: 4, color: "#333", fontWeight: 500 }}>{p.name}</div>
          </button>);

      })}
    </div>);

}

function TweaksReal({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color palette">
        <PaletteSwatches tweaks={tweaks} setTweak={setTweak} />
      </TweakSection>

      <TweakSection title="Type pairing">
        <TweakSelect
          tweaks={tweaks}
          setTweak={setTweak}
          k="fonts"
          options={Object.entries(FONT_PAIRINGS).map(([k, v]) => ({ value: k, label: v.name }))} />
        
      </TweakSection>

      <TweakSection title="Hero layout">
        <TweakRadio
          tweaks={tweaks}
          setTweak={setTweak}
          k="heroLayout"
          options={[
          { value: "split", label: "Split" },
          { value: "full", label: "Full-bleed" },
          { value: "center", label: "Centered" }]
          } />
        
      </TweakSection>

      <TweakSection title="Tagline">
        <TweakSelect
          tweaks={tweaks}
          setTweak={setTweak}
          k="tagline"
          options={[
          { value: "porch", label: "From porch swings to peak views…" },
          { value: "plan", label: "Plan Tennessee, your way." },
          { value: "back", label: "Backroads, bonfires, and bookings." },
          { value: "soft", label: "A softer, smarter way to wander." },
          { value: "build", label: "Build the trip. Book it. Hit the road." }]
          } />
        
      </TweakSection>

      <TweakSection title="Disclaimer ribbon">
        <TweakRadio
          tweaks={tweaks}
          setTweak={setTweak}
          k="disclaimerStyle"
          options={[
          { value: "ribbon", label: "Solid" },
          { value: "inline", label: "Subtle" },
          { value: "badge", label: "Pill" }]
          } />
        
      </TweakSection>

      <TweakSection title="Paper texture">
        <TweakToggle tweaks={tweaks} setTweak={setTweak} k="showTexture" />
      </TweakSection>
    </TweaksPanel>);

}

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  useGoogleFonts(tweaks.fonts);

  const palette = PALETTES[tweaks.palette] || PALETTES.porch;
  const fonts = FONT_PAIRINGS[tweaks.fonts] || FONT_PAIRINGS.heritage;
  const tagline = TAGLINES[tweaks.tagline] || TAGLINES.porch;

  // Apply background to body
  useEffect(() => {
    document.body.style.background = palette.cream;
    document.body.style.color = palette.ink;
  }, [palette]);

  const Hero = tweaks.heroLayout === "full" ? HeroFullbleed :
  tweaks.heroLayout === "center" ? HeroCentered :
  HeroSplit;

  return (
    <div style={{ minHeight: "100vh", background: palette.cream }}>
      <DisclaimerRibbon style={tweaks.disclaimerStyle} palette={palette} />
      <header className="site-header" style={{
        padding: "22px 72px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        background: palette.cream,
        position: "relative",
        zIndex: 5
      }}>
        <Wordmark palette={palette} fonts={fonts} />
        <nav style={{ display: "flex", gap: 28, alignItems: "center", fontFamily: fonts.body, fontSize: 14 }}>
          <a className="nav-link" href="#features" style={{ color: palette.ink, textDecoration: "none", opacity: 0.7 }}>Tennessee trip planning and itinerary building made easy</a>
        </nav>
      </header>

      <main>
        <Hero palette={palette} fonts={fonts} tagline={tagline} showTexture={tweaks.showTexture} />
      </main>

      <div id="features">
        <Features palette={palette} fonts={fonts} />
      </div>

      <Footer palette={palette} fonts={fonts} />

      <TweaksReal tweaks={tweaks} setTweak={setTweak} />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);