/* global React, Icon, Pill, SrcChip */
const { useState, useEffect, useMemo } = React;

function Landing({ setRole, startFlow }) {
  const roles = [
    { id: "sales",     title: "Sales rep",            who: "John, Dean, Chris, Hayden + 3",  desc: "Quotes in, quotes out. Own a region, allocate containers, send delivery requests.", icon: "signal",    device: "Desktop + mobile", count: 7 },
    { id: "cs",        title: "Customer services",   who: "Emma, Daisy, Kathy (Iona exiting)", desc: "Monthly reconciliation, hire agreements, transport invoice coding, shared inbox.", icon: "inbox",    device: "Desktop",         count: 4 },
    { id: "ops",       title: "Operations / depot",  who: "Depot & inventory",                 desc: "Stock across AKL, TGA, PMR, CHC + regional. Daily movements, off-hire detection.",   icon: "depot",    device: "Desktop + TV",    count: 5 },
    { id: "transport", title: "Transport partner",   who: "Lion Crane, Morgan Crane, A Crane…",desc: "SMS link → tap → Accept. No app install. Designed for the truck cab.",             icon: "truck",    device: "Mobile (SMS)",    count: "20–30" },
    { id: "customer",  title: "End customer",        who: "Hire & sale customers",             desc: "Live delivery tracker from sales order to photo-on-delivery. SMS link, no login.", icon: "phone",    device: "Mobile (SMS)",    count: "—" },
    { id: "leadership",title: "Leadership dashboard", who: "Hayden, Matt's co-director",       desc: "The TV-screen view of in-flight jobs, GP, response-time KPIs and exceptions.",     icon: "dashboard", device: "Big screen",     count: 2 },
    { id: "voice",     title: "Voice agent",          who: "Drivers & reps on the road",       desc: "Phone-based agent to confirm jobs hands-free. One illustrative screen.",            icon: "mic",      device: "Illustrative",    count: "—" },
  ];

  const flows = [
    { id: "quote-to-delivery", title: "Online quote → delivery booked", desc: "Web form → sales rep → apply template → send → allocate → SMS to transport → end-customer confirm.", steps: 6, roles: ["sales","transport","customer","leadership"] },
    { id: "monthly-recon",      title: "Monthly repeating invoice reconciliation", desc: "95 auto-matched. Work 4 exceptions in under a minute. Kill a Xero repeating invoice from Cin7.", steps: 4, roles: ["cs"] },
    { id: "transport-invoice",  title: "Transport invoice arrives & reconciles",   desc: "Multi-line invoice parsed. System proposes SO matches. Confirm → cost hits Cin7 → GP updates.", steps: 3, roles: ["cs","leadership"] },
    { id: "off-hire-detected",  title: "Off-hire detected at depot",               desc: "Gate-in with no off-hire request. CS kills the Xero repeating invoice before next month.", steps: 3, roles: ["ops","cs"] },
  ];

  return (
    <div className="landing">
      {/* Hero */}
      <div className="landing-hero">
        <div className="landing-hero-left">
          <div className="landing-eyebrow"><span className="dot" /> Vision prototype · v0.4 · for client review</div>
          <h1>The Connected Hub for Sea&nbsp;Containers NZ</h1>
          <p>
            One calm surface that sits on top of Cin7, Xero, Adobe Sign and OneDrive — and brings the right slice of
            data to the right person at the right time. Your systems stay the source of truth. The Hub stops
            the tab-hopping, the manual reconciliation and the email-and-phone-tag.
          </p>
          <div className="landing-hero-meta">
            <div><strong>4</strong><span>existing systems, kept authoritative</span></div>
            <div><strong>7</strong><span>roles, each with a purpose-built view</span></div>
            <div><strong>4</strong><span>end-to-end flows, clickable</span></div>
          </div>
          <div className="landing-cta">
            <button className="btn primary lg" onClick={() => { setRole("sales"); }}>
              Enter as John (Christchurch) <Icon name="arrow" size={14} />
            </button>
            <button className="btn lg" onClick={() => startFlow("quote-to-delivery")}>
              <Icon name="play" size={13} /> Run the quote → delivery flow
            </button>
          </div>
        </div>

        <div className="landing-hero-right">
          <SystemsMap />
        </div>
      </div>

      {/* Roles grid */}
      <div className="landing-section">
        <div className="landing-section-head">
          <h2>Pick a role to enter</h2>
          <span className="muted">In production, this would be permission-based SSO. Here it's a switcher for demo.</span>
        </div>
        <div className="roles-grid">
          {roles.map(r => (
            <button key={r.id} className={`role-card role-${r.id}`} onClick={() => setRole(r.id)}>
              <div className="role-ico"><Icon name={r.icon} size={20} /></div>
              <div className="role-title">{r.title}</div>
              <div className="role-who">{r.who}</div>
              <div className="role-desc">{r.desc}</div>
              <div className="role-foot">
                <span className="pill info no-dot">{r.device}</span>
                <span className="mono" style={{ color: "var(--ink-400)", fontSize: 11 }}>{typeof r.count === "number" ? `${r.count} users` : r.count}</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Flows */}
      <div className="landing-section">
        <div className="landing-section-head">
          <h2>Clickable flows</h2>
          <span className="muted">Each flow walks itself — start one and the banner will guide you from role to role.</span>
        </div>
        <div className="flows-grid">
          {flows.map(f => (
            <button key={f.id} className="flow-card" onClick={() => startFlow(f.id)}>
              <div className="flow-card-head">
                <span className="pill no-dot" style={{ background: "var(--brand-cyan-50)", color: "var(--brand-cyan-600)" }}>{f.steps} steps</span>
                <div className="flow-card-roles">
                  {f.roles.map(rid => <span key={rid} className="mini-pill">{rid}</span>)}
                </div>
              </div>
              <div className="flow-card-title">{f.title}</div>
              <div className="flow-card-desc">{f.desc}</div>
              <div className="flow-card-cta"><Icon name="play" size={12} /> Run flow</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function SystemsMap() {
  // Visual: Hub in the centre, systems around the edge, light lines to show data flow.
  // Plus small "lives in" labels.
  const systems = [
    { id: "cin7",    name: "Cin7",    note: "Containers, CRM, SO, PPSR",    x: 12, y: 20, color: "#7A5FCD" },
    { id: "xero",    name: "Xero",    note: "Invoicing, repeating invoices", x: 76, y: 12, color: "#17B2E0" },
    { id: "adobe",   name: "Adobe Sign", note: "Hire agreements",            x: 86, y: 58, color: "#E5502F" },
    { id: "onedrive",name: "OneDrive",note: "Signed docs",                   x: 60, y: 86, color: "#0364B8" },
    { id: "web",     name: "Website", note: "Quote form",                    x: 8,  y: 64, color: "#2F9E6B" },
    { id: "outlook", name: "Outlook", note: "wecare@…",                      x: 30, y: 90, color: "#0364B8" },
  ];
  return (
    <div className="systems-map">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {systems.map(s => (
          <line key={s.id} x1={s.x+5} y1={s.y+5} x2="50" y2="50" stroke="url(#wire)" strokeWidth="0.25" strokeDasharray="1 1" />
        ))}
        <defs>
          <linearGradient id="wire" x1="0" x2="1">
            <stop offset="0" stopColor="#1FA7E6" stopOpacity="0.8" />
            <stop offset="1" stopColor="#1FA7E6" stopOpacity="0.15" />
          </linearGradient>
        </defs>
      </svg>

      {systems.map(s => (
        <div key={s.id} className="sys-node" style={{ left: `${s.x}%`, top: `${s.y}%` }}>
          <span className="sys-dot" style={{ background: s.color }} />
          <div className="sys-body">
            <div className="sys-name">{s.name}</div>
            <div className="sys-note">{s.note}</div>
          </div>
        </div>
      ))}

      <div className="sys-hub">
        <img src="assets/logo-mark.png" alt="" />
        <div>
          <div className="sys-hub-title">The Hub</div>
          <div className="sys-hub-sub">orchestrates · doesn't own</div>
        </div>
      </div>
    </div>
  );
}

window.Landing = Landing;