// Question screens for ClearCoat onboarding

// ─── Inline icons (simple stroke style, no external assets) ─────
const Icon = {
  RefreshArrow: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 5 A6 6 0 0 1 14 5.5 M14 1.5 L14 5.5 L10 5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M15 13 A6 6 0 0 1 4 12.5 M4 16.5 L4 12.5 L8 12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Sprout: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M9 16 L9 9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M9 9 C9 6, 5 5, 4 3 C7 3, 9 5.5, 9 9 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
      <path d="M9 11 C9 9, 12 8, 13 6 C12 9, 11 11, 9 11 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
    </svg>
  ),
  Van: (
    <svg width="20" height="18" viewBox="0 0 22 18" fill="none">
      <path d="M2 4 H13 V12 H2 Z M13 7 H17 L20 10 V12 H13 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <circle cx="6" cy="13.5" r="1.7" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="16" cy="13.5" r="1.7" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  ),
  Building: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M2 15 V5 L9 2 L16 5 V15 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M6 15 V10 H12 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M9 6 L9 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  BuildingSmall: (
    <svg width="20" height="18" viewBox="0 0 22 18" fill="none">
      <path d="M2 15 H20" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <path d="M4 15 V6 H14 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M7 15 V11 H11 V15" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  ),
  BuildingMed: (
    <svg width="22" height="18" viewBox="0 0 24 18" fill="none">
      <path d="M2 15 H22" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <path d="M3 15 V5 H17 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M6 8 H8 M10 8 H12 M14 8 H16 M6 11 H8 M10 11 H12 M14 11 H16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  BuildingLarge: (
    <svg width="24" height="18" viewBox="0 0 26 18" fill="none">
      <path d="M1 15 H25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <path d="M3 15 V8 H10 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M11 15 V3 H18 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M19 15 V10 H23 V15" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M5 11 H7 M13 7 H16 M13 10 H16" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  Person: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <circle cx="9" cy="5.5" r="2.7" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 16 C3 12, 6 10, 9 10 C12 10, 15 12, 15 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  Fleet: (
    <svg width="22" height="18" viewBox="0 0 22 18" fill="none">
      <circle cx="5" cy="5" r="2" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="11" cy="5" r="2" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="17" cy="5" r="2" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M2 14 C2 11, 4 10, 5 10 C6 10, 8 11, 8 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M8 14 C8 11, 10 10, 11 10 C12 10, 14 11, 14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M14 14 C14 11, 16 10, 17 10 C18 10, 20 11, 20 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  Target: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <circle cx="9" cy="9" r="7" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="9" cy="9" r="4" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="9" cy="9" r="1.4" fill="currentColor"/>
    </svg>
  ),
  Trend: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M2 13 L7 8 L10 11 L16 4 M16 4 L16 8 M16 4 L12 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Coin: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <ellipse cx="9" cy="6" rx="6" ry="2.4" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 6 V12 C3 13.3, 5.7 14.4, 9 14.4 C12.3 14.4, 15 13.3, 15 12 V6" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 9 C3 10.3, 5.7 11.4, 9 11.4 C12.3 11.4, 15 10.3, 15 9" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  ),
  Tool: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M11 2 A4 4 0 0 0 13 8.5 L4 15 A1.5 1.5 0 0 0 6 17 L13 8 A4 4 0 0 0 11 2 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  Check: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <circle cx="9" cy="9" r="7" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M5.5 9.5 L8 12 L12.5 6.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  ),
  Plus: (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <circle cx="9" cy="9" r="7" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M9 5.5 V12.5 M5.5 9 H12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
};

// ─── Step header (kicker + question + helper) ───────────────────
const StepHeader = ({ kicker, title, helper }) => (
  <div style={{marginBottom: 28}}>
    <div className="caption" style={{marginBottom: 14}}>{kicker}</div>
    <h1 style={{
      margin:0, fontSize:34, lineHeight:1.1, letterSpacing:'-0.025em', fontWeight:600,
      textWrap:'pretty',
    }}>{title}</h1>
    {helper ? (
      <p style={{margin:'12px 0 0', fontSize:15.5, lineHeight:1.5, color:'rgba(11,18,32,0.6)', maxWidth: 560}}>
        {helper}
      </p>
    ) : null}
  </div>
);

