/* Showcase.jsx, industry use-cases with animated WhatsApp → AI → Action flow diagrams */

function FlowLine() {
  return (
    <div className="flow-line">
      <span className="dot"></span>
      <span className="dot"></span>
      <span className="dot"></span>
    </div>
  );
}

function FlowDiagram({ industry, scene }) {
  return (
    <div className="flow-wrap">
      <div className="flow-diagram">
        <div className="flow-step msg">
          <span className="industry-badge">{industry}</span>
          <div className="bubble-text">{scene.message}</div>
          <div className="from">{scene.fromName} · via WhatsApp · {scene.fromTime}</div>
        </div>

        <FlowLine />

        <div className="flow-step ai">
          <div className="flow-ai-head">
            <span className="ai-orb" style={{width:12,height:12}}></span>
            Aspire Sage AI · intent: {scene.intent}
          </div>
          <div className="flow-fields">
            {scene.fields.map((f,i)=>(
              <div className="flow-field" key={i}>
                <span className="k">{f.k}</span>
                <span className="v">{f.v}</span>
              </div>
            ))}
          </div>
        </div>

        <FlowLine />

        <div className="flow-step action">
          <span className="ic">{scene.actionIcon}</span>
          <div>
            <div className="at">{scene.actionTitle}</div>
            <div className="ad">{scene.actionDetail}</div>
          </div>
        </div>

        <FlowLine />

        <div className="flow-step confirm">
          <span className="ck"><Icon.check/></span>
          {scene.confirm}
        </div>
      </div>
    </div>
  );
}

