/* The Hard Choice — single-page redesign
   Literary & moody. Built around real text only — opening passage,
   author bio facts, retailer list. No fabricated reviews.
*/

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "moss",
  "typePair": "cormorant",
  "density": "regular",
  "coverTreatment": "raw",
  "showGrain": true
}/*EDITMODE-END*/;

/* ──────────────────────────────────────────────────────────
   Content
   ────────────────────────────────────────────────────────── */

// The synopsis — rewritten for a more literary register, but faithful to facts.
const SYNOPSIS = `Joe is a block mason. Forty-something, broke, a wife at home and a back that aches every morning before the coffee is hot. He is not built to be a thief, and he knows it. But when his cousin John comes back to the hollow with a roll of bills thick enough to choke a dog, the arithmetic begins to do itself.`;

const SYNOPSIS_2 = `The Hard Choice follows seven years of Joe's life inside the marijuana trade — a quiet, frequently ugly, often lonesome business that nobody puts on the family Christmas card. It is not a glamour story. It is a story about money and pride and the small daily mathematics of staying out of prison.`;

// Real opening passage (verbatim from the published sample).
const OPENING_PAGES = [
  {
    page: "I",
    label: "The Pipeline",
    body: [
      `The sun was warm on Joe's face as he drove the four-wheeler swiftly across the grassy pipeline trail. The fresh mountain air flowed over his body as a giant wave that cooled his sweat-soaked T-shirt.`,
      `This was what life was all about, Joe thought as he rode along — the trees, the birds, the fresh air and best of all, the freedom.`,
    ],
  },
  {
    page: "II",
    label: "Overhead",
    body: [
      `He was unaware that cruising high overhead at that moment was a Drug Task Force helicopter, or that his carefree ride through the woods had attracted someone's unwanted attention.`,
    ],
  },
  {
    page: "III",
    label: "A Few Years Back",
    body: [
      `But I'm getting ahead of myself.`,
      `Let's go back a few years to where this adventure begins…`,
    ],
  },
];

// Excerpts presented as a "From the Pages" carousel — these are real lines
// from the opening passage (no fabricated reviews).
const EXCERPTS = [
  {
    quote: "This was what life was all about — the trees, the birds, the fresh air and best of all, the freedom.",
    cite: "Chapter One",
  },
  {
    quote: "Cruising high overhead at that moment was a Drug Task Force helicopter.",
    cite: "Chapter One",
  },
  {
    quote: "He stumbles through the sometimes unglamorous world of a pot grower.",
    cite: "Jacket copy",
  },
  {
    quote: "But I'm getting ahead of myself; let's go back a few years to where this adventure begins.",
    cite: "Chapter One",
  },
];

// Author bio — lightly rewritten for cadence; all facts from the original site.
const BIO = [
  `He spent his early twenties as a guard inside a maximum-security juvenile prison in Ohio — a job that ended after thirteen months, two riots, and several dozen fights with the inmates. He went south to Florida, where he built motels and shopping malls, then came back to corrections at a Federal halfway house in West Virginia. That is where he learned what he knows about marijuana cultivation.`,
  `He began writing in middle age, while recovering from a broken ankle. He had no formal training. He had the good fortune of living next door to Russell Rice — longtime sports information director at the University of Kentucky, a published author and Pulitzer Prize nominee — who read the early drafts and gave the work direction.`,
  `The Hard Choice is his first novel.`,
];

const RETAILERS = [
  { name: "Amazon", note: "Paperback & Kindle", href: "https://www.amazon.com/dp/1604745649" },
  { name: "Barnes & Noble", note: "Paperback", href: "http://search.barnesandnoble.com/booksearch/isbninquiry.asp?r=1&ean=9781604745641" },
  { name: "Target", note: "Paperback", href: "http://www.target.com/Hard-Choice-Breeden-Danny-Lee/dp/1604745649" },
  { name: "Kinokuniya", note: "International", href: "http://bookweb.kinokuniya.co.jp/guest/cgi-bin/booksea.cgi?ISBN=1604745649" },
  { name: "Van Stockum", note: "Netherlands", href: "http://www.vanstockum.nl/product/10683422/The-Hard-Choice.html" },
  { name: "Eruditor", note: "Low-cost", href: "http://www.eruditor.com/exec/books/item/9781604745641.html.en?currency=USD" },
];

/* ──────────────────────────────────────────────────────────
   Tweak presets
   ────────────────────────────────────────────────────────── */

