// Direction F — "Horizon Timeline"
// Time as the spatial axis. Horizontal scrolling release timeline at top,
// vertical community sections below. Drag-scroll or buttons to navigate
// past → present → roadmap.

const { useState: useStateF, useEffect: useEffectF, useRef: useRefF, useMemo: useMemoF } = React;

const cnF = (...x) => x.filter(Boolean).join(" ");
const initF = (n) => n.split(/\s+/).map((p) => p[0]).slice(0, 2).join("");
const AvatarF = ({ accent = "amber", size = 28, initials = "" }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%",
    background: window.AVATAR_GRADIENT[accent],
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    color: "#fff", fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400,
    fontSize: size * 0.42, flexShrink: 0,
  }}>{initials}</div>
);

const IconF = ({ name, size = 14 }) => {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow":  return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "back":   return <svg {...p}><path d="M19 12H5M11 6l-6 6 6 6" /></svg>;
    case "up":     return <svg {...p}><path d="M12 20V6M6 12l6-6 6 6" /></svg>;
    case "plus":   return <svg {...p}><path d="M12 5v14M5 12h14" /></svg>;
    case "chat":   return <svg {...p}><path d="M3 12a8 8 0 1 1 3.6 6.7L3 21l1.3-4A8 8 0 0 1 3 12z" /></svg>;
    case "search": return <svg {...p}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></svg>;
    default: return null;
  }
};

// Build the timeline: past releases (oldest first) → today marker → roadmap (future)
function buildTimeline() {
  const past = [...window.CHANGELOG].reverse().map((r) => ({
    type: "release", id: r.id, label: r.version, date: r.date, data: r,
    when: r.tag === "Featured" || r.tag === "Feature" ? "major" : "minor",
  }));
  const today = { type: "today", id: "today", label: "Today", date: "May 22, 2026" };
  const future = [
    ...window.ROADMAP.inProgress.map((r) => ({ type: "roadmap", id: r.id, label: r.eta, lane: "Shipping next", color: "#e8528c", data: r })),
    ...window.ROADMAP.planned.map((r) => ({ type: "roadmap", id: r.id, label: r.eta, lane: "Planned", color: "#b48dff", data: r })),
    ...window.ROADMAP.exploring.map((r) => ({ type: "roadmap", id: r.id, label: r.eta, lane: "Exploring", color: "#ffa884", data: r })),
  ];
  return { past, today, future, all: [...past, today, ...future] };
}

function DirectionF() {
  const timeline = useMemoF(buildTimeline, []);
  const trackRef = useRefF(null);
  const [activeIdx, setActiveIdx] = useStateF(timeline.past.length); // start on "today"
  const [votes, setVotes] = useStateF(() => {
    const m = {}; window.FEATURE_REQUESTS.forEach((r) => (m[r.id] = { count: r.votes, voted: false })); return m;
  });
  const vote = (id) => setVotes((v) => {
    const c = v[id] || { count: 0, voted: false };
    return { ...v, [id]: { count: c.voted ? c.count - 1 : c.count + 1, voted: !c.voted } };
  });
  const [tried, setTried] = useStateF({});

  // Scroll to "today" on mount
  useEffectF(() => {
    const t = trackRef.current;
    if (!t) return;
    const target = t.querySelector('[data-tl-id="today"]');
    if (target) {
      t.scrollTo({ left: target.offsetLeft - t.clientWidth / 2 + target.clientWidth / 2, behavior: "instant" });
    }
  }, []);

  // Track which card is centered
  useEffectF(() => {
    const t = trackRef.current;
    if (!t) return;
    const onScroll = () => {
      const center = t.scrollLeft + t.clientWidth / 2;
      const cards = [...t.querySelectorAll("[data-tl-idx]")];
      let nearest = 0; let best = Infinity;
      cards.forEach((c) => {
        const mid = c.offsetLeft + c.clientWidth / 2;
        const d = Math.abs(mid - center);
        if (d < best) { best = d; nearest = parseInt(c.dataset.tlIdx, 10); }
      });
      setActiveIdx(nearest);
    };
    t.addEventListener("scroll", onScroll, { passive: true });
    return () => t.removeEventListener("scroll", onScroll);
  }, []);

  const scrollBy = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    t.scrollBy({ left: dir * 480, behavior: "smooth" });
  };

  const jumpTo = (id) => {
    const t = trackRef.current;
    if (!t) return;
    const target = t.querySelector(`[data-tl-id="${id}"]`);
    if (target) t.scrollTo({ left: target.offsetLeft - t.clientWidth / 2 + target.clientWidth / 2, behavior: "smooth" });
  };

  return (
    <div className="cf-shell">
      <CfHeader />

      <CfHorizon
        timeline={timeline}
        activeIdx={activeIdx}
        trackRef={trackRef}
        scrollBy={scrollBy}
        jumpTo={jumpTo}
        tried={tried}
        setTried={setTried}
      />

      <CfBelow vote={vote} votes={votes} />
    </div>
  );
}

