const { useState: useStateS } = React;
const AUDIT_URL = 'Callkata Free Audit.html';
const MK_NAV = [['How it works', '#how'], ['For mortgage teams', '#mortgage'], ['Product', '#product'], ['FAQ', '#faq']];
const MK_PROBLEM = ['See which reps are missing which rules.', 'Review the exact moments where it happened.', 'Find the highest-priority coaching opportunity.', 'Track whether coaching changes behavior.'];
const MK_VALUE = [['See what is really happening', 'Grade calls against the process your team is expected to follow.'], ['Coach with evidence', 'Give managers the exact call moments and clips needed for specific coaching.'], ['Prove behavior changed', 'Track rule-level performance before and after coaching.']];
const MK_LOOP = ['Find the gap', 'Choose the coaching priority', 'Practice the behavior', 'Measure improvement'];
const MK_HOW = [['Connect your calls', 'Use the recordings your team already creates.'], ['Add your process', 'Upload your script, rubric, or call rules. Callkata evaluates performance against your standards, not a generic scorecard.'], ['Act on the findings', 'Receive daily priorities, review the evidence, coach the right reps, and track the movement over time.']];
const MK_AREAS = [['Home', 'Start each day with the most important management actions.', 'House'], ['Calls', 'Review the exact moments where reps followed or missed a rule.', 'Phone'], ['Team', 'See performance by rep, rule, stage, and time period.', 'Users'], ['Coaching', 'Assign coaching actions and track completion.', 'Target'], ['Reports', 'Review daily priorities, weekly trends, and monthly performance.', 'BarChart3'], ['Rubric', 'Manage the rules and standards used to evaluate calls.', 'ListChecks'], ['Disputes', 'Review questionable grades and improve the rubric over time.', 'Scale']];
const MK_REPORTS = [['Daily', 'What should I coach today?', 'See the priority rule, reps needing attention, good and missed examples, and the recommended coaching action.'], ['Weekly', 'Is coaching changing behavior?', 'See which rules improved, which declined, and how reps moved after coaching.'], ['Monthly', 'Is the team improving enough to justify the investment?', 'See long-term trends, persistent gaps, coaching activity, and the next priority.']];
const MK_MORT = ['Which loan officers are missing which rules', 'The exact call moments behind the score', 'The first coaching priority', 'Whether behavior improves after coaching'];
const MK_AUDIT = ['Per-rep grading', 'Rule-level performance', 'Exact call clips', 'Good and missed examples', 'A recommended coaching action'];
const MK_FIT = [['You manage a sales team.', 'You are a solo salesperson.'], ['Your calls are already recorded.', 'Your team does not record calls.'], ['Your team follows a script or defined process.', 'You are looking for lead generation.'], ['You want coaching to be specific.', 'You want generic sales training.'], ['You want evidence that behavior improved.', 'You cannot lawfully share your recordings.'], ['You need visibility without listening to every call.', null]];
const MK_FAQ = [['What does Callkata grade?', 'Callkata evaluates recorded sales calls against the script, rubric, or call rules defined by your team.'], ['Is Callkata software or a service?', 'Callkata is software with an implementation and coaching layer. The platform stores the calls, grades performance, delivers reports, and tracks improvement.'], ['Do I need to install anything?', 'The free audit does not require software installation. Ongoing setup depends on your recording workflow.'], ['Does Callkata replace sales managers?', 'No. Callkata helps managers know where to focus. Managers still coach, lead, and make judgment calls.'], ['Can reps use Callkata?', 'Yes. Managers see team priorities and assign coaching. Reps see their own performance, clips, assigned practice, and improvement.'], ['What does the free audit include?', 'We grade 10 recorded calls against your team’s script and return your first coaching priority within 48 hours. If you want the full team picture, we can expand this to 50 calls during setup.'], ['What happens after the audit?', 'You can review the findings on your own or schedule a short readout. If the report is useful, we can show you how ongoing grading and coaching measurement work.'], ['What markets do you serve?', 'Callkata is built first for mortgage sales teams. The underlying system can support other recorded sales environments where teams use defined scripts or processes.']];
const MK_FOOT = [['How it works', '#how'], ['Mortgage teams', '#mortgage'], ['Free audit', AUDIT_URL], ['Privacy', '#'], ['Terms', '#'], ['Contact', '#'], ['Compliance posture', '#']];

const go = href => e => { if (!href.startsWith('#') || href === '#') return; e.preventDefault(); const el = document.querySelector(href); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); };
function CtaBtn({ children, size = 'lg', variant = 'accent' }) { return <Button variant={variant} size={size} onClick={() => { window.location.href = AUDIT_URL; }}>{children}</Button>; }

