// Landing view — instrument-panel hero with scan form + composite readout.

const { useState: useStateL } = React;

function Landing({ data, onScan, onChannel }) {
  // Internal channel-switch wrapper that no-ops gracefully when the parent
  // forgot to wire `onChannel` (e.g. an external script-tag-only embed).
  const switchToChannel = (c) => { if (typeof onChannel === 'function') onChannel(c); };

  // Inputs intentionally start EMPTY — the demo dataset (Stripe) used to
  // prefill them, but that meant a user landing on the page who clicked
  // RUN SCAN immediately would burn API credits scanning stripe.com instead
  // of their own domain. The Stripe sample data still drives the right-hand
  // SAMPLE readout card, but the form is a clean slate.
  const [domain, setDomain] = useStateL("");
  const [brand, setBrand] = useStateL("");
  const top = data.platforms.slice().sort((a, b) => b.score - a.score);

  return (
    <div className="view">
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid">
          <div>
            <div className="cap muted" style={{ display: "flex", gap: 14 }}>
              <span style={{ color: "var(--accent)" }}>● LIVE</span>
              <span>GEO · AEO · ANSWER-ENGINE VISIBILITY</span>
              <span>v0.1.0</span>
            </div>
            <h1>
              Measure how often<br/>
              ChatGPT, Claude, Gemini,<br/>
              Perplexity &amp; AIO <span className="glow">cite you.</span>
            </h1>
            <p className="lede">
              <b>0–100 score.</b> Ten weighted signal clusters, eight spider personas, five per-LLM platform vectors, blended 70/30 with a live citation probe across a 30-assistant panel. No keyword tool. No black box. Every number ships with its reason and its fix.
            </p>

            <form className="scan-form" onSubmit={(e) => { e.preventDefault(); onScan({ domain, brand }); }}>
              <input value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="yourdomain.com" />
              <input value={brand} onChange={(e) => setBrand(e.target.value)} placeholder="Brand name (optional)" />
              <button type="submit">RUN SCAN ▸</button>
            </form>
            <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
              No sign-up · ~15s per page · runs without API keys · <span style={{ color: "var(--accent)" }}>2,847</span> sites scored this month
            </div>

            <div className="kpis" style={{ marginTop: 28, border: "1px solid var(--line)" }}>
              <div><div className="k">Signal clusters</div><div className="v">10</div></div>
              <div><div className="k">Spider personas</div><div className="v">08</div></div>
              <div><div className="k">LLM panel</div><div className="v">30<small>assistants</small></div></div>
              <div><div className="k">RAG checks</div><div className="v">70+</div></div>
            </div>
          </div>

          {/* Sample readout */}
          <Brackets>
            <div className="readout-col">
              <div className="cap muted" style={{ display: "flex", justifyContent: "space-between" }}>
                <span>SAMPLE · STRIPE.COM</span>
                <span style={{ color: "var(--accent)" }}>● COMPLETE</span>
              </div>
              <div style={{ display: "flex", alignItems: "flex-end", gap: 12, marginTop: 18 }}>
                <span className="big tabular"><CountUp to={data.score} /></span>
                <div style={{ paddingBottom: 12 }}>
                  <div style={{ fontSize: 24, fontWeight: 700, color: "var(--ink)" }}>{data.grade}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-dim)" }}><Delta v={data.delta7d} /> · 7d</div>
                </div>
              </div>
              <div style={{ marginTop: 18 }}>
                <div className="cap muted" style={{ marginBottom: 6 }}>30D COMPOSITE TREND</div>
                <Sparkline data={data.trend30d} height={36} />
              </div>
              <div style={{ marginTop: 16, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
                <div className="cap muted" style={{ marginBottom: 8 }}>BEST → WORST · PER PLATFORM</div>
                {top.map((p) => (
                  <div key={p.id} style={{ display: "grid", gridTemplateColumns: "100px 1fr 38px", gap: 10, alignItems: "center", padding: "4px 0" }}>
                    <span style={{ color: "var(--ink)" }}>{p.name}</span>
                    <Meter value={p.score / 100} />
                    <span className="tabular" style={{ textAlign: "right", color: "var(--ink)", fontWeight: 700 }}>{p.score}</span>
                  </div>
                ))}
              </div>
            </div>
          </Brackets>
        </div>
      </section>

      {/* WHAT IS THIS — 3 plain-language questions answered up front, before
          any technical detail. Visitors landing here shouldn't have to read
          the FAQ to figure out what the product does. */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="section-h">
          <div>
            <div className="lbl">// WHAT IS ANSWENA</div>
            <h2>Plain answers, before the deep dive.</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid var(--line)" }}>
          <div style={{ padding: "22px 24px", borderRight: "1px solid var(--line)" }}>
            <div className="cap" style={{ color: "var(--accent)", marginBottom: 8 }}>// 01 · WHAT WE DO</div>
            <h3 style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--ink)", margin: "0 0 10px", lineHeight: 1.2 }}>
              We measure how often ChatGPT, Claude and Gemini actually cite your site.
            </h3>
            <p className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, margin: 0 }}>
              Classic SEO measures your rank on Google. We measure something different: when a user asks ChatGPT "what is X?", does the answer pull from your page? In the LLM era, that's the visibility that actually moves traffic.
            </p>
          </div>

          <div style={{ padding: "22px 24px", borderRight: "1px solid var(--line)" }}>
            <div className="cap" style={{ color: "var(--accent)", marginBottom: 8 }}>// 02 · WHAT WE MEASURE</div>
            <h3 style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--ink)", margin: "0 0 10px", lineHeight: 1.2 }}>
              One 0–100 score, six per-LLM scores, and a list of concrete fixes.
            </h3>
            <p className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, margin: 0 }}>
              We tell you "your page scored 78, but only 61 with Gemini, because the FAQ schema is missing and dateModified isn't stamped." Number + reason + what to do — all three together. No vague "optimise your content" advice.
            </p>
          </div>

          <div style={{ padding: "22px 24px" }}>
            <div className="cap" style={{ color: "var(--accent)", marginBottom: 8 }}>// 03 · HOW WE MEASURE</div>
            <h3 style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--ink)", margin: "0 0 10px", lineHeight: 1.2 }}>
              We ask 30 LLMs about your page, in real time, and count the citations.
            </h3>
            <p className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, margin: 0 }}>
              ChatGPT, Claude, Gemini, Perplexity, DeepSeek… we send each one 8–12 buyer-intent queries and check whether they cite your page. That's real behaviour. We also analyse your HTML against 10 signal clusters — the two combine into the final score.
            </p>
          </div>
        </div>

        <div style={{ padding: "20px 24px", borderTop: "1px solid var(--line)", display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap", background: "var(--bg-1)" }}>
          <span className="cap muted" style={{ minWidth: 140 }}>// IN PRACTICE</span>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--ink)", flex: 1, lineHeight: 1.5 }}>
            <b>You hit Run Scan → 15 seconds later</b> you get one 0-100 score, per-LLM scores for each engine, the weakest signal flagged, and <b style={{ color: "var(--accent)" }}>Claude-written concrete rewrites</b> — paste-able copy, schema or HTML you can drop straight onto your page.
          </span>
        </div>
      </section>

      {/* MODEL */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="section-h">
          <div>
            <div className="lbl">// SCORING MODEL · the math</div>
            <h2>Three layers, not one number.</h2>
            <p className="muted" style={{ margin: "4px 0 0", fontFamily: "var(--font-sans)", fontSize: 12, lineHeight: 1.5, maxWidth: 720 }}>
              For the engineering-curious — how the algorithm actually works. Skip this if you only want the score and the fix list; the scan already produces the right number without needing to read the math.
            </p>
          </div>
          <div className="muted">Hard filters → 10 signals → penalty multiplier → 70/30 blend with live LLM probe</div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 0 }}>
          <pre style={{
            margin: 0, padding: "20px 28px", borderRight: "1px solid var(--line)",
            color: "var(--ink-dim)", fontSize: 12, lineHeight: 1.7,
            background: "var(--bg-1)", overflow: "auto"
          }}>
{`// LAYER 1 — hard filters (the gate)
if (wordCount < 80
 || semantic   < 0.08
 || intent     < 0.10
 || trust      < 0.10) `}<span style={{color:"var(--crit)"}}>reject()</span>{`

// LAYER 2 — 10-cluster weighted composite
COMPOSITE =
  `}<span style={{color:"var(--accent)"}}>Semantic_Relevance</span>{`     × 0.25
+ `}<span style={{color:"var(--accent)"}}>Intent_Coverage</span>{`        × 0.15
+ `}<span style={{color:"var(--accent)"}}>Trust_Reliability</span>{`      × 0.15
+ `}<span style={{color:"var(--accent)"}}>Content_Clarity</span>{`        × 0.10
+ `}<span style={{color:"var(--accent)"}}>Entity_Authority</span>{`       × 0.10
+ `}<span style={{color:"var(--accent)"}}>Citation_Potential</span>{`     × 0.08
+ `}<span style={{color:"var(--accent)"}}>Structure_Schema</span>{`       × 0.07
+ `}<span style={{color:"var(--accent)"}}>Freshness</span>{`              × 0.05
+ `}<span style={{color:"var(--accent)"}}>Cross_Reference</span>{`        × 0.03
+ `}<span style={{color:"var(--accent)"}}>Tool_Actionability</span>{`     × 0.02

// LAYER 3 — penalty + live blend
penalty = 1 / (1 + exp(1.5 × (severity − 1.2)))
FINAL   = COMPOSITE × `}<span style={{color:"var(--warn)"}}>penalty</span>{`
          × 0.7 + `}<span style={{color:"var(--info)"}}>LiveProbe</span>{` × 0.3`}
          </pre>

          <div style={{ padding: 24 }}>
            {data.clusters.map((c, i) => (
              <div key={c.id} style={{ display: "grid", gridTemplateColumns: "26px 1fr 60px 100px", gap: 12, alignItems: "center", padding: "8px 0", borderBottom: i < data.clusters.length - 1 ? "1px solid var(--line)" : 0 }}>
                <span className="muted tabular">{String(i + 1).padStart(2, "0")}</span>
                <span style={{ color: "var(--ink)" }}>{c.label}</span>
                <span className="muted tabular">×{c.weight.toFixed(2)}</span>
                <Segments value={c.score} total={10} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="section-h">
          <div>
            <div className="lbl">// PIPELINE</div>
            <h2>What happens in 15 seconds.</h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
          {[
            { n: "01", t: "Fetch &amp; parse", b: "HTML → JSON-LD → entity extraction. Word count, schema types, FAQ density, table count, answer-span extractability." },
            { n: "02", t: "Generate queries", b: "8–24 buyer-intent variants per brand: definitions, comparisons, how-to, pricing, objections, alternatives." },
            { n: "03", t: "Probe 30 assistants", b: "Live API calls to ChatGPT, Claude, Gemini, Perplexity, AIO, DeepSeek, Grok, Mistral, Qwen, Cohere, Groq…" },
            { n: "04", t: "Rank fixes", b: "Each gap → one fix, sorted by weight × (1 − score). Effort estimate. Concrete diff. Top items first." },
          ].map((s, i) => (
            <div key={i} style={{ padding: 24, borderRight: i < 3 ? "1px solid var(--line)" : 0 }}>
              <div style={{ fontSize: 36, fontWeight: 700, color: "var(--accent)" }}>{s.n}</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)", marginTop: 6 }} dangerouslySetInnerHTML={{__html: s.t}} />
              <div className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 12, marginTop: 6, lineHeight: 1.55 }}>{s.b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* SIGNALS */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="section-h">
          <div>
            <div className="lbl">// TEN SIGNAL CLUSTERS</div>
            <h2>Measured per page, signal by signal.</h2>
          </div>
        </div>
        <div className="signal-grid">
          {[
            { t: "Topic alignment", b: "Embedding similarity vs target queries. Synonyms. Heading-section coherence." },
            { t: "Intent coverage", b: "Definition, mechanics, alternatives, follow-ups. Facet count." },
            { t: "Trust signals", b: "Sourced numeric claims. Confident phrasing. Consistent terminology." },
            { t: "Readability", b: "Sentence length, paragraph rhythm. Concrete examples." },
            { t: "Brand recognition", b: "Schema, Wikipedia, external profiles, disambiguation." },
            { t: "Quotability", b: "Standalone quotable lines. Stats, tables, step lists, FAQ pairs." },
            { t: "Crawlability", b: "Schema, clean HTML, robots.txt, AI bot access, llms.txt." },
            { t: "Freshness", b: "Last-Modified. Current-year refs. Version markers." },
            { t: "External mentions", b: "Reddit, GitHub, Wikipedia, YouTube, G2, HackerNews." },
            { t: "Action surface", b: "Pricing, sign-up, API docs, server-rendered content." },
          ].map((s, i) => (
            <div key={i}>
              <div className="cap muted">SIGNAL/{String(i+1).padStart(2,"0")}</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)", marginTop: 4 }}>{s.t}</div>
              <div className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, marginTop: 6, lineHeight: 1.55 }}>{s.b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TOOLS GUIDE — explains what each sub-page is for. Surfaces them
          alongside the main view so users can navigate intentionally instead
          of poking links in the toolbar. */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="section-h">
          <div>
            <div className="lbl">// PAGES & TOOLS</div>
            <h2>Where to look for what.</h2>
          </div>
          <div className="muted">11 pages · scan reports · time-series · diagnostics</div>
        </div>
        <div className="signal-grid">
          {[
            { href: "/", t: "Landing — this page", b: "Run a fresh scan, see the model, browse signal clusters and the FAQ. The starting point." },
            { href: "#", channel: "report", t: "02 Report", b: "The full scan output. Per-LLM platform scores, 10 cluster breakdown, 8 spider personas, prioritised fix list, raw probe log. PDF + JSON export buttons in the status bar." },
            { href: "#", channel: "agents", t: "03 Agents", b: "Live-ops view of the 14 background workers. Findings feed, manager queue, event bus, spider memory timeline. Tail what the engine is doing right now." },
            { href: "/why.html", t: "Why this score", b: "The full math trace. Cluster contributions, penalty multiplier, hard-filter cap, live-probe blend — every number with the equation it came from. No black box." },
            { href: "/diff.html", t: "Diff", b: "Compare any two scans of the same domain. Did your fix actually help? Side-by-side scores, per-metric deltas, what changed." },
            { href: "/domain.html", t: "Timeline", b: "All scans for one site over time. Score curve, per-cluster trend, narrative for every scan. Diff is two snapshots; this is the whole journey." },
            { href: "/methodology.html", t: "Methodology", b: "How the engine actually scores: 3 layers, 10 signals, penalty multiplier, per-platform vectors, calibration sources. Reference doc." },
            { href: "/validation.html", t: "Validation", b: "Live calibration metrics: Spearman ρ between our score and real LLM citation rate, AUC-ROC, NDCG@10, per-platform breakdown. Auto-refreshes every 6h." },
            { href: "/developers", t: "Developers", b: "Pricing + use cases + 30-second quickstart. Score a URL in CI, plug into agents, lint content on save. The 'API for AEO' positioning page." },
            { href: "/docs.html", t: "API & Docs", b: "Public REST API + embeddable widget. Free-scan, register, push reports, get recommendations, configure webhooks, check quota." },
            { href: "/ai-ping.html", t: "AI Ping", b: "Two tools: AI-readiness audit (robots.txt / llms.txt / schema gaps) and bot ping (IndexNow + UA accessibility tests). Generates downloadable fix files." },
            { href: "/admin.html", t: "Admin", b: "Engine self-diagnostics: corpus health, learner drift, error rates, calibration matrix. Manual triggers for retraining + spider memory rebuild." },
          ].map((s, i) => (
            <a key={i}
               href={s.href}
               onClick={(e) => {
                 if (s.channel) { e.preventDefault(); switchToChannel(s.channel); }
               }}
               style={{ color: "inherit", textDecoration: "none", display: "block" }}>
              <div className="cap muted">PAGE/{String(i+1).padStart(2,"0")}</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)", marginTop: 4 }}>{s.t}</div>
              <div className="muted" style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, marginTop: 6, lineHeight: 1.55 }}>{s.b}</div>
            </a>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section>
        <div className="section-h">
          <div>
            <div className="lbl">// FAQ</div>
            <h2>Common questions, direct answers.</h2>
          </div>
        </div>
        <div style={{ padding: "0 32px 48px", maxWidth: 980 }}>
          {[
            ["Same as classic SEO?", "Classic SEO ranks links. This scores answer-text citations from LLM replies. Different objective, different signals — Wikipedia presence and quotable spans matter here, backlink count and meta-keywords don't."],
            ["What does each platform score mean?", "Six numbers (ChatGPT / Claude / Gemini / Perplexity / Google AIO / DeepSeek), each derived from the SAME 10 cluster scores re-weighted to that engine's documented citation bias. Perplexity weights freshness 4× more than Claude does; Gemini weights schema heavily; ChatGPT leans on entity authority. Strong on one platform, weak on another is normal — and the report tells you why."],
            ["DeepSeek shows up but I don't have its API key — how is its score real?", "The platform score (the 0–100 number on the column) is HEURISTIC: we re-weight your cluster scores using DeepSeek's known retrieval profile. Always available, no key needed. The cited / mention RATES below it come from LIVE API probes — those need DEEPSEEK_API_KEY in .env. Without the key the rates show 0% but the heuristic platform score is still meaningful."],
            ["API keys required?", "No. The full scan, all 10 clusters, all 8 spider personas, all 6 platform scores work with zero keys. Keys add: (a) live probe rates per LLM (30% of the live-blended composite), (b) Claude-written rewrite recommendations, (c) entity-graph enrichment, (d) competitor gap analysis. Set them in .env when you have them — they're optional quality boosts, not gates."],
            ["Why ten signals?", "Trust, intent coverage, brand authority and action surface behave differently. Collapsing them into one score produces false positives — a page can be high-trust but invisible to LLMs because nobody quotes it (low citation potential). Ten signals give the report something to point at when the score is bad."],
            ["What's the difference between Diff and Timeline?", "Diff = two scans, side-by-side, per-metric delta. Use it after you ship a fix to confirm it worked. Timeline = ALL scans of a domain on one chart, with a narrative per scan. Use it to see whether your site is trending up or down over weeks. Diff is two points; Timeline is the curve."],
            ["What's the Spider Ensemble?", "Eight personas (retrieval, citation, intent, entity, trust, freshness, actionability, multimodal) — each runs the same page through a different lens. Disagreement between bots is signal: when retrieval and citation both score high but entity is weak, the page is technically fine but you're invisible at the brand level. The Agents view shows them live."],
            ["What is 'expected lift'?", "weight × (1 − current_score). The maximum points you can gain by closing a single gap. Fixes are ranked by lift descending — top items have the highest weight × the lowest current score. Effort tag (XS / S / M / L) tells you how much engineering is needed."],
            ["How does the live probe blend?", "We ask up to 30 real assistants the same buyer-intent queries, record who cited or mentioned the brand, and blend that signal at 30% into the composite (the cluster-based heuristic is 70%). Cached 6h. Score numbers can move without your page changing because LLM indexes refresh in the background."],
            ["Score updates after edits?", "Re-scan the URL. Compare via Diff. The 70% heuristic part responds immediately to any HTML change; the 30% live probe lags days while LLM indexes refresh. Don't expect a Day-1 jump from a structural fix."],
            ["Where do I download the PDF / JSON?", "Top of the Report view (status bar, right side). [PDF] gives you a print-friendly capture of the full report — light theme, A4 portrait, no chrome. [JSON] downloads the raw data shape that the report was built from. Useful for sharing with engineers or feeding into your own pipeline."],
            ["Why does the algorithm sometimes show 0 'Live probes' for some LLMs?", "Live probe runs the model on real queries. If you don't have OPENAI_API_KEY, ChatGPT's row shows the heuristic platform score but 0 live probes — same for Claude (ANTHROPIC_API_KEY), Gemini (GEMINI_API_KEY), DeepSeek (DEEPSEEK_API_KEY) etc. The heuristic platform score is always present; live probes are additive."],
          ].map(([q, a], i) => (
            <details key={i} style={{ borderBottom: "1px solid var(--line)", padding: "16px 0" }}>
              <summary style={{ display: "flex", justifyContent: "space-between", color: "var(--ink)", fontWeight: 600, fontSize: 14 }}>
                <span>Q{String(i+1).padStart(2,"0")} &nbsp; {q}</span>
                <span className="muted">[+]</span>
              </summary>
              <div className="muted" style={{ marginTop: 8, fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.6 }}>{a}</div>
            </details>
          ))}
        </div>
      </section>

      {/* footer */}
      <footer style={{ borderTop: "1px solid var(--line)", padding: "20px 32px", display: "flex", flexDirection: "column", alignItems: "center", gap: 14, color: "var(--ink-dim)", fontSize: 11 }}>
        <div style={{ display: "flex", gap: 20, flexWrap: "wrap", justifyContent: "center", alignItems: "center" }}>
          <a href="https://www.producthunt.com/products/answena?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-answena" target="_blank" rel="noopener noreferrer">
            <img alt="Answena - Track how 25+ AI assistants cite your website  | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1148134&theme=neutral&t=1778928408254" />
          </a>
          <div style={{ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', border: "1px solid #e0e0e0", borderRadius: 12, padding: 20, maxWidth: 500, background: "#fff", boxShadow: "0 2px 8px rgba(0,0,0,0.05)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
              <img alt="Answena" src="https://ph-files.imgix.net/8c671739-4570-4ffc-91f8-ffa8f329f73d.png?auto=format&fit=crop&w=80&h=80" style={{ width: 64, height: 64, borderRadius: 8, objectFit: "cover", flexShrink: 0 }} />
              <div style={{ flex: "1 1 0%", minWidth: 0 }}>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: "#1a1a1a", lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>Answena</h3>
                <p style={{ margin: "4px 0 0", fontSize: 14, color: "#666", lineHeight: 1.4, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>Track how 25+ AI assistants cite your website </p>
              </div>
            </div>
            <a href="https://www.producthunt.com/products/answena?embed=true&utm_source=embed&utm_medium=post_embed" target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 4, marginTop: 12, padding: "8px 16px", background: "#ff6154", color: "#fff", textDecoration: "none", borderRadius: 8, fontSize: 14, fontWeight: 600 }}>Check it out on Product Hunt →</a>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", width: "100%", gap: 16, flexWrap: "wrap" }}>
          <span>© 2026 ANSWENA · ANSWER-ENGINE VISIBILITY</span>
          <span>GEO · AEO · LLM CITATION SCORING</span>
        </div>
      </footer>
    </div>
  );
}

window.Landing = Landing;