function Showcase() {
  const [tab, setTab] = React.useState(0);

  const industries = [
    {
      name: 'Restaurants',
      icon: <Icon.utensils/>,
      copy: {
        h: <>Reservations that <span className="serif">book themselves</span>.</>,
        p: 'Guests message your restaurant on WhatsApp. Aspire Sage reads their request, checks table availability, books the slot, and sends a confirmation, without a host touching the phone.',
        bullets: [
          'Real-time table & party-size matching',
          'Auto-reminders 2h before, no-show prediction',
          'Walk-in waitlist via WhatsApp queue',
          'Syncs with OpenTable, SevenRooms, Resy',
        ],
      },
      scene: {
        fromName: 'Sofia Marín',
        fromTime: '19:12',
        message: '"Hi! Can we get a table for 4 tonight around 8pm? One vegetarian, kids welcome please."',
        intent: 'reservation',
        fields: [
          {k:'party', v:'4'},
          {k:'time', v:'20:00'},
          {k:'date', v:'today'},
          {k:'notes', v:'veg · kids'},
        ],
        actionIcon: <Icon.cal/>,
        actionTitle: 'Booked · Table 7',
        actionDetail: '19:45 → 21:30 · high-chair noted',
        confirm: 'Confirmed via WhatsApp · reminder @ 18:00',
      },
    },
    {
      name: 'Travel & Tours',
      icon: <Icon.plane/>,
      copy: {
        h: <>Quote travellers in <span className="serif">seconds</span>, close in days.</>,
        p: 'Inquiries pour in from Instagram, your site, WhatsApp. Aspire Sage qualifies the lead, matches packages, builds a quote, and follows up at the right moment, every time.',
        bullets: [
          'Auto-quote from your package catalogue',
          'Multi-currency, multi-language replies',
          'Drip follow-ups timed to traveller intent',
          'Post-trip review + referral capture',
        ],
      },
      scene: {
        fromName: 'Daniel Cohen',
        fromTime: '11:04',
        message: '"Looking for a 5-day Bali trip for 2 in March, mid-range. Honeymoon, anywhere off-grid would be great."',
        intent: 'quote_request',
        fields: [
          {k:'destination', v:'Bali, ID'},
          {k:'pax', v:'2'},
          {k:'dates', v:'Mar 12–16'},
          {k:'tier', v:'mid · honeymoon'},
        ],
        actionIcon: <Icon.plane/>,
        actionTitle: '3 packages matched',
        actionDetail: 'Quote PDF sent · lead → Pipeline',
        confirm: 'Follow-up scheduled in 48h if no reply',
      },
    },
    {
      name: 'Real Estate',
      icon: <Icon.home/>,
      copy: {
        h: <>Match buyers to homes <span className="serif">while you sleep</span>.</>,
        p: 'Every property inquiry is qualified, matched to listings, and offered a viewing slot automatically, agents only step in when the buyer is ready.',
        bullets: [
          'Listing-match from natural-language briefs',
          'Auto-share PDFs, floor plans & videos',
          'Viewing booked into agent calendar',
          'Post-viewing offer & feedback capture',
        ],
      },
      scene: {
        fromName: 'Priya Shah',
        fromTime: '09:38',
        message: '"Any 2-bed flats under £600k in Hackney? Garden preferred. Can view this weekend."',
        intent: 'property_match',
        fields: [
          {k:'beds', v:'2'},
          {k:'area', v:'Hackney'},
          {k:'budget', v:'≤ £600k'},
          {k:'must', v:'garden'},
        ],
        actionIcon: <Icon.home/>,
        actionTitle: '4 listings sent · viewing booked',
        actionDetail: 'Sat 11:00 · agent Maya notified',
        confirm: 'Calendar invite delivered · pre-viewing brief drafted',
      },
    },
    {
      name: 'Clinics & Salons',
      icon: <Icon.stetho/>,
      copy: {
        h: <>Bookings, reminders, intake, <span className="serif">automatic</span>.</>,
        p: 'Patients and clients book appointments by WhatsApp message. Aspire Sage finds an open slot, sends the intake form, and reminds them the day before, cutting no-shows by half.',
        bullets: [
          'Practitioner-aware slot matching',
          'Intake forms auto-sent before visit',
          '24h + 2h reminders, reschedule in-thread',
          'Post-visit care plan & rebooking',
        ],
      },
      scene: {
        fromName: 'James Park',
        fromTime: '16:22',
        message: '"Need to book with Dr. Reyes next week, back pain, follow-up visit if possible."',
        intent: 'appointment',
        fields: [
          {k:'doctor', v:'Dr. Reyes'},
          {k:'type', v:'follow-up'},
          {k:'reason', v:'back pain'},
          {k:'when', v:'next week'},
        ],
        actionIcon: <Icon.cal/>,
        actionTitle: 'Tue 14:30 · 30 min slot',
        actionDetail: 'Room 3 · intake form sent',
        confirm: 'Reminder + intake scheduled · charted to EMR',
      },
    },
  ];

  const cur = industries[tab];

  return (
    <section className="padded showcase" id="product">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">How teams use Aspire Sage</div>
          <h2>One platform, <span className="serif">every</span> kind of business.</h2>
          <p>See how Aspire Sage turns a WhatsApp message into a booking, a quote, or a closed deal, automatically. Pick an industry to walk through the flow.</p>
        </div>

        <div className="tabs">
          {industries.map((t,i)=>(
            <button key={i} className={"tab" + (i===tab ? " active" : "")} onClick={()=>setTab(i)}>
              {t.icon} {t.name}
            </button>
          ))}
        </div>

        <div className="showcase-stage">
          <div className="showcase-pane" key={tab}>
            <div className="showcase-copy">
              <h3>{cur.copy.h}</h3>
              <p>{cur.copy.p}</p>
              <div className="showcase-bullets">
                {cur.copy.bullets.map((b,i)=>(
                  <div className="showcase-bullet" key={i}>
                    <span className="ck"><Icon.check/></span> {b}
                  </div>
                ))}
              </div>
              <div>
                <a href="#" className="btn btn-primary">See {cur.name.toLowerCase()} playbook <Icon.arrow/></a>
              </div>
            </div>
            <div className="showcase-art">
              <FlowDiagram industry={cur.name} scene={cur.scene} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Showcase = Showcase;