function HeroShot() {
  const curve = [38, 41, 40, 44, 52, 58, 63, 67];
  return <div className="hd-glass mk-shot">
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}><span className="hd-title">Today</span><span className="ck-meta">Northgate Home Loans · 214 calls graded this week</span></div>
    <div style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0,1fr)', gap: 16, alignItems: 'center' }}><Stat value="54" unit="/100" size="xl" /><div style={{ display: 'grid', gap: 4, minWidth: 0 }}><span className="ck-label" style={{ color: 'var(--quest-text)' }}>Daily coaching priority</span><span style={{ font: 'var(--type-card-title-lg)' }}>Agent referral push · 31% followed</span><span className="ck-meta">Coach Dana and Marcus first · 2 clips ready</span></div></div>
    <div className="mk-shot-row">
      <div style={{ display: 'grid', gap: 8, minWidth: 0 }}><span className="ck-label">Reps needing attention</span>{[['Dana Whitfield', 18], ['Marcus Lee', 24], ['Priya Natarajan', 46]].map(([n, v]) => <div key={n} className="mk-rep"><Avatar name={n} size={30} /><span style={{ font: 'var(--type-card-title)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n}</span><span style={{ font: 'var(--type-value)', color: v < 30 ? 'var(--motion-text)' : 'var(--ink-900)' }}>{v}%</span></div>)}</div>
      <div style={{ display: 'grid', gap: 8, minWidth: 0 }}><span className="ck-label">Rule performance</span>{[['Agent referral push', 31], ['Ask assets bank by bank', 48], ['Set follow-up date', 66], ['Credit pull disclosure', 88]].map(([l, v]) => <div key={l} className="mk-rule"><span className="ck-meta" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l}</span><Track value={v} height={5} color={v < 50 ? 'var(--motion)' : 'var(--live)'} /><span style={{ font: 'var(--type-value)' }}>{v}%</span></div>)}</div>
    </div>
    <div className="mk-shot-row">
      <div className="mk-clip"><Badge tone="live">good</Badge><span className="ck-meta">Priya · 24:10 · “Who’s the agent you’re working with? I’ll loop them in today.”</span></div>
      <div className="mk-clip"><Badge tone="motion">missed</Badge><span className="ck-meta">Dana · 28:51 · Wrap-up with no mention of the agent.</span></div>
    </div>
    <div className="hd-sunken" style={{ gridTemplateColumns: 'minmax(0,1fr) auto', alignItems: 'center' }}><div style={{ display: 'grid', gap: 2 }}><span className="ck-label">Agent referral push · 8 weeks</span><span className="ck-meta">Coached Sep 22 · ↗ +29 pts since</span></div><Spark data={curve} w={140} h={36} /></div>
  </div>;
}

function Faq() {
  const [open, setOpen] = useStateS(0);
  return <div className="mk-faq">{MK_FAQ.map(([q, a], i) => <div key={q} className="mk-q"><button className="ck-reset mk-qb" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}><span>{q}</span><span>{open === i ? '×' : '+'}</span></button>{open === i && <p className="mk-p">{a}</p>}</div>)}</div>;
}

function Site() {
  return <div className="mk">
    <header className="mk-top">
      <img src="uploads/callKataFull.png" alt="Callkata" style={{ height: 22, width: 'auto' }} />
      <nav className="mk-nav">{MK_NAV.map(([l, h]) => <a key={l} href={h} onClick={go(h)}>{l}</a>)}</nav>
      <CtaBtn size="sm">Get 10 calls graded free</CtaBtn>
    </header>

    <section className="mk-hero">
      <div className="mk-copy">
        <span className="ck-label">Sales coaching built from your team’s real calls</span>
        <h1 className="mk-h1">Know who to coach, what to coach, and whether behavior changed.</h1>
        <p className="mk-lead">Callkata grades recorded sales calls against your team’s own script, turns the findings into daily coaching priorities, and tracks whether your reps improve.</p>
        <div className="mk-ctas"><CtaBtn>Get 10 calls graded free</CtaBtn><Button variant="secondary" size="lg" onClick={go('#how')}>See how it works</Button></div>
        <span className="ck-meta">Start with 10 real calls. Receive a clear coaching report within 48 hours.</span>
      </div>
      <div style={{ display: 'grid', gap: 10, minWidth: 0 }}><HeroShot /><span className="ck-meta" style={{ textAlign: 'center' }}>From recorded calls to the next coaching action.</span></div>
    </section>

    <section className="mk-sec mk-2">
      <div className="mk-stack">
        <h2 className="mk-h2">Your team makes more calls than you can review.</h2>
        <p className="mk-p">Your reps may make hundreds of calls every week.</p>
        <p className="mk-p">You hear a few.</p>
        <p className="mk-p">That means coaching often depends on the calls you happened to review, not the calls your team is actually making.</p>
        <p className="mk-p">Callkata gives managers visibility across the team so they can stop coaching from memory and start coaching from evidence.</p>
      </div>
      <div className="hd-glass"><ul className="mk-bullets" style={{ gap: 12 }}>{MK_PROBLEM.map(b => <li key={b}><span style={{ color: 'var(--live)' }}>●</span>{b}</li>)}</ul></div>
    </section>

    <section className="mk-sec">
      <div className="mk-2">
        <div className="mk-stack">
          <h2 className="mk-h2">Callkata is not just call grading.</h2>
          <p className="mk-p">Call grading is the mechanism.</p>
          <p className="mk-p">The outcome is a better-managed sales team.</p>
          <p className="mk-p">Callkata helps managers move through the complete coaching loop:</p>
        </div>
        <div className="mk-loop">{MK_LOOP.map((s, i) => <React.Fragment key={s}><div className="mk-loop-step"><span className="mk-n" style={i === 3 ? { background: 'var(--quest)' } : null}>{i + 1}</span><span style={{ font: 'var(--type-card-title-lg)' }}>{s}</span></div>{i < 3 && <div className="mk-loop-arrow">↓</div>}</React.Fragment>)}</div>
      </div>
      <div className="mk-3">{MK_VALUE.map(([t, d], i) => <Card key={t} style={{ display: 'grid', gap: 8, alignContent: 'start' }}><span className="ck-label">{['①', '②', '③'][i]}</span><span style={{ font: 'var(--type-card-title-lg)' }}>{t}</span><p className="mk-p">{d}</p></Card>)}</div>
    </section>

    <section className="mk-sec" id="how">
      <div className="mk-head"><h2 className="mk-h2">From calls to coaching priorities in three steps.</h2></div>
      <div className="mk-3">{MK_HOW.map(([t, d], i) => <div key={t} className="mk-tile"><span className="mk-n">{i + 1}</span><span style={{ font: 'var(--type-card-title-lg)' }}>{t}</span><p className="mk-p">{d}</p></div>)}</div>
      <p className="mk-p" style={{ maxWidth: 620 }}>The product tells you what changed, what needs attention, and where to look next.</p>
    </section>

    <section className="mk-sec" id="product">
      <div className="mk-head"><h2 className="mk-h2">One system for the full coaching loop.</h2></div>
      <div className="mk-areas">{MK_AREAS.map(([t, d, ic]) => <div key={t} className="mk-area"><IconTile tone="neutral"><Icon name={ic} size={15} /></IconTile><span>{t}</span><span className="ck-meta" style={{ textWrap: 'pretty' }}>{d}</span></div>)}</div>
    </section>

    <section className="mk-sec">
      <div className="mk-head"><h2 className="mk-h2">Every report answers one management question.</h2></div>
      <div className="mk-3">{MK_REPORTS.map(([c, q, d]) => <div key={c} className="mk-report"><span className="ck-label">{c}</span><span className="mk-report-q">{q}</span><p className="mk-p">{d}</p></div>)}</div>
      <div><Button variant="secondary" size="lg" onClick={() => { window.location.href = 'Home Official.html'; }}>See the manager experience</Button></div>
    </section>

    <section className="mk-mort" id="mortgage">
      <div className="mk-copy">
        <span className="ck-label">Built first for mortgage sales teams</span>
        <h2 className="mk-h2">Mortgage managers should not have to listen to hundreds of calls to know who needs coaching.</h2>
        <div className="mk-ctas"><CtaBtn>Get 10 mortgage calls graded free</CtaBtn></div>
        <span className="ck-meta">Send your script and 10 recorded application calls. Receive your report within 48 hours.</span>
      </div>
      <div style={{ display: 'grid', gap: 14 }}><p className="mk-p">Callkata grades mortgage application calls against your team’s own script and shows:</p><ul className="mk-bullets" style={{ gap: 12 }}>{MK_MORT.map(b => <li key={b}><span style={{ color: 'var(--live)' }}>●</span>{b}</li>)}</ul></div>
    </section>

    <section className="mk-sec mk-2" id="audit">
      <div className="mk-copy">
        <h2 className="mk-h2">See what your team’s calls reveal.</h2>
        <p className="mk-p">Start with a free 10-call audit.</p>
        <p className="mk-p">We grade the calls against your script, identify the biggest coaching opportunity, and return the report within 48 hours.</p>
        <div className="mk-ctas"><CtaBtn>Get my free 10-call report</CtaBtn></div>
        <span className="ck-meta">No software installation. No sales presentation required. No charge for the first 10 calls.</span>
      </div>
      <div className="hd-glass" style={{ display: 'grid', gap: 12 }}><span className="ck-label">You receive</span><ul className="mk-bullets" style={{ gap: 10 }}>{MK_AUDIT.map(b => <li key={b}><span style={{ color: 'var(--live-text)' }}>✓</span>{b}</li>)}</ul></div>
    </section>

    <section className="mk-sec">
      <div className="mk-head"><h2 className="mk-h2">Built for managers responsible for rep performance.</h2></div>
      <div className="mk-fit">
        <div className="hd-glass" style={{ display: 'grid', gap: 10 }}><span className="ck-label" style={{ color: 'var(--live-text)' }}>Good fit if</span>{MK_FIT.map(([a]) => <div key={a} className="mk-fitrow"><span style={{ color: 'var(--live-text)' }}>✓</span>{a}</div>)}</div>
        <div className="hd-glass" style={{ display: 'grid', gap: 10, alignContent: 'start' }}><span className="ck-label" style={{ color: 'var(--text-faint)' }}>Not a fit if</span>{MK_FIT.filter(([, b]) => b).map(([, b]) => <div key={b} className="mk-fitrow" style={{ color: 'var(--text-muted)' }}><span style={{ color: 'var(--text-faint)' }}>×</span>{b}</div>)}</div>
      </div>
    </section>

    <section className="mk-sec">
      <div className="mk-head"><h2 className="mk-h2">The proof is in the calls.</h2></div>
      <div className="mk-2">
        <Card style={{ display: 'grid', gap: 14, alignContent: 'start' }}><span className="ck-label">Customer result</span><p className="mk-quote">“{'{Approved customer quote about finding coaching priorities or improving behavior.}'}”</p><span className="ck-meta">— {'{Customer name or anonymous role}'}</span></Card>
        <Card style={{ display: 'grid', gap: 14, alignContent: 'start' }}><span className="ck-label">Before and after</span><div className="mk-ba">{[['Rule score before coaching', '—'], ['Coaching action taken', '—'], ['Rule score after coaching', '—'], ['Calls reviewed', '—']].map(([l, v]) => <div key={l} className="mk-ba-cell"><span className="ck-meta">{l}</span><span className="mk-ph">{v}</span></div>)}</div></Card>
      </div>
      <p className="mk-p" style={{ maxWidth: 620 }}>Do not take our word for it. Review the calls, see the evidence, and measure the change.</p>
    </section>

    <section className="mk-sec" id="faq">
      <div className="mk-head"><h2 className="mk-h2">FAQ</h2></div>
      <Faq />
    </section>

    <section className="mk-final">
      <h2 className="mk-h2">Stop guessing which reps need coaching.</h2>
      <p className="mk-p">Your team is already making the calls.</p>
      <p className="mk-p">Callkata shows you what is happening across them, what to coach next, and whether the behavior changes.</p>
      <p className="mk-p">Start with 10 real calls and see the evidence for yourself.</p>
      <CtaBtn>Get 10 calls graded free</CtaBtn>
      <span className="ck-meta">Your script. Your calls. Your coaching priorities.</span>
    </section>

    <footer className="mk-foot">
      <div className="mk-foot-row">
        <div style={{ display: 'grid', gap: 12, alignContent: 'start' }}><img src="uploads/callKataFull.png" alt="Callkata" style={{ height: 20, width: 'auto', justifySelf: 'start' }} /><p className="mk-p" style={{ maxWidth: 420 }}>Callkata turns recorded sales calls into clear coaching priorities and measurable behavior change.</p></div>
        <div className="mk-foot-links">{MK_FOOT.map(([l, h]) => <a key={l} href={h} onClick={go(h)}>{l}</a>)}</div>
      </div>
      <p className="ck-meta" style={{ margin: 0, textWrap: 'pretty', maxWidth: 760 }}>Callkata provides call analysis and coaching support. Customers are responsible for ensuring that calls are recorded, stored, shared, and used in accordance with applicable law, company policy, and required consent procedures.</p>
      <span className="ck-meta">© 2026 Callkata</span>
    </footer>
  </div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Site />);