// ─── Q1 — Replacement or fresh ──────────────────────────────────
const QStartingPoint = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="01 · The starting line"
      title="Are you switching to ClearCoat, or starting fresh?"
      helper="So we know whether to set up an import or walk you through the basics from scratch."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={Icon.RefreshArrow}
        kicker="Switching"
        title="I'm replacing software I already use"
        description="We'll help you import customers, vehicles, and history from your current tool."
        selected={value === 'replace'}
        onClick={()=>onChange('replace')}
      />
      <ChoiceCard
        icon={Icon.Sprout}
        kicker="Greenfield"
        title="I'm starting fresh"
        description="New business or first time using shop software — we'll set up a clean slate."
        selected={value === 'fresh'}
        onClick={()=>onChange('fresh')}
      />
    </div>
  </div>
);

// ─── Q2 — Mobile vs B&M ─────────────────────────────────────────
const QOperationType = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="02 · How you operate"
      title="What kind of detailing operation are you running?"
      helper="ClearCoat works for both — pick whichever fits today. You can add the other later."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={Icon.Van}
        kicker="On the road"
        title="Mobile detailing"
        description="You travel to the customer. We'll handle routes, drive time, and on-site invoicing."
        selected={value === 'mobile'}
        onClick={()=>onChange('mobile')}
      />
      <ChoiceCard
        icon={Icon.Building}
        kicker="At your location"
        title="Brick & mortar shop"
        description="Customers come to you. We'll handle bays, scheduling, and walk-ins."
        selected={value === 'shop'}
        onClick={()=>onChange('shop')}
      />
    </div>
  </div>
);

// ─── Q3a — Shop size ────────────────────────────────────────────
const QShopSize = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="03 · Shop size"
      title="How big is the shop?"
      helper="This helps us scale your account — number of bays, employees, and the dashboard layout."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={Icon.BuildingSmall}
        kicker="Small"
        title="Small shop"
        description="1–4 employees · 1–2 bays"
        right={<div className="mono" style={{fontSize:11, lineHeight:1.4}}>Up to<br/><b style={{fontSize:18}}>4</b> employees</div>}
        selected={value === 'small'}
        onClick={()=>onChange('small')}
      />
      <ChoiceCard
        icon={Icon.BuildingMed}
        kicker="Medium"
        title="Medium shop"
        description="Up to 20 employees · ~10 bays"
        right={<div className="mono" style={{fontSize:11, lineHeight:1.4}}>Up to<br/><b style={{fontSize:18}}>20</b> employees</div>}
        selected={value === 'medium'}
        onClick={()=>onChange('medium')}
      />
      <ChoiceCard
        icon={Icon.BuildingLarge}
        kicker="Large"
        title="Large / multi-location"
        description="20+ employees · multiple locations"
        right={<div className="mono" style={{fontSize:11, lineHeight:1.4}}>20+<br/><b style={{fontSize:18}}>employees</b></div>}
        selected={value === 'large'}
        onClick={()=>onChange('large')}
      />
    </div>
  </div>
);

// ─── Q3b — Mobile size ──────────────────────────────────────────
const QMobileSize = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="03 · Crew size"
      title="Is it just you, or do you run a fleet?"
      helper="This sets up routing, dispatch, and how we track jobs in the field."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={Icon.Person}
        kicker="Solo"
        title="Solo detailer"
        description="One vehicle, one schedule. Designed to keep you off the phone and on the job."
        selected={value === 'solo'}
        onClick={()=>onChange('solo')}
      />
      <ChoiceCard
        icon={Icon.Fleet}
        kicker="Fleet"
        title="Fleet — multiple detailers"
        description="Coordinate a team of vans with per-tech assignments, travel estimates, and a shared schedule."
        selected={value === 'fleet'}
        onClick={()=>onChange('fleet')}
      />
    </div>
  </div>
);

