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

/* ---- Icons ---- */
const Icon = {
  Search: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
  ),
  Arrow: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  ),
  ArrowSm: () => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  ),
  Pin: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  Rate: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
  ),
  Shift: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M16 3h5v5"/><path d="M4 20 21 3"/><path d="M21 16v5h-5"/><path d="m15 15 6 6"/><path d="M4 4l5 5"/></svg>
  ),
  Trend: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m3 17 6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
  ),
  Play: () => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
  ),
  Check: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
  ),
  Key: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="14" r="4"/><path d="m11 11 9-9"/><path d="m17 5 3 3"/><path d="m14 8 3 3"/></svg>
  ),
  Home: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m3 10 9-7 9 7v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2Z"/></svg>
  ),
  Chart: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 16v-4M12 16V8M17 16v-2"/></svg>
  ),
  Calc: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M8 6h8M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01M8 19h8"/></svg>
  ),
};

const sideIconMap = { rate: <Icon.Rate />, shift: <Icon.Shift />, trend: <Icon.Trend /> };
const guideIconMap = { key: <Icon.Key />, home: <Icon.Home />, chart: <Icon.Chart />, calc: <Icon.Calc /> };

/* ---- Reveal hook (IntersectionObserver) ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---- Sparkline svg ---- */
function Spark({ trend }) {
  const paths = {
    up:   "M2 18 L12 15 L22 12 L32 9 L42 11 L52 5 L58 3",
    down: "M2 4 L12 7 L22 6 L32 11 L42 14 L52 13 L58 17",
    flat: "M2 12 L12 11 L22 13 L32 12 L42 11 L52 12 L58 11",
  };
  return (
    <svg className="trend-spark" viewBox="0 0 60 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[trend] || paths.flat} />
    </svg>
  );
}

/* ---- Map placeholder svg ---- */
function MapPlaceholder({ seed = 1 }) {
  // pseudo-random street pattern
  const streets = [];
  for (let i = 0; i < 6; i++) {
    const y = 12 + ((seed * 13 + i * 17) % 90);
    streets.push(<line key={"h"+i} x1="0" y1={y} x2="280" y2={y} />);
  }
  for (let i = 0; i < 8; i++) {
    const x = 10 + ((seed * 23 + i * 29) % 270);
    streets.push(<line key={"v"+i} x1={x} y1="0" x2={x} y2="120" />);
  }
  return (
    <svg viewBox="0 0 280 120" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
      <rect width="280" height="120" fill="var(--bg-2)" />
      <g stroke="var(--line)" strokeWidth="1" opacity="0.7">{streets}</g>
      <g stroke="var(--accent)" strokeWidth="1.4" opacity="0.5">
        <line x1={(seed*7)%200+30} y1="20" x2={(seed*7)%200+30} y2="100" />
        <line x1="20" y1={40+(seed*11)%40} x2="260" y2={40+(seed*11)%40} />
      </g>
      <circle cx={140 + (seed*9)%80 - 40} cy={60 + (seed*5)%30 - 15} r="5" fill="var(--accent)" opacity="0.95" />
      <circle cx={140 + (seed*9)%80 - 40} cy={60 + (seed*5)%30 - 15} r="11" fill="var(--accent)" opacity="0.18" />
    </svg>
  );
}

