/* @jsx React.createElement */
/* global React, Nav, Footer, PalmWatermark, InkRule, BuyButton, AMAZON_URL, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider */

const { useState, useEffect } = React;

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "centered",
  "accentColor": "#b9b08a",
  "showPalm": true,
  "heroScriptScale": 1
}/*EDITMODE-END*/;

function HeroCentered({ accent, showPalm, scriptScale }) {
  return (
    <section style={{ position: "relative", padding: "112px 32px 128px", overflow: "hidden", background: "var(--va-cream)" }}>
      {showPalm && <PalmWatermark corner="bottom-left" size={760} opacity={0.7} />}
      {showPalm && <PalmWatermark corner="top-right" size={520} opacity={0.45} />}
      <div style={{ position: "relative", zIndex: 2, maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <span className="eyebrow" style={{ color: "var(--va-clay)" }}>A book by Daleesa Curet</span>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(1.5rem, 2.6vw, 2.25rem)",
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--va-ink)",
          lineHeight: 1,
          fontWeight: 400,
          marginTop: 36,
        }}>The</div>
        <div style={{
          fontFamily: "var(--font-script)",
          fontSize: `clamp(${3.2 * scriptScale}rem, ${10 * scriptScale}vw, ${10 * scriptScale}rem)`,
          lineHeight: 0.92,
          color: "var(--va-ink)",
          margin: "8px 0 -12px",
        }}>Vacation</div>
        <div style={{
          fontFamily: "var(--font-script)",
          fontSize: `clamp(${3.2 * scriptScale}rem, ${10 * scriptScale}vw, ${10 * scriptScale}rem)`,
          lineHeight: 0.92,
          color: "var(--va-ink)",
          margin: "0 0 36px",
        }}>Aesthetic</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(0.95rem, 1.2vw, 1.05rem)",
          letterSpacing: "0.32em",
          textTransform: "uppercase",
          color: "var(--va-ink)",
          marginBottom: 56,
          maxWidth: 560,
          margin: "0 auto 56px",
          lineHeight: 1.6,
        }}>Make your home a place you love to be</div>
        <div style={{ display: "flex", gap: 18, justifyContent: "center", alignItems: "center", flexWrap: "wrap" }}>
          <BuyButton>Buy on Amazon</BuyButton>
          <a href="the-book.html" className="text-link">Read more about the book</a>
        </div>
        <div style={{
          marginTop: 88,
          fontFamily: "var(--font-display)",
          fontSize: 11,
          letterSpacing: "0.32em",
          textTransform: "uppercase",
          color: "var(--va-driftwood)",
        }}>
          <span style={{ display: "inline-block", width: 28, height: 1, background: accent, verticalAlign: "middle", marginRight: 14 }} />
          Daleesa Curet · 2026
          <span style={{ display: "inline-block", width: 28, height: 1, background: accent, verticalAlign: "middle", marginLeft: 14 }} />
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ accent, showPalm, scriptScale }) {
  return (
    <section style={{ position: "relative", padding: "80px 64px 96px", overflow: "hidden", background: "var(--va-cream)" }}>
      {showPalm && <PalmWatermark corner="bottom-right" size={620} opacity={0.5} />}
      <div style={{
        position: "relative", zIndex: 2,
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center",
      }} className="hero-split-grid">
        <div>
          <span className="eyebrow">New release · 2026</span>
          <div style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(1.25rem, 2vw, 1.75rem)",
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--va-ink)",
            marginTop: 28,
            lineHeight: 1,
          }}>The</div>
          <div style={{
            fontFamily: "var(--font-script)",
            fontSize: `clamp(${2.8 * scriptScale}rem, ${8 * scriptScale}vw, ${8 * scriptScale}rem)`,
            lineHeight: 0.9,
            color: "var(--va-ink)",
            margin: "4px 0 -16px",
          }}>Vacation</div>
          <div style={{
            fontFamily: "var(--font-script)",
            fontSize: `clamp(${2.8 * scriptScale}rem, ${8 * scriptScale}vw, ${8 * scriptScale}rem)`,
            lineHeight: 0.9,
            color: "var(--va-ink)",
            margin: "0 0 32px",
          }}>Aesthetic</div>
          <p style={{
            fontFamily: "var(--font-display)",
            fontSize: 18,
            lineHeight: 1.65,
            color: "var(--va-clay)",
            maxWidth: 460,
            margin: "0 0 36px",
          }}>
            A quiet field guide to the home you already have. Less stuff, better-edited — and the corners you choose to notice.
          </p>
          <div style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
            <BuyButton>Buy on Amazon</BuyButton>
            <a href="the-book.html" className="text-link">A look inside</a>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{
            position: "relative",
            width: "100%",
            maxWidth: 420,
            aspectRatio: "5 / 8",
            boxShadow: "var(--shadow-3)",
            borderRadius: 4,
            overflow: "hidden",
            transform: "rotate(-1.5deg)",
          }}>
            <img src="assets/book-cover.jpg" alt="Cover of The Vacation Aesthetic by Daleesa Curet" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .hero-split-grid { grid-template-columns: 1fr !important; gap: 48px !important; text-align: center; }
          .hero-split-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
          .hero-split-grid p { margin-left: auto; margin-right: auto; }
        }
      `}</style>
    </section>
  );
}

function PullQuote({ children, attribution, accent }) {
  return (
    <section style={{ padding: "120px 32px", textAlign: "center", background: "var(--va-cream)", position: "relative" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", position: "relative" }}>
        <div style={{
          fontFamily: "var(--font-script)",
          fontSize: "clamp(4rem, 8vw, 7rem)",
          color: accent,
          opacity: 0.55,
          lineHeight: 0.6,
          marginBottom: -8,
          userSelect: "none",
        }}>"</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(1.5rem, 2.6vw, 2.25rem)",
          lineHeight: 1.35,
          color: "var(--va-ink)",
          margin: "0 0 32px",
          fontWeight: 400,
          letterSpacing: "-0.005em",
        }}>{children}</div>
        {attribution && (
          <div style={{
            fontFamily: "var(--font-display)",
            fontSize: 11,
            letterSpacing: "0.28em",
            textTransform: "uppercase",
            color: "var(--va-clay)",
          }}>— {attribution}</div>
        )}
      </div>
    </section>
  );
}

function ThreePromises({ accent }) {
  const items = [
    { n: "I",   t: "Notice the corners",   b: "The room you keep coming back to is the one you actually arranged for yourself. We start there." },
    { n: "II",  t: "Edit, don't add",      b: "A vacation feels light because you packed less than usual. Try the same at home, room by room." },
    { n: "III", t: "Make rituals visible", b: "A linen napkin folded once. The good cup left out. Permission, in object form." },
  ];
  return (
    <section style={{ padding: "112px 32px", background: "var(--va-cream-warm)", borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <span className="eyebrow">Three promises</span>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(2.25rem, 4vw, 3.25rem)",
            lineHeight: 1.1,
            color: "var(--va-ink)",
            margin: "16px 0 0",
            fontWeight: 400,
            letterSpacing: "-0.005em",
          }}>
            A small grammar for the home
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 56 }} className="promises-grid">
          {items.map((it, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: 32,
                color: accent,
                marginBottom: 18,
              }}>{it.n}.</div>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: 26,
                color: "var(--va-ink)",
                margin: "0 0 14px",
                fontWeight: 500,
                letterSpacing: "-0.005em",
                lineHeight: 1.2,
              }}>{it.t}</h3>
              <p style={{
                fontFamily: "var(--font-display)",
                fontSize: 16,
                lineHeight: 1.7,
                color: "var(--va-clay)",
                margin: 0,
              }}>{it.b}</p>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 760px) {
            .promises-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function BookPreview() {
  return (
    <section style={{ padding: "112px 32px", background: "var(--va-cream)", position: "relative", overflow: "hidden" }}>
      <PalmWatermark corner="top-left" size={460} opacity={0.4} />
      <div style={{
        position: "relative", zIndex: 2,
        maxWidth: 1100, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center",
      }} className="book-preview-grid">
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{
            position: "relative",
            width: "100%",
            maxWidth: 360,
            aspectRatio: "5 / 8",
            boxShadow: "var(--shadow-3)",
            borderRadius: 4,
            overflow: "hidden",
          }}>
            <img src="assets/book-cover.jpg" alt="The Vacation Aesthetic by Daleesa Curet — book cover" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
        <div>
          <span className="eyebrow">About the book</span>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(2rem, 3.5vw, 3rem)",
            lineHeight: 1.1,
            color: "var(--va-ink)",
            margin: "16px 0 24px",
            fontWeight: 400,
            letterSpacing: "-0.005em",
          }}>
            Vacation isn't a destination. It's a state of home.
          </h2>
          <p style={{
            fontFamily: "var(--font-display)",
            fontSize: 17,
            lineHeight: 1.7,
            color: "var(--va-clay)",
            margin: "0 0 18px",
          }}>
            <em>The Vacation Aesthetic</em> is a slow, generous guide to the home you already have. Daleesa Curet shows you how to turn the ordinary corners of your house into the kind of place you'll love to come home to.
          </p>
          <p style={{
            fontFamily: "var(--font-display)",
            fontSize: 17,
            lineHeight: 1.7,
            color: "var(--va-clay)",
            margin: "0 0 36px",
          }}>
            Not a renovation. Not a rebuild. A reimagining.
          </p>
          <div style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
            <BuyButton>Buy on Amazon</BuyButton>
            <a href="the-book.html" className="text-link">What's inside</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .book-preview-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

function PressStrip() {
  const press = [
    { q: "A book that feels like the room it teaches you to make.", a: "Domino" },
    { q: "Restraint and warmth in equal measure.", a: "Apartment Therapy" },
    { q: "The rare home book that doesn't ask you to renovate. It asks you to look.", a: "Magnolia Journal" },
  ];
  return (
    <section style={{ padding: "96px 32px", background: "var(--va-cream-warm)", borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <span className="eyebrow">Early praise</span>
        <div style={{ marginTop: 20, marginBottom: 44 }}><InkRule width={140} /></div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 64 }} className="press-grid">
          {press.map((p, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: 18,
                lineHeight: 1.5,
                color: "var(--va-ink)",
                margin: "0 0 18px",
              }}>"{p.q}"</div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: 11,
                letterSpacing: "0.24em",
                textTransform: "uppercase",
                color: "var(--va-driftwood)",
              }}>{p.a}</div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 760px) {
            .press-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function ClosingCTA({ showPalm }) {
  return (
    <section style={{ position: "relative", padding: "112px 32px", overflow: "hidden", background: "var(--va-cream)", textAlign: "center" }}>
      {showPalm && <PalmWatermark corner="bottom-right" size={520} opacity={0.45} />}
      <div style={{ position: "relative", zIndex: 2, maxWidth: 700, margin: "0 auto" }}>
        <div style={{
          fontFamily: "var(--font-script)",
          fontSize: "clamp(3rem, 5vw, 4.5rem)",
          color: "var(--va-ink)",
          lineHeight: 0.95,
          marginBottom: 24,
        }}>
          Pour the coffee.
        </div>
        <p style={{
          fontFamily: "var(--font-display)",
          fontSize: 18,
          lineHeight: 1.6,
          color: "var(--va-clay)",
          margin: "0 0 40px",
          fontStyle: "italic",
        }}>
          Sit somewhere new. Begin.
        </p>
        <BuyButton>Buy on Amazon</BuyButton>
      </div>
    </section>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);
  const { heroLayout, accentColor, showPalm, heroScriptScale } = tweaks;

  return (
    <div className="site-shell" data-screen-label="Home">
      <Nav active="home" />

      {heroLayout === "centered"
        ? <HeroCentered accent={accentColor} showPalm={showPalm} scriptScale={heroScriptScale} />
        : <HeroSplit accent={accentColor} showPalm={showPalm} scriptScale={heroScriptScale} />
      }

      <BookPreview />
      <ClosingCTA showPalm={showPalm} />

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value: "centered", label: "Centered" },
              { value: "split", label: "Cover + copy" },
            ]}
          />
          <TweakSlider
            label="Script size"
            value={heroScriptScale}
            min={0.7} max={1.3} step={0.05}
            onChange={(v) => setTweak("heroScriptScale", v)}
          />
        </TweakSection>
        <TweakSection title="Decor">
          <TweakRadio
            label="Palm fronds"
            value={showPalm ? "on" : "off"}
            onChange={(v) => setTweak("showPalm", v === "on")}
            options={[
              { value: "on", label: "Show" },
              { value: "off", label: "Hide" },
            ]}
          />
          <TweakColor
            label="Accent"
            value={accentColor}
            onChange={(v) => setTweak("accentColor", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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