const PALETTES = {
  ember: {
    label: "Ember",
    css: {
      "--bg":          "oklch(0.135 0.012 55)",
      "--bg-deep":     "oklch(0.10 0.010 55)",
      "--surface":     "oklch(0.18 0.012 50)",
      "--hairline":    "oklch(0.32 0.010 55)",
      "--hairline-soft":"oklch(0.24 0.010 55)",
      "--ink":         "oklch(0.93 0.018 80)",
      "--ink-dim":     "oklch(0.78 0.018 75)",
      "--muted":       "oklch(0.58 0.015 70)",
      "--accent":      "oklch(0.62 0.15 32)",
      "--accent-deep": "oklch(0.48 0.13 30)",
    },
    swatches: ["#0f0a07", "#e8dfcd", "#c46a3a"],
  },
  sodium: {
    label: "Sodium",
    css: {
      "--bg":          "oklch(0.13 0.014 80)",
      "--bg-deep":     "oklch(0.09 0.012 80)",
      "--surface":     "oklch(0.18 0.014 75)",
      "--hairline":    "oklch(0.34 0.014 80)",
      "--hairline-soft":"oklch(0.24 0.012 75)",
      "--ink":         "oklch(0.93 0.030 90)",
      "--ink-dim":     "oklch(0.78 0.028 85)",
      "--muted":       "oklch(0.58 0.020 80)",
      "--accent":      "oklch(0.78 0.16 78)",
      "--accent-deep": "oklch(0.62 0.14 76)",
    },
    swatches: ["#0b0905", "#ece1c4", "#e5b35a"],
  },
  moss: {
    label: "Moss",
    css: {
      "--bg":          "oklch(0.135 0.014 150)",
      "--bg-deep":     "oklch(0.10 0.012 150)",
      "--surface":     "oklch(0.18 0.014 145)",
      "--hairline":    "oklch(0.32 0.012 150)",
      "--hairline-soft":"oklch(0.24 0.012 145)",
      "--ink":         "oklch(0.93 0.018 95)",
      "--ink-dim":     "oklch(0.78 0.018 95)",
      "--muted":       "oklch(0.58 0.015 130)",
      "--accent":      "oklch(0.62 0.10 145)",
      "--accent-deep": "oklch(0.48 0.09 145)",
    },
    swatches: ["#0a0f0a", "#dfe6d4", "#6f8e6a"],
  },
  paper: {
    label: "Paper",
    css: {
      "--bg":          "oklch(0.94 0.012 80)",
      "--bg-deep":     "oklch(0.90 0.012 80)",
      "--surface":     "oklch(0.97 0.010 80)",
      "--hairline":    "oklch(0.62 0.010 70)",
      "--hairline-soft":"oklch(0.78 0.010 75)",
      "--ink":         "oklch(0.20 0.014 55)",
      "--ink-dim":     "oklch(0.35 0.014 55)",
      "--muted":       "oklch(0.48 0.014 60)",
      "--accent":      "oklch(0.48 0.16 32)",
      "--accent-deep": "oklch(0.38 0.14 30)",
    },
    swatches: ["#f0eadb", "#221a14", "#a8431d"],
  },
};

const TYPE_PAIRS = {
  cormorant: {
    label: "Cormorant / EB",
    css: {
      "--f-display": "\"Cormorant Garamond\", Georgia, serif",
      "--f-body":    "\"EB Garamond\", Georgia, serif",
    },
  },
  playfair: {
    label: "Playfair / Source",
    css: {
      "--f-display": "\"Playfair Display\", Georgia, serif",
      "--f-body":    "\"Source Serif 4\", Georgia, serif",
    },
  },
  spectral: {
    label: "Spectral / Crimson",
    css: {
      "--f-display": "\"Spectral\", Georgia, serif",
      "--f-body":    "\"Crimson Pro\", Georgia, serif",
    },
  },
};

/* ──────────────────────────────────────────────────────────
   Small building blocks
   ────────────────────────────────────────────────────────── */

function Marker({ children, n }) {
  // mono small caps with a thin red dot — used as section labels
  return (
    <div className="mono" style={{display:"inline-flex",alignItems:"center",gap:10,color:"var(--muted)"}}>
      <span style={{
        width:6,height:6,borderRadius:"50%",
        background:"var(--accent)",display:"inline-block",
        boxShadow:"0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent)"
      }} />
      {n && <span style={{color:"var(--accent)"}}>{n}</span>}
      <span>{children}</span>
    </div>
  );
}