// ─── Q4 — Customers per week (slider with snap presets) ────────
const QVolume = ({ value, onChange }) => {
  const max = 200;
  const pct = Math.min(100, (value / max) * 100);
  const presets = [10, 25, 50, 100, 200];
  const label =
    value < 10 ? 'Just getting going' :
    value < 25 ? 'A steady week' :
    value < 50 ? 'Busy week' :
    value < 100 ? 'High volume' :
    value < 200 ? 'Multi-bay machine' :
    '200+ per week';

  return (
    <div>
      <StepHeader
        kicker="04 · Volume"
        title="Roughly how many cars do you service in a week?"
        helper="An estimate is fine — we use this to recommend a plan and tune the calendar for your throughput."
      />

      <div style={{
        background:'#ffffff', border:'1px solid rgba(11,18,32,0.10)', borderRadius:16,
        padding:'28px 26px 22px',
      }}>
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 18}}>
          <div>
            <div className="caption" style={{marginBottom: 6}}>Per week</div>
            <div style={{display:'flex', alignItems:'baseline', gap:8}}>
              <div style={{fontSize:54, fontWeight:600, letterSpacing:'-0.04em', lineHeight:1}}>
                {value}
                {value >= max ? <span style={{fontSize:30, color:'rgba(11,18,32,0.45)'}}>+</span> : null}
              </div>
              <div className="mono" style={{fontSize:12, color:'rgba(11,18,32,0.45)'}}>cars / wk</div>
            </div>
          </div>
          <div style={{
            padding:'6px 10px', borderRadius:999,
            background:'#f0eee9', border:'1px solid rgba(11,18,32,0.08)',
            fontSize:12.5, color:'rgba(11,18,32,0.7)',
          }}>{label}</div>
        </div>

        <input
          type="range" min="1" max={max} value={value}
          onChange={(e)=>onChange(Number(e.target.value))}
          className="cc-range"
          style={{'--pct': pct + '%'}}
        />

        <div style={{display:'flex', justifyContent:'space-between', marginTop: 14}}>
          {presets.map(p => (
            <button key={p} onClick={()=>onChange(p)}
              style={{
                all:'unset', cursor:'pointer',
                fontFamily:"'Geist Mono',monospace", fontSize:11,
                color: value === p ? '#0b1220' : 'rgba(11,18,32,0.4)',
                fontWeight: value === p ? 600 : 400,
                padding:'4px 6px',
              }}>{p === max ? p+'+' : p}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── Q5 — Primary goal ──────────────────────────────────────────
const QGoal = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="05 · What you need"
      title="What's pulling you toward new software right now?"
      helper="Pick what fits best. We'll surface tools and onboarding tips that match."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={Icon.Tool}
        kicker="Upgrade"
        title="I need better software"
        description="Current tool is clunky, missing features, or just a pain to use day to day."
        selected={value === 'better'}
        onClick={()=>onChange('better')}
      />
      <ChoiceCard
        icon={Icon.Trend}
        kicker="Scale"
        title="I need something that grows with me"
        description="Adding bays, hiring detailers, or opening a second location — and outgrowing what I have."
        selected={value === 'scale'}
        onClick={()=>onChange('scale')}
      />
      <ChoiceCard
        icon={Icon.Coin}
        kicker="Cost"
        title="I'm looking for a cheaper option"
        description="Paying too much for what I get. Same job, leaner price."
        selected={value === 'cheaper'}
        onClick={()=>onChange('cheaper')}
      />
      <ChoiceCard
        icon={Icon.Sprout}
        kicker="Day one"
        title="I'm just getting started"
        description="New business. Set me up with the basics — bookings, payments, customer records."
        selected={value === 'starting'}
        onClick={()=>onChange('starting')}
      />
    </div>
  </div>
);

// ─── Q6 — Square account ────────────────────────────────────────
const QSquare = ({ value, onChange }) => (
  <div>
    <StepHeader
      kicker="06 · Payments"
      title="Do you already have a Square account?"
      helper="ClearCoat runs payments through Square. We'll link your existing account or get one set up for you in the next step."
    />
    <div style={{display:'grid', gap:12}}>
      <ChoiceCard
        icon={<SquareLogo size={18}/>}
        kicker="Connect"
        title="Yes — I have a Square account"
        description="We'll link it on the next step. Takes about 30 seconds."
        selected={value === 'has'}
        onClick={()=>onChange('has')}
      />
      <ChoiceCard
        icon={Icon.Plus}
        kicker="Set up"
        title="No — I'll need to set one up"
        description="We'll walk you through creating a Square account and connect it automatically."
        selected={value === 'need'}
        onClick={()=>onChange('need')}
      />
      <ChoiceCard
        icon={Icon.RefreshArrow}
        kicker="Later"
        title="I'll decide later"
        description="You can finish setting up ClearCoat and come back to payments before going live."
        selected={value === 'later'}
        onClick={()=>onChange('later')}
      />
    </div>
  </div>
);

Object.assign(window, {
  Icon, StepHeader,
  QStartingPoint, QOperationType, QShopSize, QMobileSize,
  QVolume, QGoal, QSquare,
});
