/* global React, Icon, D365Mock, BrowserShot, Photo, STOCK, SHOTS, AnimatedCounter */
const ProductPage = ({ go }) => (
  <div className="page-enter">
    <section className="hero" style={{ padding: '80px 0 40px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }} className="product-hero-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF' }}>
                <Icon name="sparkles" size={22}/>
              </div>
              <div>
                <div style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Smart Panel AI</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}><span className="chip-mono">v2.1.0</span> &middot; D365 9.2+ &middot; Power Apps</div>
              </div>
            </div>
            <h1 style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginBottom: 20 }}>The <span className="hl">AI side panel</span> for model-driven apps.</h1>
            <p className="lead" style={{ marginBottom: 28, fontSize: 18 }}>Drops onto any record form. Reads the record you're on (and the related ones), then answers in plain English — what's it about, who owns it, what's at risk, and what should I do next?</p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>Try it free <Icon name="arrow-right" size={16}/></a>
              <a className="btn btn-secondary btn-lg" href="#install">Install in your tenant</a>
            </div>
          </div>
          <div>
            <BrowserShot
              src={SHOTS.aiAssistant}
              url="org.crm.dynamics.com / opportunities / Café BG-1 Grinder"
              alt="Smart Panel AI assistant docked inside a Dynamics 365 opportunity record"
              fallback={<D365Mock/>}
            />
          </div>
        </div>
      </div>
    </section>

    {/* See it in action — three real screenshots */}
    <section className="section">
      <div className="container">
        <span className="eyebrow">See it in action</span>
        <h2 style={{ maxWidth: '22ch', marginBottom: 16 }}>Three modules. One panel. Inside D365.</h2>
        <p className="lead" style={{ maxWidth: '60ch', marginBottom: 32 }}>Switch between AI Assistant, Follow-up Advisor, and Email Drafting — all without leaving the record.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="feature-grid">
          <ShotCard label="AI Assistant" caption="Ask anything about the record. Full conversation history saved."  src={SHOTS.aiAssistant}/>
          <ShotCard label="Follow-up Advisor" caption="Auto-suggests next-best actions with priority + due dates." src={SHOTS.followUp}/>
          <ShotCard label="Email Drafting" caption="Tone-aware drafts (Formal, Friendly, Follow-up, Proposal)." src={SHOTS.email}/>
        </div>
      </div>
    </section>

    <section className="section-tight section-alt">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="stats-grid">
          <Stat n="30 min" l="Install time, start to finish"/>
          <Stat n="60%" l="Cheaper than Copilot + Power Automate"/>
          <Stat n="3" l="Indian languages + Hinglish"/>
          <Stat n="0" l="Extra Microsoft licenses needed"/>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <span className="eyebrow">What you get</span>
        <h2 style={{ maxWidth: '22ch', marginBottom: 16 }}>A full AI layer, not just a chatbot.</h2>
        <p className="lead" style={{ maxWidth: '60ch', marginBottom: 32 }}>SmartPanel understands D365 — entities, fields, relationships, activities, security. Every tab is contextual to the record you're on.</p>
        <div className="feature-grid">
          <FeatCard num="01" title="AI Assistant" body="Natural language. Create / update / delete activities, query CRM, ask about the current record. Conversation history saved per record."/>
          <FeatCard num="02" title="Record Summary" body="One-click AI readable summary + suggested next action for any record. Pulls related rows too — last activities, open quotes, child contacts."/>
          <FeatCard num="03" title="Activities Timeline" body="Unified view of calls, emails, tasks, meetings — filter, complete, delete inline. No tab-switching to the activities subgrid."/>
          <FeatCard num="04" title="Insights KPIs" body="Configurable count cards — quotes, orders, invoices, activities. JSON-driven, render in the panel beside the record."/>
          <FeatCard num="05" title="Quick Actions" body="One-click task / call / meeting / email / CSV export — admin-configured per role. Up to 2 minutes rolling undo on every write."/>
          <FeatCard num="06" title="Sentiment" body="AI labels recent interactions as positive / neutral / negative / mixed so account owners know where to spend their next hour."/>
          <FeatCard num="07" title="Follow-up Scheduler" body="AI reads context and suggests the right next action + date. One-click confirm — writes a task or appointment to D365."/>
          <FeatCard num="08" title="Email Drafting" body="Context-aware draft emails in your voice. Formal, Friendly, Follow-up, Proposal tones. Send from D365 or save as draft."/>
          <FeatCard num="09" title="Attachments" body="Drop PDF / DOCX / XLSX / images — AI reads and answers about them inline. SOPs, playbooks, contracts, scanned receipts."/>
          <FeatCard num="10" title="Relationships" body="Visual map of records linked to the current one. Tree, cards, table views. Walk the graph without losing your place."/>
          <FeatCard num="11" title="Celebration Alerts" body="Birthdays, anniversaries — trigger right on the form with a one-click draft message. Small touches, big retention."/>
          <FeatCard num="12" title="Undo (2 minutes)" body="Up to 2 minutes rolling undo on any AI-created / updated / deleted record. AI mistakes don't become support tickets."/>
        </div>
      </div>
    </section>

    <section className="section section-alt">
      <div className="container">
        <span className="eyebrow">Trust & deployment</span>
        <h2 style={{ maxWidth: '20ch', marginBottom: 32 }}>Lives inside your tenant. Plays by your rules.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="trust-grid">
          <div className="card">
            <Icon name="lock" size={24}/>
            <h3 style={{ marginTop: 16, marginBottom: 10, fontSize: 18 }}>Your data, your tenant</h3>
            <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-3)', margin: 0 }}>Calls Microsoft's Azure OpenAI inside your subscription, not ours. The panel runs as a PCF control in the user's browser session. No copies, no caches, no training.</p>
          </div>
          <div className="card">
            <Icon name="shield" size={24}/>
            <h3 style={{ marginTop: 16, marginBottom: 10, fontSize: 18 }}>Respects security roles</h3>
            <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-3)', margin: 0 }}>The panel only sees what the signed-in user can see. Field-level security, business units, and team ownership are all honoured by the underlying Web API calls.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="install" className="section">
      <div className="container">
        <span className="eyebrow">Install</span>
        <h2 style={{ maxWidth: '20ch', marginBottom: 16 }}>Three steps. About one minute.</h2>
        <p className="lead" style={{ maxWidth: '60ch', marginBottom: 32 }}>Sandbox first. Production when you're ready.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="install-grid">
          <Step n="1" title="Download solution" body={<>Grab <code>SmartPanelAI_managed.zip</code> from your dashboard.</>}/>
          <Step n="2" title="Import to your environment" body={<>Power Platform admin center → Solutions → Import. Pick the <code>.zip</code>.</>}/>
          <Step n="3" title="Add to a form" body={<>Open Form Designer, drop <code>SmartPanelAI_Control</code> on a section, save & publish.</>}/>
        </div>
      </div>
    </section>

    <section className="section section-ink">
      <div className="container text-center">
        <h2 style={{ maxWidth: '22ch', margin: '0 auto 16px', fontSize: 'clamp(32px, 4vw, 48px)' }}>30-day free trial. No card.</h2>
        <p className="lead" style={{ maxWidth: '52ch', margin: '0 auto 32px' }}>If you don't ship it to production by day 30, you've lost nothing.</p>
        <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>Get the trial link <Icon name="arrow-right" size={16}/></a>
      </div>
    </section>
  </div>
);