// ============ HEADER ============
function CfHeader() {
  return (
    <header className="cf-head">
      <div className="cf-head-l">
        <span className="cf-mark" />
        <div className="cf-brand">relax.host <em>—</em> Inside</div>
      </div>
      <nav className="cf-head-nav">
        <a className="is-active">Horizon</a>
        <a>Community</a>
        <a>Stories</a>
        <a>Events</a>
      </nav>
      <div className="cf-head-r">
        <div className="cf-head-search">
          <IconF name="search" size={13} />
          <input placeholder="Search…" />
        </div>
        <button className="cf-head-post"><IconF name="plus" size={13} /> Post</button>
      </div>
    </header>
  );
}

// ============ HORIZON ============
function CfHorizon({ timeline, activeIdx, trackRef, scrollBy, jumpTo, tried, setTried }) {
  const todayIdx = timeline.past.length;
  return (
    <section className="cf-horizon">
      <div className="cf-horizon-head">
        <div className="cf-horizon-eyebrow">
          <span className="cf-pulse" />
          <span>The horizon · scroll through time</span>
        </div>
        <h1 className="cf-horizon-h">
          <span className="cf-horizon-l">Where we&apos;ve been.</span>
          <span className="cf-horizon-c"><em>Where we are.</em></span>
          <span className="cf-horizon-r">Where we&apos;re going.</span>
        </h1>
      </div>

      <div className="cf-horizon-controls">
        <button className="cf-arrow" onClick={() => scrollBy(-1)}>
          <IconF name="back" size={16} />
        </button>
        <div className="cf-jump">
          <button className={cnF(activeIdx < todayIdx && "is-active")}
            onClick={() => jumpTo(timeline.past[Math.max(0, timeline.past.length - 6)].id)}>
            ← Past
          </button>
          <button className={cnF(activeIdx === todayIdx && "is-active")}
            onClick={() => jumpTo("today")}>
            Today
          </button>
          <button className={cnF(activeIdx > todayIdx && "is-active")}
            onClick={() => jumpTo(timeline.future[0]?.id)}>
            Roadmap →
          </button>
        </div>
        <button className="cf-arrow" onClick={() => scrollBy(1)}>
          <IconF name="arrow" size={16} />
        </button>
      </div>

      <div className="cf-horizon-rail">
        <div className="cf-rail-line" />
        <div className="cf-rail-now">Now</div>
      </div>

      <div className="cf-track-wrap">
        <div className="cf-track" ref={trackRef}>
          {timeline.all.map((item, i) => (
            <TimelineCard
              key={item.id}
              item={item}
              idx={i}
              isActive={activeIdx === i}
              tried={tried[item.id]}
              setTried={(v) => setTried((s) => ({ ...s, [item.id]: v }))}
            />
          ))}
        </div>
        <div className="cf-track-fade cf-track-fade-l" />
        <div className="cf-track-fade cf-track-fade-r" />
      </div>
    </section>
  );
}

// ============ TIMELINE CARD ============
function TimelineCard({ item, idx, isActive, tried, setTried }) {
  if (item.type === "today") return <TodayCard item={item} idx={idx} isActive={isActive} />;
  if (item.type === "release") return <ReleaseCardF item={item} idx={idx} isActive={isActive} tried={tried} setTried={setTried} />;
  if (item.type === "roadmap") return <RoadmapCardF item={item} idx={idx} isActive={isActive} />;
  return null;
}

