/* Delhi.fyi landing — main app */

const { useEffect } = React;

const HEADLINES = {
  "go-outside": [
    { type: "text",   value: "Go outside." },
    { type: "br" },
    { type: "italic", value: "Delhi" },
    { type: "text",   value: " is " },
    { type: "italic", value: "waiting" },
    { type: "reddot", value: "." },
  ],
};

function Headline() {
  const parts = HEADLINES["go-outside"];
  return (
    <h1 className="headline">
      {parts.map((p, i) => {
        if (p.type === "br")     return <br key={i} />;
        if (p.type === "italic") return <span key={i} className="it">{p.value}</span>;
        if (p.type === "reddot") return <span key={i} className="dot-red">{p.value}</span>;
        return <React.Fragment key={i}>{p.value}</React.Fragment>;
      })}
    </h1>
  );
}

function App() {
  return (
    <div className="page">
      <TopBar />

      <main className="wrap hero">
        <div>
          <div className="eyebrow-row">
            <span className="hair" />
            <span className="eyebrow">Delhi · Gurugram · Noida — Issue 001</span>
          </div>
          <Headline />
          <p className="lede">
            A guide to the city, made by people who actually go outside. Food, events, and the small, specific things; curated, not crowdsourced.
          </p>
        </div>

        <aside className="hero-right">
          <Waitlist />
          <EditorsNote />
        </aside>
      </main>

      <Footer />
    </div>
  );
}

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