const Stat = ({ n, l }) => (
  <div>
    <div className="counter-num" style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink-1)', lineHeight: 1 }}>
      <AnimatedCounter value={n}/>
    </div>
    <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8 }}>{l}</div>
  </div>
);

const FeatCard = ({ num, title, body }) => (
  <div className="card">
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', fontWeight: 600, marginBottom: 16 }}>{num}</div>
    <h3 style={{ fontSize: 18, marginBottom: 10 }}>{title}</h3>
    <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: 0 }}>{body}</p>
  </div>
);

const Step = ({ n, title, body }) => (
  <div className="card">
    <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--ink-1)', color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, marginBottom: 16 }}>{n}</div>
    <h3 style={{ fontSize: 17, marginBottom: 8 }}>{title}</h3>
    <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: 0 }}>{body}</p>
  </div>
);

const ShotCard = ({ label, caption, src }) => (
  <div className="card" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
    <div style={{ background: 'var(--surface-3)', overflow: 'hidden' }}>
      <img
        src={src}
        alt={label}
        loading="lazy"
        style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 3', objectFit: 'cover', objectPosition: 'top' }}
        onError={(e) => { e.currentTarget.style.display = 'none'; }}
      />
    </div>
    <div style={{ padding: '20px 22px 22px' }}>
      <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55 }}>{caption}</div>
    </div>
  </div>
);

window.ProductPage = ProductPage;