// Today marker — slim, just a vertical position
function TodayCard({ item, idx, isActive }) {
  return (
    <div className={cnF("cf-card cf-card-today", isActive && "is-active")} data-tl-idx={idx} data-tl-id={item.id}>
      <div className="cf-today-line" />
      <div className="cf-today-pin">
        <span className="cf-today-pulse" />
        <span className="cf-today-mark">Today</span>
        <span className="cf-today-date">{item.date}</span>
        <div className="cf-today-meta">
          <span className="cf-mono">2,418 hosts · 11,304 properties · running v1.44</span>
        </div>
      </div>
    </div>
  );
}

// Release card — past
function ReleaseCardF({ item, idx, isActive, tried, setTried }) {
  const r = item.data;
  const tone = window.TONE_COLOR[r.tone];
  const isFeatured = r.image;
  return (
    <article
      className={cnF("cf-card cf-card-release", isActive && "is-active", isFeatured ? "is-featured" : "is-minor")}
      data-tl-idx={idx}
      data-tl-id={item.id}
      style={{ "--tone": tone }}
    >
      <div className="cf-card-spine" />
      <div className="cf-card-meta">
        <span className="cf-mono cf-card-when" style={{ color: tone }}>{r.version}</span>
        <span className="cf-mono cf-dim">{r.date}</span>
      </div>
      <div className="cf-card-tag" style={{ color: tone, background: `${tone}14`, borderColor: `${tone}40` }}>
        {r.tag}
      </div>
      {isFeatured && (
        <div className="cf-card-vis">
          <ReleaseVisualF kind={r.image} tone={tone} />
        </div>
      )}
      <h3 className="cf-card-t">{r.title}</h3>
      {r.body && <p className="cf-card-p">{r.body}</p>}
      {isFeatured && (
        <ul className="cf-card-bullets">
          {r.bullets.slice(0, 3).map((b, i) => (
            <li key={i}><span style={{ background: tone }} />{b}</li>
          ))}
        </ul>
      )}
      {!isFeatured && (
        <ul className="cf-card-bullets is-minor">
          {r.bullets.map((b, i) => <li key={i}><span style={{ background: tone }} />{b}</li>)}
        </ul>
      )}
      <div className="cf-card-foot">
        {isFeatured && (
          <button className={cnF("cf-card-cta", tried && "is-tried")} onClick={() => setTried(!tried)}>
            {tried ? "Enabled · open in relax.host" : "Try this feature"}
            <IconF name="arrow" size={12} />
          </button>
        )}
        <span className="cf-mono cf-dim cf-card-author">— {r.author}</span>
      </div>
    </article>
  );
}

// Roadmap card — future
function RoadmapCardF({ item, idx, isActive }) {
  const r = item.data;
  return (
    <article
      className={cnF("cf-card cf-card-roadmap", isActive && "is-active")}
      data-tl-idx={idx}
      data-tl-id={item.id}
      style={{ "--tone": item.color }}
    >
      <div className="cf-card-spine" />
      <div className="cf-card-meta">
        <span className="cf-mono cf-card-when" style={{ color: item.color }}>{item.label}</span>
        <span className="cf-mono cf-dim">{item.lane}</span>
      </div>
      <div className="cf-card-tag" style={{ color: item.color, background: `${item.color}14`, borderColor: `${item.color}40` }}>
        Coming
      </div>
      <h3 className="cf-card-t">{r.title}</h3>
      <p className="cf-card-p">
        Tracked across {Math.round(40 + (r.votes || 50) * 0.3)} host conversations.
        {item.lane === "Shipping next" ? " Active build — design in flight." : item.lane === "Planned" ? " Scoped and queued." : " Early research, weighing options."}
      </p>
      <div className="cf-card-foot">
        {r.votes != null && (
          <button className="cf-card-vote">
            <IconF name="up" size={12} />
            <span className="cf-mono">{r.votes}</span>
            <span>votes</span>
          </button>
        )}
        <span className="cf-mono cf-dim cf-card-author">{r.tag}</span>
      </div>
    </article>
  );
}

