// LongtailIQ marketing, interactive example outputs
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Card, Icon, Badge, Tabs, OpportunityScore } = DS;

const DATA = {
  seo: { label: "SEO", icon: "globe", rows: [
    ["best organic hair oil for dry scalp", "Commercial", 92],
    ["how often should you oil your hair", "Informational", 84],
    ["organic hair oil benefits for low porosity hair", "Informational", 81],
    ["affordable cold pressed hair oils uk", "Transactional", 76],
  ]},
  ai: { label: "AI Search", icon: "sparkles", rows: [
    ["which hair oil ingredients actually help growth?", "AI prompt", 90],
    ["is rosemary oil or castor oil better for hair?", "Comparison", 87],
    ["recommend a hair oil for postpartum shedding", "AI prompt", 88],
    ["what does science say about hair oiling?", "Informational", 79],
  ]},
  reddit: { label: "Reddit", icon: "message-circle", rows: [
    ["castor oil thinning hair before and after reddit", "Problem-aware", 89],
    ["did rosemary oil actually work for anyone", "Problem-aware", 86],
    ["best drugstore hair oil that isn't greasy", "Commercial", 80],
    ["hair oiling routine that stopped my shedding", "Solution-aware", 83],
  ]},
  youtube: { label: "YouTube", icon: "monitor-play", rows: [
    ["rosemary oil for hair growth before and after", "Informational", 85],
    ["how to apply hair oil correctly tutorial", "Informational", 78],
    ["i tried viral hair oils for 30 days", "Informational", 82],
    ["scalp massage for hair growth routine", "Solution-aware", 75],
  ]},
  shopify: { label: "Shopify", icon: "shopping-bag", rows: [
    ["organic hair oil gift set for her", "Transactional", 81],
    ["cold pressed castor oil 100ml buy", "Transactional", 79],
    ["hair growth oil bundle subscription", "Commercial", 84],
    ["vegan hair oil for curly hair shop", "Transactional", 77],
  ]},
  local: { label: "Local", icon: "map-pin", rows: [
    ["organic hair oil shop amsterdam", "Local", 72],
    ["where to buy castor oil near me", "Local", 74],
    ["natural hair salon oil treatment rotterdam", "Local", 70],
    ["ayurvedic hair oil store the hague", "Local", 68],
  ]},
};
const TONE = { Commercial:"accent", Informational:"blue", Transactional:"green", "AI prompt":"violet", Comparison:"violet", "Problem-aware":"neutral", "Solution-aware":"blue", Local:"amber" };
const TONE_COLOR = { accent:"var(--accent-500)", blue:"var(--viz-blue)", green:"var(--viz-green)", violet:"var(--viz-cyan)", neutral:"var(--ink-400)", amber:"var(--viz-amber)", red:"var(--viz-red)" };

// Intent labels double as TONE lookup keys, so the English key stays canonical
// and only the DISPLAY localizes (mirrors the app's dataLabel pattern).
const intentLabel = (x) => window.LTQM.t("intent." + x.toLowerCase().replace(/[^a-z]+/g, "_"));

function DemoTabs() {
  const t = window.LTQM.t;
  const [tab, setTab] = React.useState("seo");
  const items = Object.keys(DATA).map((id) => ({ id, label: t("demo.tab." + id) }));
  const rows = DATA[tab].rows;
  return (
    <section id="demo" style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "72px 28px" }}>
      <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 36px" }}>
        <div style={{ marginBottom: 18 }}><span className="lt-pill-label"><Icon name="table-2" size={14} style={{ color: "var(--text-muted)" }} />{t("demo.pill")}</span></div>
        <h2 className="lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.6rem)", fontWeight: 600, letterSpacing: "-0.025em", color: "var(--ink-900)", lineHeight: 1.08 }}>{t("demo.title")}<br/><span style={{ color: "var(--ink-400)" }}>{t("demo.title_gray")}</span></h2>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}>
        <Tabs variant="pill" value={tab} onChange={setTab} items={items} />
      </div>
      <Card pad={0} tone="raised" style={{ maxWidth: 840, margin: "0 auto", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
          <Icon name={DATA[tab].icon} size={17} style={{ color: "var(--accent-500)" }} />
          <span style={{ fontSize: 14, fontWeight: 700, color: "var(--text-strong)" }}>{t("demo.caption", { surface: t("demo.tab." + tab) })}</span>
          <div style={{ flex: 1 }} />
          <Badge tone="green" dot>{t("demo.live")}</Badge>
        </div>
        <div>
          {rows.map((r,i)=>(
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 130px 150px", gap: 14, alignItems: "center", padding: "16px 20px", borderTop: i?"1px solid var(--border-subtle)":"none" }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-strong)" }}>{r[0]}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: "var(--text-body)" }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: TONE_COLOR[TONE[r[1]]||"neutral"], flex: "none" }} />{intentLabel(r[1])}
              </span>
              <OpportunityScore score={r[2]} width={64} />
            </div>
          ))}
        </div>
      </Card>
    </section>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.DemoTabs = DemoTabs;
})();