function HairRule({ vertical = false, style }) {
  return (
    <span
      style={{
        background:"var(--hairline)",
        display:"block",
        ...(vertical ? {width:1, height:"100%"} : {height:1, width:"100%"}),
        ...style,
      }}
    />
  );
}

function TopNav({ onJump }) {
  const items = [
    ["story", "The Story"],
    ["pages", "Opening Pages"],
    ["voices", "From the Pages"],
    ["author", "The Author"],
  ];
  return (
    <nav style={{
      position:"sticky",top:0,zIndex:50,
      background:"color-mix(in oklch, var(--bg) 80%, transparent)",
      backdropFilter:"blur(10px) saturate(140%)",
      WebkitBackdropFilter:"blur(10px) saturate(140%)",
      borderBottom:"1px solid var(--hairline-soft)",
    }}>
      <div className="wrap" style={{
        display:"flex",alignItems:"center",justifyContent:"space-between",
        padding:"16px 40px",
        gap:24,
        whiteSpace:"nowrap",
      }}>
        <div style={{display:"flex",alignItems:"center",gap:14,whiteSpace:"nowrap"}}>
          <span style={{
            width:22,height:22,flexShrink:0,
            display:"grid",placeItems:"center",
            border:"1px solid var(--hairline)",
            color:"var(--accent)",
            fontFamily:"var(--f-display)",
            fontStyle:"italic",fontWeight:600,fontSize:14,lineHeight:1,
          }}>H</span>
          <span className="mono" style={{color:"var(--ink-dim)",whiteSpace:"nowrap"}}>The Hard Choice</span>
        </div>
        <div className="nav-links" style={{display:"flex",gap:24,whiteSpace:"nowrap"}}>
          {items.map(([id, label]) => (
            <button
              key={id}
              onClick={() => onJump(id)}
              className="mono"
              style={{color:"var(--muted)",whiteSpace:"nowrap"}}
              onMouseEnter={e=>e.currentTarget.style.color="var(--ink)"}
              onMouseLeave={e=>e.currentTarget.style.color="var(--muted)"}
            >{label}</button>
          ))}
        </div>

      </div>
      <style>{`
        @media (max-width: 1080px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ──────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────── */

function Hero({ coverTreatment }) {
  const coverClass =
    coverTreatment === "raw" ? "cover-raw" :
    coverTreatment === "mono" ? "cover-mono" : "cover-vignette";

  return (
    <section className="section" style={{paddingTop:40, paddingBottom:60}}>
      <div className="wrap">
        <div className="hero-grid" style={{
          display:"grid",
          gridTemplateColumns:"minmax(0,1.25fr) minmax(0,1fr)",
          gap:80,
          alignItems:"center",
          minHeight:"68vh",
        }}>
          {/* Title block */}
          <div>
            <p className="mono" style={{color:"var(--accent)",marginBottom:28}}>A Novel by Danny Lee Breeden</p>

            <h1 className="display" style={{
              fontSize:"clamp(64px, 10.5vw, 168px)",
              margin:"0 0 0 -0.04em",
              fontWeight:500,
            }}>
              The<br/>
              <em style={{fontStyle:"italic",fontWeight:600,color:"var(--accent)"}}>Hard</em><br/>
              Choice
            </h1>

            <div style={{display:"flex",alignItems:"center",gap:22,marginTop:44,maxWidth:560}}>
              <HairRule style={{flex:1}} />
              <span className="mono" style={{color:"var(--muted)",whiteSpace:"nowrap"}}>
                Marijuana Cultivation in Appalachia
              </span>
            </div>

            <p style={{
              marginTop:36,
              fontFamily:"var(--f-body)",
              fontSize:20,
              lineHeight:1.55,
              color:"var(--ink-dim)",
              maxWidth:"54ch",
              fontStyle:"italic",
            }}>
              Seven years inside a quiet, sometimes ugly business
              that nobody puts on the family Christmas card.
            </p>

            <div style={{display:"flex",gap:18,marginTop:44,alignItems:"center",flexWrap:"wrap"}}>
              <a href="#pages"
                 onClick={(e)=>{e.preventDefault();document.getElementById("pages").scrollIntoView({behavior:"smooth"});}}
                 className="mono"
                 style={{
                   padding:"14px 22px",
                   border:"1px solid var(--accent)",
                   background:"var(--accent)",
                   color:"var(--bg-deep)",
                   borderRadius:1,
                 }}>
                 Read the Opening
              </a>

            </div>
          </div>

          {/* Cover */}
          <div style={{position:"relative",display:"flex",justifyContent:"center"}}>
            <div style={{
              position:"absolute",
              inset:"-10% -20% -10% -20%",
              background:"radial-gradient(closest-side, color-mix(in oklch, var(--accent) 18%, transparent), transparent 70%)",
              filter:"blur(20px)",
              opacity:0.55,
              zIndex:0,
            }} />
            <img
              src="assets/cover.png"
              alt="The Hard Choice — cover"
              className={coverClass}
              style={{
                position:"relative",zIndex:1,
                width:"100%",maxWidth:420,
                height:"auto",
                borderRadius:1,
              }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   THE STORY  (synopsis, literary)
   ────────────────────────────────────────────────────────── */

function Story() {
  return (
    <section id="story" className="section" style={{borderTop:"1px solid var(--hairline-soft)"}}>
      <div className="wrap">
        <div className="two-col" style={{display:"grid",gridTemplateColumns:"180px minmax(0,1fr)",gap:60}}>
          <div>
            <Marker n="§ 01">The Story</Marker>
          </div>
          <div style={{maxWidth:"66ch"}}>
            <p className="display-it" style={{
              fontSize:"clamp(36px, 4.6vw, 64px)",
              margin:0,
              color:"var(--ink)",
            }}>
              He wasn't built to be a thief.<br/>
              <span style={{color:"var(--muted)"}}>But the math kept doing itself.</span>
            </p>

            <div style={{height:48}} />

            <p className="dropcap" style={{
              fontSize:21,
              lineHeight:1.6,
              color:"var(--ink)",
              margin:"0 0 28px 0",
            }}>{SYNOPSIS}</p>

            <p style={{
              fontSize:21,
              lineHeight:1.6,
              color:"var(--ink-dim)",
              margin:0,
              maxWidth:"60ch",
            }}>{SYNOPSIS_2}</p>

            <div className="stat-strip" style={{
              marginTop:56,
              display:"grid",
              gridTemplateColumns:"repeat(3, 1fr)",
              borderTop:"1px solid var(--hairline-soft)",
              borderBottom:"1px solid var(--hairline-soft)",
            }}>
              {[
                ["Seven", "years"],
                ["236", "pages"],
                ["1949", "born in WV"],
              ].map(([num, label], i) => (
                <div key={i} style={{
                  padding:"22px 18px",
                  borderRight: i<2 ? "1px solid var(--hairline-soft)" : "none",
                }}>
                  <div className="display" style={{fontSize:36,color:"var(--ink)",lineHeight:1}}>{num}</div>
                  <div className="mono-sm" style={{color:"var(--muted)",marginTop:8}}>{label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   OPENING PAGES — paginated reader
   ────────────────────────────────────────────────────────── */

function Reader() {
  const [idx, setIdx] = useState(0);
  const total = OPENING_PAGES.length;
  const current = OPENING_PAGES[idx];

  const go = (d) => setIdx((i) => Math.max(0, Math.min(total - 1, i + d)));

  // keyboard nav when reader is in view
  const containerRef = useRef(null);
  useEffect(() => {
    const onKey = (e) => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      const inView = rect.top < window.innerHeight && rect.bottom > 0;
      if (!inView) return;
      if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
      if (e.key === "ArrowLeft")  { e.preventDefault(); go(-1); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <section id="pages" className="section" ref={containerRef}
             style={{borderTop:"1px solid var(--hairline-soft)", background:"var(--bg-deep)"}}>
      <div className="wrap">
        <div className="two-col" style={{display:"grid",gridTemplateColumns:"180px minmax(0,1fr)",gap:60,marginBottom:48}}>
          <Marker n="§ 02">Opening Pages</Marker>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:20,flexWrap:"wrap"}}>
            <h2 className="display" style={{
              fontSize:"clamp(36px,4.4vw,60px)",
              margin:0,lineHeight:0.98,
            }}>
              Chapter One — <span style={{fontStyle:"italic",color:"var(--muted)"}}>first three pages.</span>
            </h2>
            <a
              href="https://thehardchoice.com/sample-chapter.pdf"
              target="_blank" rel="noreferrer"
              className="mono"
              style={{color:"var(--accent)",borderBottom:"1px solid var(--accent-deep)"}}
            >Download full sample (PDF) ↓</a>
          </div>
        </div>

        {/* Book frame */}
        <div style={{
          position:"relative",
          background:"var(--surface)",
          border:"1px solid var(--hairline-soft)",
          borderRadius:2,
          boxShadow:
            "0 1px 0 rgba(255,255,255,0.03) inset, "+
            "0 40px 80px -40px rgba(0,0,0,0.6)",
          padding:"56px clamp(40px, 7vw, 96px) 36px",
          minHeight:520,
          maxWidth:920,
          margin:"0 auto",
        }}>
          {/* spine indicator */}
          <div style={{
            position:"absolute",
            left:"50%", top:24, bottom:24, width:1,
            background:"var(--hairline-soft)", opacity:0.4,
            display:"none",
          }} />

          {/* running header */}
          <div className="reader-running" style={{
            display:"flex",justifyContent:"space-between",alignItems:"center",
            marginBottom:42, paddingBottom:14,gap:10,flexWrap:"wrap",
            borderBottom:"1px solid var(--hairline-soft)",
          }}>
            <span className="mono-sm" style={{color:"var(--muted)"}}>The Hard Choice</span>
            <span className="mono-sm" style={{color:"var(--muted)"}}>Chapter One · {current.label}</span>
            <span className="mono-sm" style={{color:"var(--muted)"}}>{current.page}</span>
          </div>

          {/* content */}
          <div className="reader-page" key={idx} style={{
            animation:"pageFade .42s ease both",
          }}>
            {current.body.map((p, i) => (
              <p key={i}
                 className={i===0 && idx===0 ? "dropcap" : ""}
                 style={{
                   fontSize:22,
                   lineHeight:1.72,
                   color:"var(--ink)",
                   margin: i===0 ? "0 0 22px" : "0 0 22px",
                   textAlign:"justify",
                   hyphens:"auto",
                 }}>{p}</p>
            ))}

            {idx === total - 1 && (
              <div style={{
                marginTop:36,paddingTop:24,
                borderTop:"1px solid var(--hairline-soft)",
                display:"flex",alignItems:"center",justifyContent:"space-between",gap:18,flexWrap:"wrap",
              }}>
                <span className="mono-sm" style={{color:"var(--muted)"}}>End of preview</span>
                <a
                  href="https://thehardchoice.com/sample-chapter.pdf"
                  target="_blank" rel="noreferrer"
                  className="mono"
                  style={{
                    padding:"10px 16px",
                    border:"1px solid var(--accent)",
                    color:"var(--accent)",
                    borderRadius:1,
                  }}
                >Continue reading (PDF) →</a>
              </div>
            )}
          </div>

          {/* footer */}
          <div style={{
            marginTop:36, paddingTop:14,
            borderTop:"1px solid var(--hairline-soft)",
            display:"flex",justifyContent:"space-between",alignItems:"center",gap:14,
          }}>
            <button
              onClick={() => go(-1)}
              disabled={idx === 0}
              className="mono"
              style={{
                padding:"10px 14px",
                color: idx === 0 ? "var(--muted-deep)" : "var(--ink)",
                border:"1px solid var(--hairline)",
                opacity: idx === 0 ? 0.45 : 1,
                cursor: idx === 0 ? "not-allowed" : "pointer",
              }}
            >← Previous</button>

            <div style={{display:"flex",gap:10,alignItems:"center"}}>
              {OPENING_PAGES.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setIdx(i)}
                  aria-label={"Go to page " + (i+1)}
                  style={{
                    width: i === idx ? 28 : 8,
                    height: 4,
                    background: i === idx ? "var(--accent)" : "var(--hairline)",
                    transition: "width .3s",
                    cursor: "pointer",
                    border:0,
                    borderRadius:0,
                  }}
                />
              ))}
            </div>

            <button
              onClick={() => go(1)}
              disabled={idx === total - 1}
              className="mono"
              style={{
                padding:"10px 14px",
                color: idx === total - 1 ? "var(--muted-deep)" : "var(--ink)",
                border:"1px solid var(--hairline)",
                opacity: idx === total - 1 ? 0.45 : 1,
                cursor: idx === total - 1 ? "not-allowed" : "pointer",
              }}
            >Next →</button>
          </div>
        </div>

        <p className="mono-sm" style={{
          color:"var(--muted)",
          textAlign:"center",marginTop:24,
        }}>
          ← → keyboard arrows to turn the page
        </p>
      </div>

      <style>{`
        @keyframes pageFade {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   FROM THE PAGES — quote carousel
   ────────────────────────────────────────────────────────── */

function Excerpts() {
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const total = EXCERPTS.length;

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % total), 6500);
    return () => clearInterval(t);
  }, [paused, total]);

  return (
    <section id="voices" className="section"
             style={{borderTop:"1px solid var(--hairline-soft)"}}>
      <div className="wrap">
        <div className="two-col" style={{display:"grid",gridTemplateColumns:"180px minmax(0,1fr)",gap:60}}>
          <Marker n="§ 03">From the Pages</Marker>

          <div
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
            style={{position:"relative",minHeight:340}}
          >
            <div style={{
              position:"absolute",
              top:-20,left:-6,
              fontFamily:"var(--f-display)",
              fontStyle:"italic",fontWeight:600,
              fontSize:200,lineHeight:0.7,
              color:"var(--accent)",opacity:0.18,
              pointerEvents:"none",
              userSelect:"none",
            }}>“</div>

            <div style={{position:"relative",minHeight:240}}>
              {EXCERPTS.map((q, i) => (
                <blockquote
                  key={i}
                  style={{
                    position: i === idx ? "relative" : "absolute",
                    inset: i === idx ? "auto" : 0,
                    opacity: i === idx ? 1 : 0,
                    transition:"opacity .6s ease",
                    margin:0,
                    pointerEvents: i === idx ? "auto" : "none",
                  }}
                >
                  <p className="display-it" style={{
                    fontSize:"clamp(28px,3.6vw,48px)",
                    lineHeight:1.18,
                    color:"var(--ink)",
                    margin:"0 0 28px 0",
                    maxWidth:"24ch",
                  }}>
                    {q.quote}
                  </p>
                  <footer className="mono-sm" style={{color:"var(--muted)"}}>
                    — {q.cite}
                  </footer>
                </blockquote>
              ))}
            </div>

            <div style={{
              marginTop:48,
              display:"flex",alignItems:"center",gap:18,
            }}>
              <button
                onClick={() => setIdx((i) => (i - 1 + total) % total)}
                className="mono"
                style={{
                  width:40,height:40,
                  border:"1px solid var(--hairline)",
                  color:"var(--ink-dim)",
                  display:"grid",placeItems:"center",
                }}
                aria-label="Previous excerpt"
              >←</button>
              <button
                onClick={() => setIdx((i) => (i + 1) % total)}
                className="mono"
                style={{
                  width:40,height:40,
                  border:"1px solid var(--hairline)",
                  color:"var(--ink-dim)",
                  display:"grid",placeItems:"center",
                }}
                aria-label="Next excerpt"
              >→</button>
              <span className="mono-sm" style={{color:"var(--muted)",marginLeft:8}}>
                {String(idx + 1).padStart(2,"0")} / {String(total).padStart(2,"0")}
              </span>

              <div style={{flex:1,marginLeft:18,display:"flex",gap:8}}>
                {EXCERPTS.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setIdx(i)}
                    aria-label={"Excerpt " + (i+1)}
                    style={{
                      flex:1,
                      height:2,
                      background: i === idx ? "var(--accent)" : "var(--hairline)",
                      border:0,padding:0,cursor:"pointer",
                      transition:"background .3s",
                    }}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   THE AUTHOR
   ────────────────────────────────────────────────────────── */

function Author() {
  return (
    <section id="author" className="section"
             style={{borderTop:"1px solid var(--hairline-soft)", background:"var(--bg-deep)"}}>
      <div className="wrap">
        <div className="two-col" style={{display:"grid",gridTemplateColumns:"180px minmax(0,1fr)",gap:60}}>
          <Marker n="§ 04">The Author</Marker>

          <div className="author-grid" style={{display:"grid",gridTemplateColumns:"minmax(0,1.5fr) minmax(0,1fr)",gap:80,alignItems:"start"}}>
            <div>
              <p className="mono" style={{color:"var(--accent)",marginBottom:24}}>Danny Lee Breeden</p>
              <h2 className="display" style={{
                fontSize:"clamp(40px,5vw,72px)",
                margin:"0 0 36px",
                lineHeight:1,
              }}>
                Danny Breeden was born in Charleston, West Virginia, in 1949.
              </h2>

              {BIO.map((p, i) => (
                <p key={i} style={{
                  fontSize:19,
                  lineHeight:1.65,
                  color: i === 0 ? "var(--ink)" : "var(--ink-dim)",
                  margin:"0 0 20px",
                  maxWidth:"60ch",
                }}>{p}</p>
              ))}

              <div style={{
                marginTop:36,
                display:"flex",gap:24,flexWrap:"wrap",
                paddingTop:24,borderTop:"1px solid var(--hairline-soft)",
              }}>
                {[
                  ["Born", "Charleston, WV · 1949"],
                  ["Day jobs", "Corrections · Construction"],
                ].map(([k,v]) => (
                  <div key={k} style={{minWidth:140}}>
                    <div className="mono-sm" style={{color:"var(--muted)"}}>{k}</div>
                    <div style={{fontSize:16,marginTop:4,color:"var(--ink)"}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{position:"relative"}}>
              <div style={{
                position:"absolute",
                top:18,left:18,right:-18,bottom:-18,
                border:"1px solid var(--accent-deep)",
                opacity:0.5,
              }} />
              <img
                src="assets/author.png"
                alt="Danny Lee Breeden"
                style={{
                  position:"relative",
                  width:"100%",
                  height:"auto",
                  display:"block",
                  filter:"grayscale(0.85) contrast(1.05)",
                  boxShadow:"0 20px 50px -20px rgba(0,0,0,0.6)",
                }}
              />
              <div style={{
                position:"relative",
                marginTop:14,
                display:"flex",justifyContent:"space-between",
              }}>
                <span className="mono-sm" style={{color:"var(--muted)"}}>Danny Lee Breeden</span>
                <span className="mono-sm" style={{color:"var(--muted)"}}>Photograph</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   BUY
   ────────────────────────────────────────────────────────── */

function Buy() {
  return (
    <section id="buy" className="section"
             style={{borderTop:"1px solid var(--hairline-soft)"}}>
      <div className="wrap">
        <div style={{display:"grid",gridTemplateColumns:"180px minmax(0,1fr)",gap:60,marginBottom:60}}>
          <Marker n="§ 05">Where to Find It</Marker>
          <div>
            <h2 className="display" style={{
              fontSize:"clamp(40px,5vw,72px)",
              margin:0,lineHeight:1,
            }}>
              Carry it home. <em style={{fontStyle:"italic",color:"var(--accent)"}}>Paperback or e-book.</em>
            </h2>
            <p style={{
              marginTop:18,fontSize:19,color:"var(--ink-dim)",maxWidth:"58ch",
              lineHeight:1.55,
            }}>
              Available at the usual booksellers and a few of the less usual ones.
              The Kindle edition reads cleanest on a long bus ride.
            </p>
          </div>
        </div>

        <div style={{
          display:"grid",
          gridTemplateColumns:"repeat(auto-fit, minmax(260px, 1fr))",
          gap: 0,
          borderTop:"1px solid var(--hairline-soft)",
          borderLeft:"1px solid var(--hairline-soft)",
        }}>
          {RETAILERS.map((r) => (
            <a
              key={r.name}
              href={r.href}
              target="_blank" rel="noreferrer"
              style={{
                padding:"30px 28px",
                borderRight:"1px solid var(--hairline-soft)",
                borderBottom:"1px solid var(--hairline-soft)",
                display:"flex",alignItems:"center",justifyContent:"space-between",
                gap:18,
                transition:"background .25s, color .25s",
                color:"var(--ink)",
              }}
              onMouseEnter={e => {
                e.currentTarget.style.background = "var(--surface)";
                e.currentTarget.querySelector(".arrow").style.color = "var(--accent)";
                e.currentTarget.querySelector(".arrow").style.transform = "translateX(4px)";
              }}
              onMouseLeave={e => {
                e.currentTarget.style.background = "transparent";
                e.currentTarget.querySelector(".arrow").style.color = "var(--muted)";
                e.currentTarget.querySelector(".arrow").style.transform = "translateX(0)";
              }}
            >
              <div>
                <div className="display" style={{fontSize:26,lineHeight:1.05}}>{r.name}</div>
                <div className="mono-sm" style={{color:"var(--muted)",marginTop:8}}>{r.note}</div>
              </div>
              <span className="arrow mono" style={{
                color:"var(--muted)",
                transition:"transform .25s, color .25s",
              }}>↗</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="section" style={{
      borderTop:"1px solid var(--hairline-soft)",
      background:"var(--bg-deep)",
      paddingTop:80, paddingBottom:60,
    }}>
      <div className="wrap">
        <div className="footer-grid" style={{
          display:"grid",
          gridTemplateColumns:"minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)",
          gap:60,
        }}>
          <div>
            <p className="display-it" style={{
              fontSize:"clamp(32px,3.4vw,46px)",
              margin:0,
              maxWidth:"22ch",
              color:"var(--ink)",
              lineHeight:1.08,
            }}>
              Write to the author. <span style={{color:"var(--muted)"}}>He answers.</span>
            </p>
            <a
              href="mailto:author@thehardchoice.com"
              className="mono"
              style={{
                display:"inline-block",marginTop:30,
                padding:"14px 22px",
                border:"1px solid var(--accent)",
                color:"var(--accent)",
              }}
            >author@thehardchoice.com →</a>
          </div>

          <div>
            <div className="mono-sm" style={{color:"var(--muted)",marginBottom:16}}>Read</div>
            <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:10}}>
              {[
                ["#story","The Story"],
                ["#pages","Opening Pages"],
                ["#voices","From the Pages"],
                ["#author","The Author"],
              ].map(([href,label]) => (
                <li key={href}>
                  <a href={href} style={{color:"var(--ink-dim)",borderBottom:"1px solid transparent"}}
                     onMouseEnter={e=>e.currentTarget.style.borderColor="var(--accent)"}
                     onMouseLeave={e=>e.currentTarget.style.borderColor="transparent"}>
                    {label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div className="mono-sm" style={{color:"var(--muted)",marginBottom:16}}>Particulars</div>
            <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:10,color:"var(--ink-dim)",fontSize:16}}>
              <li>ISBN 978-1-60474-564-1</li>
              <li>236 pages · Paperback</li>
              <li>Kindle · DRM-free PDF</li>
              <li>First edition · 2008</li>
            </ul>
          </div>
        </div>

        <div style={{
          marginTop:80,paddingTop:24,
          borderTop:"1px solid var(--hairline-soft)",
          display:"flex",justifyContent:"space-between",alignItems:"center",gap:18,flexWrap:"wrap",
        }}>
          <span className="mono-sm" style={{color:"var(--muted)"}}>
            © 2008–2026 Danny Lee Breeden. All rights reserved.
          </span>
          <span className="mono-sm" style={{color:"var(--muted)"}}>
            The Hard Choice — a novel about marijuana cultivation in Appalachia.
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ──────────────────────────────────────────────────────────
   APP
   ────────────────────────────────────────────────────────── */

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply palette / typepair to :root
  useEffect(() => {
    const pal = PALETTES[t.palette] || PALETTES.ember;
    const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.cormorant;
    const root = document.documentElement;
    Object.entries(pal.css).forEach(([k,v]) => root.style.setProperty(k, v));
    Object.entries(pair.css).forEach(([k,v]) => root.style.setProperty(k, v));
    document.body.dataset.density = t.density;
    document.body.style.setProperty("--grain-opacity", t.showGrain ? "0.6" : "0");
  }, [t.palette, t.typePair, t.density, t.showGrain]);

  // toggle grain via inline style override
  useEffect(() => {
    let style = document.getElementById("__grain-toggle");
    if (!style) {
      style = document.createElement("style");
      style.id = "__grain-toggle";
      document.head.appendChild(style);
    }
    style.textContent = t.showGrain
      ? ""
      : "body::before{display:none!important}";
  }, [t.showGrain]);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({behavior:"smooth", block:"start"});
  };

  return (
    <>
      <TopNav onJump={jump} />
      <main>
        <Hero coverTreatment={t.coverTreatment} />
        <Story />
        <Reader />
        <Excerpts />
        <Author />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Mood" />
        <TweakRadio
          label="Palette"
          value={t.palette}
          options={["ember","sodium","moss","paper"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakRadio
          label="Cover treatment"
          value={t.coverTreatment}
          options={["vignette","raw","mono"]}
          onChange={(v) => setTweak("coverTreatment", v)}
        />
        <TweakToggle
          label="Film grain"
          value={t.showGrain}
          onChange={(v) => setTweak("showGrain", v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Type pairing"
          value={t.typePair}
          options={Object.entries(TYPE_PAIRS).map(([k,v]) => ({value:k, label:v.label}))}
          onChange={(v) => setTweak("typePair", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact","regular","airy"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </>
  );
}

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