/* ---- HEADER ---- */
function Header({ data }) {
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#" className="brand" aria-label={data.brand.name}>
          <span className="brand-mark">{data.brand.mark}</span>
          <span>{data.brand.name}</span>
        </a>
        <nav className="nav">
          {data.nav.map((n) => (
            <a key={n.label} href={n.href} className={n.active ? "active" : ""}>{n.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <button className="search-btn" aria-label="Search"><Icon.Search /></button>
          <button className="btn btn-ghost btn-sm" style={{ display: "inline-flex" }}>Sign in</button>
          <button className="btn btn-primary btn-sm">Book consultation <Icon.ArrowSm /></button>
        </div>
      </div>
    </header>
  );
}

/* ---- UTILITY BAR ---- */
function Utility({ data }) {
  const today = new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" });
  return (
    <div className="utility">
      <div className="container utility-inner">
        <div className="utility-left">
          <span><Icon.Pin /> &nbsp;{data.brand.location}</span>
          <span style={{ color: "var(--ink-4)" }}>·</span>
          <span>{today}</span>
        </div>
        <div className="utility-right">
          <span><span className="live-dot"></span>Market data updated 12 min ago</span>
          <a href="#">Newsletter</a>
          <a href="#">Market Reports ↗</a>
        </div>
      </div>
    </div>
  );
}

/* ---- HERO ---- */
function Hero({ data }) {
  const deltaClass = (t) => t === "up" || t === "down-good" ? "delta-up" : t === "down" ? "delta-down" : "delta-flat";
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <a className="hero-feature reveal" href="#">
            <div className="img" style={{ backgroundImage: `url(${data.hero.img})` }}></div>
            <div className="hero-content">
              <span className="hero-tag">{data.hero.tag}</span>
              <h1 className="hero-title">{data.hero.title}</h1>
              <div className="hero-meta">
                <span>{data.hero.author}</span>
                <span className="dot"></span>
                <span>{data.hero.date}</span>
                <span className="dot"></span>
                <span>{data.hero.readTime}</span>
              </div>
            </div>
          </a>
          <div className="hero-side">
            {data.side.map((s, i) => (
              <a className="side-card reveal" data-delay={i+1} href="#" key={s.kicker}>
                <div className="side-icon">{sideIconMap[s.icon]}</div>
                <div className="side-body">
                  <div className="side-kicker">{s.kicker}</div>
                  <h3 className="side-title">{s.title}</h3>
                  <div className="side-stat">
                    <span className="num">{s.stat}</span>
                    <span className={`delta ${deltaClass(s.deltaType)}`}>{s.delta}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 6 }}>{s.sub}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- INSIGHTS ---- */
function Insights({ data }) {
  return (
    <section className="section" id="insights">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Latest</span>
            <h2 className="h-title">Market Insights</h2>
            <p className="section-sub">Briefings, analysis, and field notes from the Greater Seattle housing market — refreshed weekly.</p>
          </div>
          <a className="section-link" href="#">View all insights <Icon.ArrowSm /></a>
        </div>
        <div className="insights-grid">
          {data.insights.map((c, i) => (
            <a className="card reveal" data-delay={(i % 3) + 1} href="#" key={c.title}>
              <div className="card-img">
                <div className="img" style={{ backgroundImage: `url(${c.img})` }}></div>
                <span className="card-cat">{c.cat}</span>
              </div>
              <div className="card-meta">
                <span>{c.author}</span>
                <span className="dot"></span>
                <span>{c.date}</span>
                <span className="dot"></span>
                <span>{c.read}</span>
              </div>
              <h3 className="card-title">{c.title}</h3>
              <p className="card-excerpt">{c.excerpt}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- NEIGHBORHOODS ---- */
function Neighborhoods({ data }) {
  return (
    <section className="section hood-bg" id="neighborhoods">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Hyperlocal</span>
            <h2 className="h-title">Neighborhood Updates</h2>
            <p className="section-sub">Median prices, days on market, and active inventory across the neighborhoods our buyers and sellers ask about most.</p>
          </div>
          <a className="section-link" href="#">All neighborhoods <Icon.ArrowSm /></a>
        </div>
        <div className="hood-grid">
          {data.neighborhoods.map((h, i) => (
            <a className="hood-card reveal" data-delay={(i % 4) + 1} href="#" key={h.name}>
              <div className="hood-map"><MapPlaceholder seed={i + 3} /></div>
              <h3 className="hood-name">{h.name}</h3>
              <div className="hood-loc">{h.loc} · {h.listings} active</div>
              <div className="hood-stats">
                <div>
                  <div className="hood-stat-label">Median</div>
                  <div className="hood-stat-val">
                    {h.median} <span className={`trend ${h.up ? "trend-up" : "trend-down"}`}>{h.medianTrend}</span>
                  </div>
                </div>
                <div>
                  <div className="hood-stat-label">Days on market</div>
                  <div className="hood-stat-val">
                    {h.dom} <span className={`trend ${h.domUp ? "trend-up" : "trend-down"}`}>{h.domTrend}</span>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- GUIDES ---- */
function Guides({ data }) {
  return (
    <section className="section" id="guides">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Education</span>
            <h2 className="h-title">Buyer & Seller Guides</h2>
            <p className="section-sub">Long-form playbooks built from a decade of local transactions. Free, ungated, and updated annually.</p>
          </div>
          <a className="section-link" href="#">Guide library <Icon.ArrowSm /></a>
        </div>
        <div className="guides-grid">
          {data.guides.map((g, i) => (
            <a className="guide-card reveal" data-delay={(i % 2) + 1} href="#" key={g.title}>
              <div className="guide-cover">
                <span className="label">{g.tag}</span>
                {guideIconMap[g.icon]}
                <span className="pages">{g.pages}</span>
              </div>
              <div>
                <div className="guide-tag">{g.tag} · Guide</div>
                <h3 className="guide-title">{g.title}</h3>
                <p className="guide-desc">{g.desc}</p>
                <div className="guide-foot">
                  <span style={{ color: "var(--accent)", fontWeight: 600 }}>{g.read} <Icon.ArrowSm /></span>
                  <span>PDF · {g.pages}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- TRENDING ---- */
function Trending({ data }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">This Week</span>
            <h2 className="h-title">Trending Now in Real Estate</h2>
            <p className="section-sub">The reads and topics climbing fastest with our local subscriber base.</p>
          </div>
          <a className="section-link" href="#">View leaderboard <Icon.ArrowSm /></a>
        </div>
        <div className="trending-grid">
          {data.trending.map((t, i) => (
            <a className="trend-row reveal" data-delay={(i % 4) + 1} href="#" key={t.title}>
              <div className="trend-rank">{String(i + 1).padStart(2, "0")}</div>
              <div className="trend-body">
                <div className="trend-cat">{t.cat}</div>
                <h4 className="trend-title">{t.title}</h4>
                <div className="trend-meta">{t.read}</div>
              </div>
              <Spark trend={t.spark} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- VIDEO ---- */
function VideoSection({ data }) {
  const v = data.videos;
  return (
    <section className="section video-bg" id="reports">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Featured Insight</span>
            <h2 className="h-title">Market video briefings</h2>
            <p className="section-sub">Twice-monthly explainers — concise, charted, no hype.</p>
          </div>
          <a className="section-link" style={{ color: "white" }} href="#">All videos <Icon.ArrowSm /></a>
        </div>
        <div className="video-grid">
          <a className="video-main reveal" href="#">
            <div className="img" style={{ backgroundImage: `url(${v.feature.img})` }}></div>
            <div className="play-btn"><Icon.Play /></div>
            <div className="video-info">
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", opacity: .8 }}>{v.feature.duration} · {v.feature.author}</div>
              <div className="vt">{v.feature.title}</div>
            </div>
          </a>
          <div className="video-side reveal" data-delay="2">
            <h4>Up Next</h4>
            {v.list.map((it) => (
              <a className="video-item" href="#" key={it.title}>
                <div className="video-thumb" style={{ backgroundImage: `url(${it.img})` }}></div>
                <div>
                  <div className="video-it-title">{it.title}</div>
                  <div className="video-it-meta">{it.duration} · {it.date}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- TOPICS ---- */
function Topics({ data }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Topic Authority</span>
            <h2 className="h-title">Local Authority Topics</h2>
            <p className="section-sub">Subjects we publish, optimize, and answer for — built to surface in AI search and local discovery.</p>
          </div>
          <a className="section-link" href="#">Browse all topics <Icon.ArrowSm /></a>
        </div>
        <div className="topics-grid">
          {Object.entries(data.topics).map(([col, list], i) => (
            <div className="topic-col reveal" data-delay={i + 1} key={col}>
              <h4>{col}</h4>
              <div className="topic-chips">
                {list.map(([label, count]) => (
                  <a className="chip" href="#" key={label}>{label}<span className="count">{count}</span></a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- NEWSLETTER ---- */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [zip, setZip] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); if (email) setSent(true); };
  return (
    <section className="section newsletter-bg">
      <div className="container">
        <div className="newsletter-grid">
          <div className="reveal">
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Weekly Briefing</span>
            <h2 className="h-title">Get the local market briefing</h2>
            <p className="section-sub">A 4-minute Sunday read on inventory, rates, and the neighborhood signals that actually matter — written by a working broker, not an algorithm.</p>
            <div className="nl-perks">
              <span><Icon.Check /> Hyperlocal data</span>
              <span><Icon.Check /> No spam, ever</span>
              <span><Icon.Check /> Unsubscribe anytime</span>
            </div>
          </div>
          <form className="newsletter-form reveal" data-delay="2" onSubmit={submit}>
            {sent ? (
              <div style={{ padding: "20px 4px", color: "white" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 8 }}>You're in.</div>
                <div style={{ color: "rgba(255,255,255,.75)" }}>Check your inbox — first briefing arrives Sunday morning.</div>
              </div>
            ) : (
              <>
                <div className="nl-row">
                  <input className="nl-input nl-zip" placeholder="ZIP code" value={zip} onChange={(e)=>setZip(e.target.value)}/>
                  <input className="nl-input" type="email" placeholder="you@email.com" value={email} onChange={(e)=>setEmail(e.target.value)}/>
                </div>
                <button className="nl-btn" type="submit">Subscribe — it's free</button>
                <div style={{ fontSize: 12, color: "rgba(255,255,255,.7)", marginTop: 4 }}>
                  Joining 8,400+ Seattle-area homeowners, buyers, and agents.
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ---- CTA ---- */
function CTA() {
  return (
    <section className="section cta-bg">
      <div className="container">
        <div className="cta-card reveal">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.7)" }}>Work with us</span>
            <h2 className="h-title">Stay visible where buyers and sellers are searching.</h2>
            <p className="section-sub">Whether you're listing this quarter or planning a move next year — start with a 30-minute strategy call. No pitch, just data on your block, your timing, and your numbers.</p>
            <div className="cta-actions">
              <a className="btn btn-primary" href="#">Book a consultation <Icon.Arrow /></a>
              <a className="btn btn-ghost" style={{ color: "white", borderColor: "rgba(255,255,255,.3)" }} href="#">See client outcomes</a>
            </div>
          </div>
          <div className="cta-stats">
            <div>
              <div className="cta-stat-num"><span className="accent">412</span></div>
              <div className="cta-stat-lbl">Local transactions closed since 2014</div>
            </div>
            <div>
              <div className="cta-stat-num">98<span style={{ fontSize: 22, marginLeft: 2 }}>%</span></div>
              <div className="cta-stat-lbl">List-to-sale price ratio, 12-mo avg</div>
            </div>
            <div>
              <div className="cta-stat-num"><span className="accent">14</span></div>
              <div className="cta-stat-lbl">Median days from list to pending</div>
            </div>
            <div>
              <div className="cta-stat-num">4.9<span style={{ fontSize: 22, marginLeft: 2 }}>/5</span></div>
              <div className="cta-stat-lbl">Client satisfaction across 218 reviews</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- FOOTER ---- */
function Footer({ data }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand">
              <span className="brand-mark">{data.brand.mark}</span>
              <span>{data.brand.name}</span>
            </div>
            <p className="footer-tag">{data.brand.tagline}</p>
            <div className="contact-line">
              <span>1402 NW Market St, Seattle, WA</span>
            </div>
            <div className="contact-line">
              <span>(206) 555-0148</span>
              <span>hello@yourbrand.re</span>
            </div>
          </div>
          <div>
            <h5>Listings</h5>
            <ul>
              <li><a href="#">Featured listings</a></li>
              <li><a href="#">Open houses this week</a></li>
              <li><a href="#">Coming soon</a></li>
              <li><a href="#">Recently sold</a></li>
              <li><a href="#">Search by map</a></li>
            </ul>
          </div>
          <div>
            <h5>Neighborhoods</h5>
            <ul>
              <li><a href="#">Ballard</a></li>
              <li><a href="#">Capitol Hill</a></li>
              <li><a href="#">Queen Anne</a></li>
              <li><a href="#">West Seattle</a></li>
              <li><a href="#">All neighborhoods</a></li>
            </ul>
          </div>
          <div>
            <h5>Market Reports</h5>
            <ul>
              <li><a href="#">Weekly briefing</a></li>
              <li><a href="#">Monthly snapshot</a></li>
              <li><a href="#">Quarterly outlook</a></li>
              <li><a href="#">Buyer/seller guides</a></li>
              <li><a href="#">Mortgage rate tracker</a></li>
            </ul>
          </div>
          <div>
            <h5>Connect</h5>
            <ul>
              <li><a href="#">Book a consultation</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">For agents</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2025 {data.brand.name}. WA Lic. #20193847. Equal Housing Opportunity.</div>
          <div className="social">
            <a href="#" aria-label="Instagram"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="18" cy="6" r="1" fill="currentColor"/></svg></a>
            <a href="#" aria-label="LinkedIn"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8.3 18H5.7v-8.6h2.6V18zM7 8.3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM18.3 18h-2.6v-4.6c0-1.1 0-2.5-1.5-2.5s-1.7 1.2-1.7 2.4V18H9.9v-8.6h2.5v1.2c.3-.6 1.2-1.4 2.6-1.4 2.7 0 3.3 1.8 3.3 4.1V18z"/></svg></a>
            <a href="#" aria-label="YouTube"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23 7s-.2-1.6-.9-2.3c-.8-.9-1.7-.9-2.1-1C17 3.5 12 3.5 12 3.5s-5 0-8 .2c-.4 0-1.3 0-2.1 1C1.2 5.4 1 7 1 7S.8 8.9.8 10.7v1.6c0 1.9.2 3.7.2 3.7s.2 1.6.9 2.3c.8.9 1.9.9 2.4 1 1.7.2 7.7.2 7.7.2s5 0 8-.2c.4 0 1.3 0 2.1-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.7v-1.6C23.2 8.9 23 7 23 7zM9.7 14.6V8.4l6.4 3.1-6.4 3.1z"/></svg></a>
            <a href="#" aria-label="X"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
            <a href="#" aria-label="Facebook"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H8v-2.9h2.4V9.8c0-2.3 1.4-3.6 3.5-3.6 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.5.7-1.5 1.5v1.8h2.6l-.4 2.9h-2.2v7A10 10 0 0 0 22 12z"/></svg></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---- APP ---- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Modern Navy",
  "showStickyCTA": true,
  "brandName": "Your Brand",
  "brandMark": "YB",
  "brandTagline": "Local Market Intelligence for the Greater Seattle Area. Independent, broker-owned, locally rooted since 2014."
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const baseData = window.SITE_DATA;
  const data = {
    ...baseData,
    brand: {
      ...baseData.brand,
      name: tweaks.brandName || baseData.brand.name,
      mark: (tweaks.brandMark || "YB").slice(0, 3).toUpperCase(),
      tagline: tweaks.brandTagline || baseData.brand.tagline,
    },
  };
  useReveal();

  useEffect(() => {
    window.applyPalette(tweaks.palette);
  }, [tweaks.palette]);

  return (
    <>
      <Utility data={data} />
      <Header data={data} />
      <Hero data={data} />
      <Insights data={data} />
      <Neighborhoods data={data} />
      <Guides data={data} />
      <Trending data={data} />
      <VideoSection data={data} />
      <Topics data={data} />
      <Newsletter />
      <CTA />
      <Footer data={data} />

      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection label="Your Brand">
            <window.TweakText
              label="Brand name"
              value={tweaks.brandName}
              placeholder="Your Brand"
              onChange={(v) => setTweak("brandName", v)}
            />
            <window.TweakText
              label="Mark (1–3 chars)"
              value={tweaks.brandMark}
              placeholder="YB"
              onChange={(v) => setTweak("brandMark", (v || "").slice(0, 3))}
            />
            <window.TweakText
              label="Tagline / footer blurb"
              value={tweaks.brandTagline}
              placeholder="One-line description"
              onChange={(v) => setTweak("brandTagline", v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Brand Palette">
            <PaletteSelector value={tweaks.palette} onChange={(v) => setTweak("palette", v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

function PaletteSelector({ value, onChange }) {
  const palettes = window.PALETTES;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 6 }}>
      {Object.entries(palettes).map(([name, p]) => (
        <button
          key={name}
          onClick={() => onChange(name)}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            padding: "8px 10px",
            border: value === name ? `1.5px solid ${p.accent}` : "1px solid #e5e7eb",
            background: value === name ? p.accentSoft : "white",
            borderRadius: 6,
            cursor: "pointer",
            textAlign: "left",
            fontSize: 13,
            fontWeight: value === name ? 600 : 500,
            color: "#1a1a1a",
          }}
        >
          <span style={{
            width: 22, height: 22, borderRadius: 4,
            background: p.swatch, flexShrink: 0,
            boxShadow: "inset 0 0 0 1px rgba(0,0,0,.08)"
          }}/>
          <span style={{ flex: 1 }}>{name}</span>
          {value === name && <span style={{ color: p.accent, fontSize: 16, fontWeight: 700 }}>✓</span>}
        </button>
      ))}
    </div>
  );
}

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