@aglyn/plugins-ai 1.0.0-beta.270 → 1.0.0-beta.272

package/src/lib/components/ai-site-start-card.component.js

@@ -19,9 +19,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lockdownRefusalText, parseLockdownRefusal, PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
 import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
 import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
-import { mdiCreation, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
+import { mdiCreation, mdiPageLayoutHeaderFooter, mdiWebSync } from "@aglyn/shared-data-mdi";
 import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
 import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
+import BlockedControl from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
 import { Alert, AppBar, Box, Button, Card, CardActionArea, Chip, CircularProgress, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, Toolbar, Typography, useMediaQuery } from "@mui/material";
@@ -32,17 +34,20 @@ import { AI_JOB_AUTO_CONFIRM_INPUT, AI_SITE_FREE_PAGES, aiFreeCreditsNoneLeftTex
 import { FREE_AI_TASTE_CREDITS_PER_MONTH } from "../plan-entitlements.js";
 import { AI_CREDITS_CONFIRM_CODE, aiCreditRangeText } from "../model/ai-credit-estimate.js";
 import { AiCreditsPromptNotice } from "./ai-credits-prompt.component.js";
-import { AI_SITE_START_ANSWERS, aiSiteStartBrief, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
-import { aiSiteStartFieldErrors, aiSiteStartFirstInvalidStep, aiSiteStartNextStep, aiSiteStartPreviousStep, aiSiteStartStepErrors, aiSiteStartStepIndex, AI_SITE_START_STEP_FIELDS } from "../model/ai-site-start-steps.js";
+import { AI_SITE_START_ANSWERS, aiSiteStartAnswersFromClientBuild, aiSiteStartBrief, aiSiteStartClientBrief, aiSiteStartClientInputs, aiSiteStartClientNote, aiSiteStartExtrasGiven, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
+import { aiSiteInspirationLimit } from "../model/ai-site-inspiration.js";
+import { aiSiteStartFieldErrors, aiSiteStartFirstInvalidStep, aiSiteStartNextStep, aiSiteStartPreviousStep, aiSiteStartStepErrors, aiSiteStartStepIndex, AI_SITE_START_STEPS, AI_SITE_START_STEP_FIELDS } from "../model/ai-site-start-steps.js";
 import { aiSiteKindOfInputs } from "../model/ai-site-kinds.js";
 import { aiSiteStartClickOf, useAiSiteStartTracking } from "./ai-site-start-tracking.js";
-import { AudienceStep, DetailsStep, KindStep, ReviewStep, StartProgress, StepHelp, StyleStep } from "./ai-site-start-steps.component.js";
+import { AudienceStep, DetailsStep, KindStep, MoreDetails, ReviewStep, StartProgress, StepHelp, StyleStep } from "./ai-site-start-steps.component.js";
 import { AiJobFollow } from "./ai-job-follow.component.js";
 import { AiModelSelector } from "./ai-model-selector.component.js";
 import { useAiModelChoice } from "./use-ai-model-choice.js";
 import { aiCreditsBillingHref, aiSiteBuildHref } from "./ai-job-links.js";
 import { publishAiJob } from "./ai-jobs-store.js";
 import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-site-start-handoff.js";
+import { AiSiteImportStart } from "./ai-site-import-start.component.js";
+import { aiSiteImportOfferOf } from "../model/ai-site-import-view.js";
 /** Labels the dialog for a reader, from its own heading. */ const TITLE_ID = 'ai-site-start-title';
 /**
  * The takeover's surface, for its paper, its bar and its footer alike: the
@@ -71,7 +76,7 @@ import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-sit
 /**
  * One way to start, as a card the whole of which is the button. Its accessible
  * name is its title; its description describes it.
- */ function ChoiceCard({ accent, icon, iconId, title, description, busy = false, onChoose, children }) {
+ */ function ChoiceCard({ accent, icon, iconId, title, description, busy = false, blocked = null, onChoose, children }) {
     const id = useId();
     return /*#__PURE__*/ _jsx(Card, {
         variant: "outlined",
@@ -97,52 +102,57 @@ import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-sit
                     }
                 }
             }),
-        children: /*#__PURE__*/ _jsx(CardActionArea, {
-            onClick: onChoose,
-            disabled: busy,
-            "aria-labelledby": `${id}-title`,
-            "aria-describedby": `${id}-description`,
-            "aria-busy": busy || undefined,
-            sx: {
-                height: '100%',
-                p: {
-                    xs: 3,
-                    sm: 4
-                }
-            },
-            children: /*#__PURE__*/ _jsxs(Stack, {
-                spacing: 2,
+        children: /*#__PURE__*/ _jsx(BlockedControl, {
+            blocked: Boolean(blocked),
+            reason: blocked != null ? blocked : '',
+            fullWidth: true,
+            children: /*#__PURE__*/ _jsx(CardActionArea, {
+                onClick: onChoose,
+                disabled: busy,
+                "aria-labelledby": `${id}-title`,
+                "aria-describedby": `${id}-description`,
+                "aria-busy": busy || undefined,
                 sx: {
-                    alignItems: 'center',
-                    textAlign: 'center'
+                    height: '100%',
+                    p: {
+                        xs: 3,
+                        sm: 4
+                    }
                 },
-                children: [
-                    /*#__PURE__*/ _jsx(IconBadge, {
-                        accent: accent,
-                        children: busy ? /*#__PURE__*/ _jsx(CircularProgress, {
-                            size: "1em",
-                            color: accent,
-                            "aria-label": `${title}…`
-                        }) : /*#__PURE__*/ _jsx(MdiIcon, {
-                            path: icon,
-                            "data-icon": iconId,
-                            "aria-hidden": true
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        id: `${id}-title`,
-                        variant: "h6",
-                        component: "h2",
-                        children: title
-                    }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        id: `${id}-description`,
-                        variant: "body2",
-                        color: "text.secondary",
-                        children: description
-                    }),
-                    children
-                ]
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    sx: {
+                        alignItems: 'center',
+                        textAlign: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(IconBadge, {
+                            accent: accent,
+                            children: busy ? /*#__PURE__*/ _jsx(CircularProgress, {
+                                size: "1em",
+                                color: accent,
+                                "aria-label": `${title}…`
+                            }) : /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: icon,
+                                "data-icon": iconId,
+                                "aria-hidden": true
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            id: `${id}-title`,
+                            variant: "h6",
+                            component: "h2",
+                            children: title
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            id: `${id}-description`,
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: description
+                        }),
+                        children
+                    ]
+                })
             })
         })
     });
@@ -192,8 +202,8 @@ function SectionLabel({ children, help }) {
  * held, and only the review turns them into the job, through the same
  * `aiSiteStartBrief` and `aiSiteStartInputs`. Each step is reported as a
  * funnel, with where people struggle (`ai-site-start-tracking.ts`).
- */ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, initialAnswers = null }) {
-    var _ref, _ref1, _ref2, _aiFreeSitePrompt;
+ */ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, clientBuild, initialAnswers = null }) {
+    var _ref, _ref1, _ref2, _ref3, _aiFreeSitePrompt;
     var _aiSiteKindOfInputs, _modelChoice_options_options_find, _modelChoice_options;
     const { data: user } = useUser();
     const router = useRouter();
@@ -208,11 +218,21 @@ function SectionLabel({ children, help }) {
     // the site does not exist yet. It opens on the first question, where the
     // site's name and address are asked, with every answer after it filled in.
     const [handedOff] = useState(()=>pendingSite && !initialAnswers ? readAiSiteStartAnswers() : null);
+    // A site staff are building for a client (AGL-3958): the intake answered
+    // the questions already, so the start opens on the review with them, and
+    // stays on this screen once it has started. Read once, like a reopened start.
+    const [clientAnswers] = useState(()=>clientBuild && !initialAnswers ? aiSiteStartAnswersFromClientBuild(clientBuild.intake) : null);
+    const [clientIntake] = useState(()=>{
+        var _ref;
+        return (_ref = clientBuild == null ? void 0 : clientBuild.intake) != null ? _ref : null;
+    });
+    const clientBuildRef = useRef(clientBuild);
+    clientBuildRef.current = clientBuild;
     // Read once: a start reopened on its answers stays one while it is open.
-    const reopened = useRef(initialAnswers !== null || handedOff !== null);
+    const reopened = useRef(initialAnswers !== null || handedOff !== null || clientAnswers !== null);
     // A start reopened on its answers opens on the review, every answer there to change.
-    const [step, setStep] = useState(initialAnswers ? 'review' : 'choose');
-    const [answers, setAnswers] = useState((_ref1 = initialAnswers != null ? initialAnswers : handedOff) != null ? _ref1 : AI_SITE_START_ANSWERS);
+    const [step, setStep] = useState(initialAnswers || clientAnswers ? 'review' : 'choose');
+    const [answers, setAnswers] = useState((_ref1 = (_ref2 = initialAnswers != null ? initialAnswers : clientAnswers) != null ? _ref2 : handedOff) != null ? _ref1 : AI_SITE_START_ANSWERS);
     // The steps whose reasons not to go forward are shown: the ones Next was refused on.
     const [checked, setChecked] = useState(()=>new Set());
     // A step opened from the review's Edit goes back to the review on Next.
@@ -232,6 +252,9 @@ function SectionLabel({ children, help }) {
     /** The site job "Plan my site" started, as the create door answered with it. */ const [started, setStarted] = useState(null);
     // The Free taste's page band (AGL-3594), read off the verdict request.
     const [freeTaste, setFreeTaste] = useState(false);
+    // Whether the Style step asks for the sites the person likes (AGL-3975),
+    // read off the same verdict request: `release_ai_site_inspiration`.
+    const [siteInspiration, setSiteInspiration] = useState(false);
     // What the Free workspace has left this month (AGL-3660), as the same read
     // the create door refuses on: the less of its own band and its owner's
     // allowance across their Free workspaces. `null` when the route said none.
@@ -249,16 +272,24 @@ function SectionLabel({ children, help }) {
     const creating = Boolean(pendingSite) && !(pendingSite == null ? void 0 : pendingSite.created);
     // The funnel (AGL-3898): each step drawn, left and abandoned, and where people struggle.
     const tracker = useAiSiteStartTracking(step, verdict === 'ready');
+    // "Bring my site" (AGL-3976): asked of its own door, absent while its flag
+    // is off, drawn disabled with the reason where the workspace can change it.
+    const [importAvailability, setImportAvailability] = useState({
+        state: 'checking'
+    });
+    const [importing, setImporting] = useState(false);
     useEffect(()=>{
         if (!orgId || !uid) return;
         let active = true;
         void (async ()=>{
             try {
-                const response = await authorizedFetch(userRef.current, `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=1`);
+                const response = await authorizedFetch(userRef.current, // `siteImport=1`: whether "Bring my site" is offered here (AGL-3976), on the same read.
+                `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=1&siteImport=1`);
                 const payload = response.ok ? await response.json().catch(()=>null) : null;
                 if (active) {
                     var // "Create site" shows its own dialog when this one will not draw.
-                    _pendingRef_current;
+                    _pendingRef_current, _clientBuildRef_current_ready, _clientBuildRef_current;
+                    setSiteInspiration((payload == null ? void 0 : payload.siteInspiration) === true);
                     if ((payload == null ? void 0 : payload.freeTaste) === true) {
                         setFreeTaste(true);
                         const credits = payload == null ? void 0 : payload.freeCredits;
@@ -270,14 +301,17 @@ function SectionLabel({ children, help }) {
                             }));
                     }
                     const shown = response.status !== 404 && response.status !== 403;
+                    setImportAvailability(aiSiteImportOfferOf(payload == null ? void 0 : payload.siteImport));
                     setVerdict(shown ? 'ready' : 'hidden');
                     (_pendingRef_current = pendingRef.current) == null ? void 0 : _pendingRef_current.ready(shown);
+                    (_clientBuildRef_current = clientBuildRef.current) == null ? void 0 : (_clientBuildRef_current_ready = _clientBuildRef_current.ready) == null ? void 0 : _clientBuildRef_current_ready.call(_clientBuildRef_current, shown);
                 }
             } catch (unused) {
                 if (active) {
-                    var _pendingRef_current1;
+                    var _pendingRef_current1, _clientBuildRef_current_ready1, _clientBuildRef_current1;
                     setVerdict('hidden');
                     (_pendingRef_current1 = pendingRef.current) == null ? void 0 : _pendingRef_current1.ready(false);
+                    (_clientBuildRef_current1 = clientBuildRef.current) == null ? void 0 : (_clientBuildRef_current_ready1 = _clientBuildRef_current1.ready) == null ? void 0 : _clientBuildRef_current_ready1.call(_clientBuildRef_current1, false);
                 }
             }
         })();
@@ -301,7 +335,7 @@ function SectionLabel({ children, help }) {
         answers.pages
     ]);
     // A store's first products and a blog's first posts are part of the start (AGL-3676, AGL-3798).
-    const siteKind = (_ref2 = (_aiSiteKindOfInputs = aiSiteKindOfInputs(aiSiteStartInputs(answers))) == null ? void 0 : _aiSiteKindOfInputs.id) != null ? _ref2 : null;
+    const siteKind = (_ref3 = (_aiSiteKindOfInputs = aiSiteKindOfInputs(aiSiteStartInputs(answers))) == null ? void 0 : _aiSiteKindOfInputs.id) != null ? _ref3 : null;
     const prompt = freeTaste ? (_aiFreeSitePrompt = aiFreeSitePrompt(freeCredits, answers.pages, {
         siteKind
     })) != null ? _aiFreeSitePrompt : serverPrompt : null;
@@ -359,10 +393,20 @@ function SectionLabel({ children, help }) {
                         orgId,
                         hostId: siteId,
                         kind: 'site',
-                        brief: aiSiteStartBrief(asked),
+                        // A client build's intake rides along (AGL-3958): the name and
+                        // towns as the inputs the questions leave empty (the towns only
+                        // while no address is given, AGL-3995), and how to reach the
+                        // business, its hours and the owner's words in the brief.
+                        brief: [
+                            aiSiteStartBrief(asked),
+                            clientIntake ? aiSiteStartClientBrief(clientIntake) : ''
+                        ].filter(Boolean).join(' '),
                         // The guided start confirms its own plan (AGL-3594): the build
                         // follows the plan with no approval to make.
-                        inputs: _extends({}, aiSiteStartInputs(asked), {
+                        // The sites they like go only while the start asks for them (AGL-3975).
+                        inputs: _extends({}, aiSiteStartInputs(siteInspiration ? asked : _extends({}, asked, {
+                            inspiration: []
+                        })), clientIntake ? aiSiteStartClientInputs(clientIntake, asked) : {}, {
                             [AI_JOB_AUTO_CONFIRM_INPUT]: true
                         })
                     }, pickedModel ? {
@@ -422,9 +466,27 @@ function SectionLabel({ children, help }) {
             publishAiJob(created);
             // A removed start's answers have been used (AGL-3936).
             clearAiSiteStartAnswers();
+            // Which optional details the site was asked for with (AGL-3979), by id only.
+            tracker.detailsGiven(aiSiteStartExtrasGiven(asked).map((field)=>{
+                var _AI_SITE_START_STEPS_find;
+                return {
+                    field,
+                    step: (_AI_SITE_START_STEPS_find = AI_SITE_START_STEPS.find((at)=>AI_SITE_START_STEP_FIELDS[at].includes(field))) != null ? _AI_SITE_START_STEPS_find : 'details'
+                };
+            }));
             // The funnel's last step: the site is started, and nothing after is leaving it.
             tracker.complete();
             tracker.finish();
+            // A client build follows its job here, on the build's own screen, which
+            // goes on to send the owner the preview (AGL-3958).
+            if (clientIntake) {
+                var _clientBuildRef_current_onStarted, _clientBuildRef_current;
+                (_clientBuildRef_current = clientBuildRef.current) == null ? void 0 : (_clientBuildRef_current_onStarted = _clientBuildRef_current.onStarted) == null ? void 0 : _clientBuildRef_current_onStarted.call(_clientBuildRef_current, {
+                    id: created.id
+                });
+                setStarted(created);
+                return;
+            }
             // Where the next step is (AGL-3594): the site's "Building your site"
             // page for this job. The zone closes without the starter first, so the
             // setup page does not ask again behind it.
@@ -456,7 +518,9 @@ function SectionLabel({ children, help }) {
         pickedModel,
         pendingSite,
         siteKind,
-        tracker
+        tracker,
+        clientIntake,
+        siteInspiration
     ]);
     // The zone's `startBlank`. Before the site exists it creates it with the
     // starter, and answers `false` when it could not — most often a name or
@@ -487,6 +551,19 @@ function SectionLabel({ children, help }) {
         runStartBlank,
         tracker
     ]);
+    const chooseImport = useCallback(()=>{
+        if (importAvailability.state !== 'ready') return;
+        if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
+        trackEvent('site_start_choice', {
+            choice: 'import'
+        });
+        tracker.complete();
+        setImporting(true);
+    }, [
+        importAvailability.state,
+        pendingSite,
+        tracker
+    ]);
     const chooseAi = useCallback(()=>{
         if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
         trackEvent('site_start_choice', {
@@ -585,7 +662,7 @@ function SectionLabel({ children, help }) {
     const dismissTo = creating && !started ? leave != null ? leave : runStartBlank : exit;
     // Anything the person typed or picked, which a dismissal must not discard
     // silently (AGL-3660). After a job starts there is nothing left to lose.
-    const drafted = !started && Boolean(answers.siteType.trim() || answers.audience.trim() || answers.kind !== null || creating && (pendingSite == null ? void 0 : pendingSite.dirty));
+    const drafted = !started && Boolean(answers.siteType.trim() || answers.audience.trim() || answers.kind !== null || aiSiteStartExtrasGiven(answers).length > 0 || creating && (pendingSite == null ? void 0 : pendingSite.dirty));
     // Escape and the close control: a dismissal, never a choice. Escape that
     // bubbled here through React from a portal outside this dialog's own DOM is
     // a nested menu's, already handled there, and is not this dialog's to act on.
@@ -625,9 +702,11 @@ function SectionLabel({ children, help }) {
     // A Free start quotes what is LEFT (AGL-3660), shared across the owner's
     // Free workspaces — never the month's whole allowance as if none were spent.
     const estimateText = freeTaste ? freeCredits ? `${aiCreditRangeText(estimate)}. You have ${freeCredits.left.toLocaleString('en-US')} of your ${freeCredits.total.toLocaleString('en-US')} free AI credits left this month, until ${aiFreeCreditsResetLabel(freeCredits.resetsOn)}` : `${aiCreditRangeText(estimate)}, of the ${FREE_AI_TASTE_CREDITS_PER_MONTH} AI credits you get free each month` : `${aiCreditRangeText(estimate)}, estimated`;
-    const choosing = step === 'choose' && !started;
-    const reviewing = step === 'review' && !started;
-    const asking = step !== 'choose' && !started;
+    // The card is drawn wherever the workspace could use it, disabled where it cannot yet.
+    const showsImport = importAvailability.state === 'ready' || importAvailability.state === 'blocked';
+    const choosing = step === 'choose' && !started && !importing;
+    const reviewing = step === 'review' && !started && !importing;
+    const asking = step !== 'choose' && !started && !importing;
     // Each answer's reason not to go forward, shown on a step once Next was refused there.
     const fieldErrors = aiSiteStartFieldErrors(answers, {
         freeTaste
@@ -664,14 +743,17 @@ function SectionLabel({ children, help }) {
         },
         details: {
             title: 'A few details',
-            lede: 'Where messages go, how many pages, and what else to draft. All can be changed later.'
+            lede: 'How customers reach you, where messages go, how many pages, and what else to draft. All can be changed later.'
         },
         review: {
             title: 'Review your site',
             lede: started ? `${PLATFORM_BRAND_NAME} AI is on it.` : `${PLATFORM_BRAND_NAME} AI plans and writes your pages from these answers, then publishes your site.`
         }
     };
-    const heading = HEADINGS[step];
+    const heading = importing ? {
+        title: 'Bring my site',
+        lede: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos. First, prove it is yours.`
+    } : HEADINGS[step];
     // Enter in a text answer is Next. A select, a card or a button keeps its own Enter.
     const onStepKeyDown = (event)=>{
         if (event.key !== 'Enter' || event.nativeEvent.isComposing || !asking || reviewing) return;
@@ -774,7 +856,7 @@ function SectionLabel({ children, help }) {
                                     width: '100%',
                                     mx: 'auto'
                                 },
-                                children: /*#__PURE__*/ _jsx(StartProgress, {
+                                children: importing ? null : /*#__PURE__*/ _jsx(StartProgress, {
                                     step: step,
                                     compact: compact,
                                     onStep: started ? undefined : goBackTo
@@ -810,7 +892,7 @@ function SectionLabel({ children, help }) {
                                                 sx: {
                                                     float: 'right'
                                                 }
-                                            }, START_HELP.choose)) : /*#__PURE__*/ _jsx(StepHelp, {
+                                            }, START_HELP.choose)) : importing ? null : /*#__PURE__*/ _jsx(StepHelp, {
                                                 step: step
                                             }),
                                             heading.lede
@@ -845,46 +927,84 @@ function SectionLabel({ children, help }) {
                                     pendingSite.fields
                                 ]
                             }) : null,
-                            choosing ? /*#__PURE__*/ _jsxs(Box, {
-                                "data-start-area": "choose-cards",
-                                sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: {
-                                        xs: '1fr',
-                                        sm: '1fr 1fr'
-                                    },
-                                    gap: 3
-                                },
+                            importing && orgId ? /*#__PURE__*/ _jsx(AiSiteImportStart, {
+                                orgId: orgId,
+                                orgSlug: orgSlug,
+                                hostId: hostId,
+                                host: host,
+                                user: user,
+                                pendingSite: pendingSite,
+                                onBack: ()=>setImporting(false),
+                                leave: leave
+                            }) : choosing ? /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 2,
                                 children: [
-                                    /*#__PURE__*/ _jsx(ChoiceCard, {
-                                        accent: "secondary",
-                                        icon: mdiPageLayoutHeaderFooter.path,
-                                        iconId: "page-layout-header-footer",
-                                        title: "Start from the starter site",
-                                        description: "A ready-made home page with a header, footer and contact form you can edit.",
-                                        busy: startingStarter,
-                                        onChoose: chooseStarter
-                                    }),
-                                    /*#__PURE__*/ _jsxs(ChoiceCard, {
-                                        accent: "primary",
-                                        icon: mdiCreation.path,
-                                        iconId: "creation",
-                                        title: "Start with AI",
-                                        description: `Answer a few questions and ${PLATFORM_BRAND_NAME} AI plans your pages.`,
-                                        onChoose: chooseAi,
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        "data-start-area": "choose-cards",
+                                        sx: {
+                                            display: 'grid',
+                                            gridTemplateColumns: showsImport ? {
+                                                xs: '1fr',
+                                                sm: '1fr 1fr',
+                                                md: '1fr 1fr 1fr'
+                                            } : {
+                                                xs: '1fr',
+                                                sm: '1fr 1fr'
+                                            },
+                                            gap: 3
+                                        },
                                         children: [
-                                            /*#__PURE__*/ _jsx(Chip, {
-                                                size: "small",
-                                                color: "primary",
-                                                label: "Recommended"
+                                            /*#__PURE__*/ _jsx(ChoiceCard, {
+                                                accent: "secondary",
+                                                icon: mdiPageLayoutHeaderFooter.path,
+                                                iconId: "page-layout-header-footer",
+                                                title: "Start from the starter site",
+                                                description: "A ready-made home page with a header, footer and contact form you can edit.",
+                                                busy: startingStarter,
+                                                onChoose: chooseStarter
+                                            }),
+                                            /*#__PURE__*/ _jsxs(ChoiceCard, {
+                                                accent: "primary",
+                                                icon: mdiCreation.path,
+                                                iconId: "creation",
+                                                title: "Start with AI",
+                                                description: `Answer a few questions and ${PLATFORM_BRAND_NAME} AI plans your pages.`,
+                                                onChoose: chooseAi,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: "primary",
+                                                        label: "Recommended"
+                                                    }),
+                                                    freeTaste && /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
+                                                    })
+                                                ]
                                             }),
-                                            freeTaste && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
+                                            showsImport && /*#__PURE__*/ _jsx(ChoiceCard, {
+                                                accent: "secondary",
+                                                icon: mdiWebSync.path,
+                                                iconId: "web-sync",
+                                                title: "Bring my site",
+                                                description: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos, rewritten in your new design.`,
+                                                blocked: importAvailability.state === 'blocked' ? importAvailability.message : null,
+                                                onChoose: chooseImport,
+                                                children: importAvailability.state === 'blocked' && importAvailability.reason === 'plan' ? /*#__PURE__*/ _jsx(Chip, {
+                                                    size: "small",
+                                                    variant: "outlined",
+                                                    label: "Paid plans"
+                                                }) : null
                                             })
                                         ]
-                                    })
+                                    }),
+                                    importAvailability.state === 'blocked' ? /*#__PURE__*/ _jsx(PrerequisiteNotice, _extends({}, importAvailability.reason === 'plan' && orgSlug ? {
+                                        href: aiCreditsBillingHref(orgSlug),
+                                        actionLabel: 'Upgrade'
+                                    } : {}, {
+                                        children: importAvailability.message
+                                    })) : null
                                 ]
                             }) : started && orgId ? /*#__PURE__*/ _jsx(Card, {
                                 variant: "outlined",
@@ -909,28 +1029,50 @@ function SectionLabel({ children, help }) {
                                 children: [
                                     step === 'kind' && /*#__PURE__*/ _jsx(KindStep, _extends({}, stepProps)),
                                     step === 'audience' && /*#__PURE__*/ _jsx(AudienceStep, _extends({}, stepProps)),
-                                    step === 'style' && /*#__PURE__*/ _jsx(StyleStep, _extends({}, stepProps)),
+                                    step === 'style' && /*#__PURE__*/ _jsx(StyleStep, _extends({}, stepProps, {
+                                        inspiration: siteInspiration ? {
+                                            limit: aiSiteInspirationLimit(freeTaste),
+                                            upgradeHref: orgSlug ? aiCreditsBillingHref(orgSlug) : null
+                                        } : null
+                                    })),
                                     step === 'details' && /*#__PURE__*/ _jsx(DetailsStep, _extends({}, stepProps, {
                                         freeTaste: freeTaste,
                                         band: band
                                     })),
-                                    step === 'review' && /*#__PURE__*/ _jsx(ReviewStep, {
+                                    step !== 'review' && /*#__PURE__*/ _jsx(Box, {
+                                        sx: {
+                                            mt: 3
+                                        },
+                                        children: /*#__PURE__*/ _jsx(MoreDetails, _extends({
+                                            step: step
+                                        }, stepProps), step)
+                                    }),
+                                    step === 'review' && /*#__PURE__*/ _jsxs(ReviewStep, {
                                         answers: answers,
                                         freeTaste: freeTaste,
                                         onEdit: edit,
-                                        children: !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
-                                            prompt: prompt,
-                                            noun: "site",
-                                            orgSlug: orgSlug,
-                                            busy: busy,
-                                            onBuildWhatFits: ()=>void plan({
-                                                    creditsConfirmed: true
-                                                }),
-                                            onSmaller: ()=>void plan({
-                                                    creditsConfirmed: true,
-                                                    pages: 1
-                                                })
-                                        })
+                                        inspiration: siteInspiration,
+                                        children: [
+                                            clientIntake && /*#__PURE__*/ _jsx(Alert, {
+                                                severity: "info",
+                                                variant: "outlined",
+                                                "data-start-area": "client-intake",
+                                                children: aiSiteStartClientNote(clientIntake)
+                                            }),
+                                            !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
+                                                prompt: prompt,
+                                                noun: "site",
+                                                orgSlug: orgSlug,
+                                                busy: busy,
+                                                onBuildWhatFits: ()=>void plan({
+                                                        creditsConfirmed: true
+                                                    }),
+                                                onSmaller: ()=>void plan({
+                                                        creditsConfirmed: true,
+                                                        pages: 1
+                                                    })
+                                            })
+                                        ]
                                     })
                                 ]
                             })