/* =========================================================
   CarDealer.ai Home — main page composer
   ========================================================= */

/* ---------- Meet the Agents section ---------- */
function MeetAgentsSection() {
  return (
    <section data-screen-label="01 Hero" style={{ padding: "120px 0", background: "var(--bg)" }}>
      <div className="page">
        <SectionHead
          kicker="Meet the agents"
          title="Trained to talk, listen, and convert just like your best employees"
          body="Purpose-built AI agents designed to work inside your dealership. They handle conversations, schedule appointments, and capture every opportunity at scale."
          align="center"
        />
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
        }}>
          {AGENTS.map((a, i) => <AgentSpotlight key={a.id} agent={a} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Features section ---------- */
function FeaturesSection() {
  const features = [
    {
      kicker: "Outbound Sales", title: "Reactivate unsold leads",
      agent: AGENT_BY.summer,
      bullets: ["Reactivates dormant leads", "Rescues marketing spend", "Books appointments"],
      tools: ["SMS", "Voice"],
    },
    {
      kicker: "Outbound Sales", title: "Reactivate past customers",
      agent: AGENT_BY.summer,
      bullets: ["Sends buyback offers", "Overcomes objections", "Books appointments"],
      tools: ["SMS", "Voice"],
    },
    {
      kicker: "Outbound Service", title: "Reactivate service customers",
      agent: AGENT_BY.april,
      bullets: ["Sends service reminders", "Offers incentives", "Books in service scheduler"],
      tools: ["SMS", "Voice"],
    },
    {
      kicker: "Inbound Service", title: "Don't let calls go to voicemail",
      agent: AGENT_BY.taylor,
      bullets: ["Answers every call 24/7", "Books real appointments", "Live transfers when needed"],
      tools: ["Voice"],
    },
    {
      kicker: "Inbound Sales", title: "Answer every CRM lead immediately",
      agent: AGENT_BY.summer,
      bullets: ["Immediate responses", "Human takeover", "Smart follow-ups"],
      tools: ["SMS"],
    },
    {
      kicker: "Outbound Service", title: "Turn recalls into booked service",
      agent: AGENT_BY.riley,
      bullets: ["Recall outreach", "Books appointments", "Smart recall conversations"],
      tools: ["SMS", "Voice"],
    },
    {
      kicker: "Inbound", title: "Never miss a call again",
      agent: AGENT_BY.avery,
      bullets: ["Rescues all missed calls", "Handles after-hours calls", "Live transfers"],
      tools: ["Voice"],
    },
  ];

  return (
    <section data-screen-label="03 Features" style={{
      padding: "120px 0",
      background: "var(--bg-alt)",
    }}>
      <div className="page">
        <SectionHead
          kicker="Sell smarter, not harder. With AI."
          title="The smartest hire you will ever make"
          body="Don't let sales burnout or bad marketing hold your dealership back."
          align="center"
          cta={<Btn variant="primary" size="lg" href="https://calendly.com/charles-cardealer/30min" target="_blank">Book a demo</Btn>}
        />

        {/* Grid of feature detail cards */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
        }}>
          {features.map((f, i) => {
            const isLast = i === features.length - 1;
            return (
              <div key={i} style={{ gridColumn: isLast ? "2 / 3" : "auto" }}>
                <FeatureCard {...f} />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Client Portal section ---------- */
function ClientPortalSection() {
  const [openIdx, setOpenIdx] = useState(null);
  const outcomes = [
    "Never miss a call",
    "Respond to leads instantly",
    "Book more service visits",
    "Increase appointments",
    "Recover lost revenue",
    "Boost conversion rates",
    "Re-engage past customers",
    "Fill your pipeline",
    "Increase RO count",
    "Improve customer experience",
    "24/7 coverage",
    "Reduce staffing pressure",
    "Automate follow-ups",
    "Drive fixed-ops revenue",
    "Turn recalls into visits",
  ];

  const rows = [
    { channel: "phone",  agent: AGENT_BY.taylor, name: "Alice Clements",      phone: "(978) 396-8457", email: "alice.clements@example.com",      dur: "2:57", date: "8/30/26 · 9:42 AM" },
    { channel: "phone",  agent: AGENT_BY.avery,  name: "Paris Jefferson",     phone: "(470) 851-7165", email: "paris.jefferson@example.com",     dur: "4:25", date: "8/30/26 · 9:38 AM" },
    { channel: "email",  agent: AGENT_BY.summer, name: "Bjorn Knapp",         phone: "(940) 650-6155", email: "bjorn.knapp@example.com",         dur: "—",    date: "8/30/26 · 9:15 AM" },
    { channel: "phone",  agent: AGENT_BY.taylor, name: "Linda Finley",        phone: "(354) 973-1551", email: "linda.finley@example.com",        dur: "12:17", date: "8/29/26 · 12:04 PM" },
    { channel: "sms",    agent: AGENT_BY.summer, name: "Gracelynn Maldonado", phone: "(363) 680-5380", email: "gracelynn.maldonado@example.com", dur: "—",    date: "8/29/26 · 11:48 AM" },
    { channel: "chat",   agent: AGENT_BY.lily,   name: "Madalyn McCormick",   phone: "(166) 581-8765", email: "madalyn.mccormick@example.com",   dur: "—",    date: "8/29/26 · 11:30 AM" },
    { channel: "voice",  agent: AGENT_BY.riley,  name: "Winnie Daugherty",    phone: "(720) 360-6245", email: "winnie.daugherty@example.com",    dur: "—",    date: "8/28/26 · 4:18 PM" },
    { channel: "email",  agent: AGENT_BY.april,  name: "Logan Reyna",         phone: "(245) 848-9559", email: "logan.reyna@example.com",         dur: "—",    date: "8/28/26 · 2:51 PM" },
  ];

  const channelIcon = {
    phone: "phone",
    sms:   "chat",
    chat:  "chat",
    email: "envelope",
    voice: "phone",
  };

  return (
    <section data-screen-label="04 Client Portal" style={{ padding: "120px 0", background: "var(--bg)" }}>
      <div className="page">
        <SectionHead
          kicker="Everything your dealership needs in one dashboard"
          title="Real-time insights. Real results."
          body="See every call, message, appointment, and campaign in one place. Monitor performance, sentiment, and outcomes without chasing reports or spreadsheets."
          align="center"
        />

        {/* Floating outcomes marquees */}
        <div style={{ marginBottom: 56, display: "flex", flexDirection: "column", gap: 14 }}>
          <Marquee items={outcomes.slice(0, 8)} speed={60} />
          <Marquee items={outcomes.slice(7)} speed={70} direction="right" />
        </div>

        {/* Portal preview */}
        <div style={{
          position: "relative",
          borderRadius: 24, overflow: "hidden", border: "1px solid var(--line)",
          boxShadow: "var(--e-4)", background: "var(--bg)",
        }}>
          {/* Top chrome */}
          <div style={{
            display: "flex", alignItems: "center", gap: 16,
            padding: "16px 24px", borderBottom: "1px solid var(--line)",
          }}>
            <img src="assets/logo/logo-horizontal.svg" alt="" style={{ height: 26 }} />
            <div style={{ flex: 1 }}></div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "var(--bg-alt)", padding: "8px 14px", borderRadius: 999, fontSize: 13,
            }}>
              <span style={{ color: "var(--body)", fontWeight: 500 }}>Company View</span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--body)" strokeWidth="2.4" strokeLinecap="round"><path d="M6 9l6 6 6-6"/></svg>
            </div>
          </div>

          {/* Layout: sidebar + main */}
          <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", minHeight: 580 }}>
            <aside style={{
              padding: "20px 12px", borderRight: "1px solid var(--line)",
              display: "flex", flexDirection: "column", gap: 4,
            }}>
              {[
                { id: "dashboard",   label: "Dashboard",    icon: "dashboard",  active: false },
                { id: "convos",      label: "Conversations", icon: "chat",      active: true  },
                { id: "appts",       label: "Appointments", icon: "calendar",   active: false },
                { id: "campaigns",   label: "Campaigns",    icon: "megaphone",  active: false },
                { id: "leads",       label: "Leads",        icon: "trending",   active: false },
              ].map(item => (
                <a key={item.id} href="#" style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "10px 12px", borderRadius: 10,
                  background: item.active ? "var(--cobalt-50)" : "transparent",
                  color: item.active ? "var(--cobalt-700)" : "var(--ink)",
                  fontSize: 14, fontWeight: item.active ? 600 : 500,
                  position: "relative",
                }}>
                  {item.active ? <span style={{ position: "absolute", left: -12, top: 8, bottom: 8, width: 3, background: "var(--cobalt-500)", borderRadius: 2 }}></span> : null}
                  <Icon name={item.icon} size={18} color="currentColor" />
                  {item.label}
                </a>
              ))}
            </aside>

            <main style={{ padding: "28px 32px" }}>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 16, marginBottom: 20,
              }}>
                <h3 style={{ fontSize: 28, fontWeight: 700, color: "var(--ink)", margin: 0, letterSpacing: "-0.015em" }}>Conversations</h3>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  border: "1px solid var(--line)", borderRadius: 12,
                  padding: "10px 14px", width: 340, background: "var(--bg)",
                }}>
                  <Icon name="search" size={16} color="var(--body)" />
                  <span style={{ fontSize: 13, color: "var(--body)" }}>Search by name, phone, email or keywords…</span>
                </div>
              </div>

              <div style={{
                background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 14,
              }}>
                <div style={{
                  display: "grid", gridTemplateColumns: "60px 1.4fr 1fr 1.4fr 80px 1.1fr 96px",
                  padding: "12px 20px", fontSize: 11, fontWeight: 600, color: "var(--body)",
                  textTransform: "uppercase", letterSpacing: "0.08em",
                  borderBottom: "1px solid var(--line-soft)",
                }}>
                  <div>Channel</div><div>Customer</div><div>Phone</div><div>Email</div><div>Duration</div><div>Date / time</div><div></div>
                </div>
                {rows.map((row, i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "60px 1.4fr 1fr 1.4fr 80px 1.1fr 96px",
                    padding: "14px 20px", alignItems: "center",
                    borderBottom: i < rows.length - 1 ? "1px solid var(--line-soft)" : "none",
                    fontSize: 13,
                    background: openIdx === i ? "var(--cobalt-50)" : "transparent",
                    transition: "background 160ms ease",
                  }}>
                    <div>
                      <Icon name={channelIcon[row.channel]} size={16} color="var(--cobalt-600)" background="var(--cobalt-50)" padding={8} radius={8} />
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                      <AgentAvatar src={row.agent.src} size={28} ring={false} />
                      <div style={{ fontWeight: 600, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{row.name}</div>
                    </div>
                    <div style={{ color: "var(--ink)", fontFamily: "var(--font-mono)" }}>{row.phone}</div>
                    <div style={{ color: "var(--body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{row.email}</div>
                    <div style={{ color: row.dur === "\u2014" ? "var(--body)" : "var(--ink)", fontFamily: "var(--font-mono)" }}>{row.dur}</div>
                    <div style={{ color: "var(--body)" }}>{row.date}</div>
                    <div>
                      <button onClick={() => setOpenIdx(i)} style={{
                        display: "inline-flex", alignItems: "center", gap: 6,
                        padding: "6px 10px", borderRadius: 8,
                        background: openIdx === i ? "var(--cobalt-500)" : "transparent",
                        color: openIdx === i ? "#fff" : "var(--cobalt-600)",
                        border: openIdx === i ? "1px solid var(--cobalt-500)" : "1px solid var(--line)",
                        fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600, cursor: "pointer",
                        transition: "background 160ms ease, color 160ms ease",
                      }}>
                        View
                        <Icon name="arrowRight" size={11} color="currentColor" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </main>
          </div>

          {/* Conversation side panel — shown when a row's View is clicked */}
          {openIdx !== null ? (
            <ConversationPanel row={rows[openIdx]} onClose={() => setOpenIdx(null)} />
          ) : null}
        </div>
      </div>
    </section>
  );
}

/* ---------- Integrations section ---------- */
function IntegrationsSection() {
  const ints = [
    { name: "CRM",                desc: "VinSolutions, DealerSocket, Elead, Salesforce.", icon: "user" },
    { name: "DMS",                desc: "CDK, Reynolds, Tekion, Dealertrack.",            icon: "dashboard" },
    { name: "Service schedulers", desc: "Xtime, MyKaarma, Tekion Service.",               icon: "calendar" },
    { name: "Inventory",          desc: "vAuto, HomeNet, real-time stock sync.",          icon: "inbox" },
    { name: "Phone system",       desc: "RingCentral, Vonage, Twilio.",                   icon: "phone" },
  ];
  return (
    <section data-screen-label="05 Integrations" style={{ padding: "120px 0", background: "var(--bg-alt)" }}>
      <div className="page">
        <SectionHead
          kicker="Integrations"
          title="Integrated into what matters."
          body="Plugs into the stack you already run."
          align="center"
        />
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16,
        }}>
          {ints.map(i => <IntegrationTile key={i.name} {...i} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Team Sells Cars section ---------- */
function TeamSellsSection() {
  return (
    <section data-screen-label="06 Team Sells Cars" style={{
      padding: "120px 0", background: "var(--bg)",
    }}>
      <div className="page" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80,
        alignItems: "center",
      }}>
        <div>
          <SectionHead
            kicker="The perfect AI employees"
            title="Your team sells cars. Our AI handles everything else."
            body="Your team is busy selling cars. Let AI employees handle the follow-ups, missed calls, and customer conversations you don't have time for."
            cta={<Btn variant="primary" size="lg" href="https://calendly.com/charles-cardealer/30min" target="_blank">Book a demo</Btn>}
          />
        </div>
        <TeamSellsHero />
      </div>
    </section>
  );
}

/* ---------- Before / After section ---------- */
function BeforeAfterSection() {
  const rows = [
    { before: "No buyback offers to past customers",  after: "AI sends personalized buyback offers" },
    { before: "Equity mining is overlooked",          after: "AI identifies positive-equity customers" },
    { before: "Service-to-sales rarely happens",      after: "AI turns service visits into sales conversations" },
    { before: "Unsold leads sit dormant",             after: "AI re-engages cold and old leads" },
    { before: "Sales overwhelmed with manual tasks",  after: "Sales focuses only on hot, qualified leads" },
    { before: "Slow response times kill conversion",  after: "AI converts more leads into appointments" },
  ];
  return (
    <section data-screen-label="07 Before & After" style={{ padding: "120px 0", background: "var(--bg-alt)" }}>
      <div className="page">
        <SectionHead
          kicker="Improve your sales"
          title="Every dealership needs AI employees."
          body="Here's what happens when you add AI to your dealership…"
          align="center"
          cta={<Btn variant="primary" size="lg" href="https://calendly.com/charles-cardealer/30min" target="_blank">Book a demo</Btn>}
        />
        <BeforeAfter rows={rows} />
      </div>
    </section>
  );
}

/* ---------- Closer section ---------- */
function CloserSection() {
  return (
    <section data-screen-label="08 Closer" style={{
      padding: "120px 0",
      background: "var(--ink)",
      color: "#fff",
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(circle at 80% 50%, rgba(31,93,255,0.22), transparent 60%)",
      }}></div>
      <div className="page" style={{
        position: "relative", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80,
        alignItems: "center",
      }}>
        <div>
          <div className="kicker" style={{ color: "var(--cobalt-300)" }}>Close more deals, keep your team lean</div>
          <h2 className="h-section-title" style={{ color: "#fff" }}>
            Sell more cars without hiring more staff.
          </h2>
          <p className="h-section-body" style={{ color: "rgba(255,255,255,0.7)" }}>
            Replace missed calls, slow responses, and lost revenue with proactive AI employees who never stop working.
          </p>

          <ul style={{ margin: "32px 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              "Scale sales volume seamlessly",
              "Boost productivity",
              "Close more deals",
            ].map((b, i) => (
              <li key={i} style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 18, color: "rgba(255,255,255,0.92)", fontWeight: 500 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 999, background: "var(--cobalt-500)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0,
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
                </span>
                {b}
              </li>
            ))}
          </ul>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
            <Btn variant="primary" size="lg" href="https://calendly.com/charles-cardealer/30min" target="_blank">Book a demo</Btn>
            <PhoneCaptureCTA dark />
          </div>
        </div>

        <GrowthIllo />
      </div>
    </section>
  );
}

/* ---------- App ---------- */
function App() {
  return (
    <div>
      <Hero />
      <MeetAgentsSection />
      <FeaturesSection />
      <ClientPortalSection />
      <IntegrationsSection />
      <TeamSellsSection />
      <BeforeAfterSection />
      <CloserSection />
    </div>
  );
}

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