// ============ BELOW THE HORIZON ============
function CfBelow({ vote, votes }) {
  return (
    <div className="cf-below">
      <CfBelowHero />
      <CfDiscussions />
      <CfRequestsAndEvents vote={vote} votes={votes} />
      <CfStoriesShowcase />
      <CfCommunityCTA />
    </div>
  );
}

function CfBelowHero() {
  return (
    <section className="cf-below-hero">
      <span className="cf-mono cf-below-eyebrow">— Below the horizon</span>
      <h2 className="cf-below-hero-h">
        Today on the <em>community floor.</em>
      </h2>
      <p className="cf-below-hero-p">
        2,418 hosts running relax.host across 14 EU cities. Here&apos;s what they&apos;re
        talking about, voting on, and showing up for this week.
      </p>
    </section>
  );
}

function CfDiscussions() {
  const featured = window.THREADS.find((t) => t.pinned) || window.THREADS[0];
  const rest = window.THREADS.filter((t) => t.id !== featured.id).slice(0, 4);
  return (
    <section className="cf-section">
      <header className="cf-section-h">
        <div>
          <div className="cf-mono cf-section-kicker">Discussions</div>
          <h2 className="cf-section-t">Threads <em>worth your morning.</em></h2>
        </div>
        <button className="cf-section-cta">All 28 discussions →</button>
      </header>
      <div className="cf-disc-grid">
        <article className="cf-disc-feat">
          <div className="cf-disc-meta">
            {featured.pinned && <span className="cf-tag cf-tag-coral">📌 Pinned</span>}
            {featured.hot && <span className="cf-tag cf-tag-peach">🔥 Hot</span>}
            <span className="cf-mono cf-dim">{featured.tag}</span>
          </div>
          <h3 className="cf-disc-h">{featured.title}</h3>
          <p className="cf-disc-p">{featured.excerpt}</p>
          <div className="cf-disc-foot">
            <div className="cf-author">
              <AvatarF accent={featured.avatar} size={32} initials={initF(featured.author)} />
              <div>
                <div className="cf-author-name"><strong>{featured.author}</strong></div>
                <div className="cf-mono cf-dim">{featured.location} · {featured.properties} properties</div>
              </div>
            </div>
            <div className="cf-disc-stats cf-mono">
              <span><IconF name="chat" size={11} /> {featured.replies}</span>
              <span className="cf-dim">{featured.lastReply}</span>
            </div>
          </div>
        </article>
        <ul className="cf-disc-list">
          {rest.map((t) => (
            <li key={t.id}>
              <span className="cf-mono cf-disc-list-tag">{t.tag}</span>
              <div>
                <div className="cf-disc-list-t">{t.title}</div>
                <div className="cf-mono cf-dim">{t.author} · {t.replies} replies · {t.lastReply}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function CfRequestsAndEvents({ vote, votes }) {
  const [going, setGoing] = useStateF({});
  return (
    <section className="cf-section">
      <div className="cf-split">
        <div>
          <header className="cf-section-h">
            <div>
              <div className="cf-mono cf-section-kicker">Requests</div>
              <h2 className="cf-section-t">What hosts want <em>next.</em></h2>
            </div>
          </header>
          <ol className="cf-req-list">
            {window.FEATURE_REQUESTS.slice(0, 5).map((r, i) => {
              const v = votes[r.id] || { count: r.votes, voted: false };
              const s = window.STATUS_MAP[r.status];
              return (
                <li key={r.id}>
                  <span className="cf-mono cf-req-rank">{String(i + 1).padStart(2, "0")}</span>
                  <button className={cnF("cf-req-vote", v.voted && "is-voted")} onClick={() => vote(r.id)}>
                    <IconF name="up" size={11} />
                    <span className="cf-mono">{v.count}</span>
                  </button>
                  <div>
                    <div className="cf-req-t">{r.title}</div>
                    <div className="cf-mono" style={{ color: s.color, marginTop: 4 }}>
                      <span className="cf-mini-dot" style={{ background: s.color }} /> {s.label} · {r.tag} · {r.comments} comments
                    </div>
                  </div>
                </li>
              );
            })}
          </ol>
        </div>

        <div>
          <header className="cf-section-h">
            <div>
              <div className="cf-mono cf-section-kicker">Events</div>
              <h2 className="cf-section-t">On the <em>calendar.</em></h2>
            </div>
          </header>
          <ul className="cf-ev-list">
            {window.EVENTS.map((e) => {
              const go = !!going[e.id] || e.going;
              return (
                <li key={e.id}>
                  <div className="cf-ev-date">
                    <span className="cf-mono">{e.when.split(",")[0].split(" ")[0]}</span>
                    <strong>{e.when.split(",")[0].split(" ")[1]}</strong>
                  </div>
                  <div className="cf-ev-body">
                    <div className="cf-ev-t">{e.title}</div>
                    <div className="cf-mono cf-dim">{e.format} · {e.host} · {e.seats} seats</div>
                  </div>
                  <button className={cnF("cf-ev-rsvp", go && "is-going")}
                    onClick={() => setGoing((g) => ({ ...g, [e.id]: !go }))}>
                    {go ? "Going ✓" : "RSVP"}
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}

function CfStoriesShowcase() {
  return (
    <section className="cf-section">
      <header className="cf-section-h">
        <div>
          <div className="cf-mono cf-section-kicker">Hosts &amp; setups</div>
          <h2 className="cf-section-t">Portfolios <em>at work.</em></h2>
        </div>
      </header>
      <div className="cf-stories-grid">
        {window.STORIES.map((s) => (
          <article key={s.id} className="cf-story">
            <div className="cf-story-stats">
              <div><strong>{s.portfolio.split(" ")[0]}</strong><span className="cf-mono">{s.portfolio.split(" ").slice(1).join(" ")}</span></div>
              <div className="cf-vdiv" />
              <div><strong>{s.lift.split(" ")[0]}</strong><span className="cf-mono">{s.lift.split(" ").slice(1).join(" ")}</span></div>
            </div>
            <h3 className="cf-story-t">{s.title}</h3>
            <p className="cf-story-p">{s.excerpt}</p>
            <div className="cf-author">
              <AvatarF accent={s.avatar} size={28} initials={initF(s.host)} />
              <div>
                <div className="cf-author-name"><strong>{s.host}</strong></div>
                <div className="cf-mono cf-dim">{s.location} · {s.time}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function CfCommunityCTA() {
  return (
    <section className="cf-cta-section">
      <h2 className="cf-cta-h">
        The week ahead is <em>worth showing up for.</em>
      </h2>
      <p>Subscribe to the Monday digest. One email · what shipped · who said what.</p>
      <form className="cf-cta-form" onSubmit={(e) => e.preventDefault()}>
        <input placeholder="you@email.com" />
        <button>Subscribe →</button>
      </form>
    </section>
  );
}

// ============ release visual ============
function ReleaseVisualF({ kind, tone }) {
  if (kind === "forecast")  return <FForecastVis tone={tone} />;
  if (kind === "mood")      return <FMoodVis tone={tone} />;
  if (kind === "cleaner")   return <FCleanerVis tone={tone} />;
  if (kind === "lock")      return <FLockVis tone={tone} />;
  if (kind === "pricing")   return <FPricingVis tone={tone} />;
  if (kind === "expense")   return <FExpenseVis tone={tone} />;
  if (kind === "guestbook") return <FGuestbookVis tone={tone} />;
  return null;
}

function FForecastVis({ tone }) {
  const points = [38, 52, 41, 64, 70, 58, 78, 82, 71, 89, 94, 88];
  const w = 460, h = 160, pad = 12;
  const step = (w - pad * 2) / 11;
  const path = points.map((p, i) => `${i ? "L" : "M"}${pad + i * step},${h - pad - (p / 100) * (h - pad * 2)}`).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="cf-vis">
      <defs><linearGradient id="cf-fc" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor={tone} stopOpacity="0.32" /><stop offset="100%" stopColor={tone} stopOpacity="0" />
      </linearGradient></defs>
      <path d={`${path} L${w - pad},${h - pad} L${pad},${h - pad} Z`} fill="url(#cf-fc)" />
      <path d={path} stroke={tone} strokeWidth="2.2" fill="none" />
      {points.map((p, i) => <circle key={i} cx={pad + i * step} cy={h - pad - (p / 100) * (h - pad * 2)} r={i === 11 ? 4.5 : 2.2} fill={tone} />)}
    </svg>
  );
}
function FMoodVis({ tone }) {
  const moods = ["pos", "pos", "neu", "pos", "neg", "pos", "pos", "pos", "pos", "pos", "pos", "neu", "pos", "pos", "pos"];
  const c = { pos: "#10b981", neu: "#807e87", neg: "#ef4444" };
  return <div style={{ display: "grid", gridTemplateColumns: "repeat(15, 1fr)", gap: 4, padding: 12 }}>{moods.map((m, i) => <span key={i} style={{ aspectRatio: 1, borderRadius: 3, background: c[m], opacity: 0.85 }} />)}</div>;
}
function FCleanerVis({ tone }) {
  const rows = [{ t: "Checkout", s: "11:38", d: true }, { t: "Restock", s: "3 items", d: true }, { t: "Damage", s: "1 photo", d: false }];
  return <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 6 }}>
    {rows.map((r, i) => (
      <div key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 16, height: 16, borderRadius: 4, background: r.d ? tone : "transparent", border: `1.5px solid ${r.d ? tone : "#b4b1ba"}`, color: "#fff", fontSize: 10, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>{r.d ? "✓" : ""}</span>
        <span style={{ fontSize: 12, flex: 1 }}>{r.t}</span>
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "#807e87" }}>{r.s}</span>
      </div>
    ))}
  </div>;
}
function FLockVis({ tone }) {
  return <div style={{ padding: 12, textAlign: "center" }}>
    <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 42, letterSpacing: "0.08em", color: tone, lineHeight: 1, marginBottom: 8 }}>4 1 7 0</div>
    <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", color: "#807e87" }}>EXPIRES MON · 11:00</div>
  </div>;
}
function FPricingVis({ tone }) {
  const ai = [88, 92, 110, 132, 148, 164, 158, 144, 122, 108, 96, 92];
  const ma = Array(12).fill(110);
  const w = 460, h = 160, pad = 12, max = 180;
  const step = (w - pad * 2) / 11;
  const path = (arr) => arr.map((p, i) => `${i ? "L" : "M"}${pad + i * step},${h - pad - (p / max) * (h - pad * 2)}`).join(" ");
  return <svg viewBox={`0 0 ${w} ${h}`} className="cf-vis">
    <path d={path(ma)} stroke="rgba(10,10,12,0.2)" strokeWidth="1.4" strokeDasharray="4 4" fill="none" />
    <path d={path(ai)} stroke={tone} strokeWidth="2.4" fill="none" />
  </svg>;
}
function FExpenseVis({ tone }) {
  return <div style={{ padding: 12, fontSize: 11 }}>
    {[["Lidl", "€32.40"], ["IKEA", "€119.00"], ["Sklenarstvo", "€68.50"]].map(([v, t], i) => (
      <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px dashed rgba(10,10,12,0.08)" }}>
        <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 13 }}>{v}</span>
        <span style={{ fontFamily: "var(--f-mono)", color: tone }}>{t}</span>
      </div>
    ))}
  </div>;
}
function FGuestbookVis({ tone }) {
  return <div style={{ padding: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
    <div style={{ aspectRatio: "4/3", background: `linear-gradient(135deg, ${tone}30, ${tone}10)`, borderRadius: 6, padding: 10, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
      <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 16 }}>Tatra Loft</div>
    </div>
    <div style={{ fontSize: 11 }}>
      {[["WiFi", "tatra-loft"], ["Door", "4170"]].map(([k, v], i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px dashed rgba(10,10,12,0.08)" }}>
          <span>{k}</span><span style={{ fontFamily: "var(--f-mono)", color: tone }}>{v}</span>
        </div>
      ))}
    </div>
  </div>;
}

window.DirectionF = DirectionF;