import React from 'react';

export function MirrorHeader({ done }: { done: boolean }): JSX.Element {
  if (done) {
    return (
      <div className="relative">
        <div className="absolute -top-3.5 left-0 right-0 h-0.5 bg-[linear-gradient(90deg,transparent_0%,#C8175D_40%,#7B3FE4_60%,transparent_100%)]" />
        <h1 className="m-0 text-[clamp(24px,3vw,32px)] font-semibold tracking-[-0.02em] leading-[1.1] text-[#202223]">
          Done. You&apos;re in control now.
        </h1>
        <p className="mt-2.5 text-[14px] text-[#6d7175] max-w-[640px]">
          AI&apos;s wrong version of your store is gone here. Yours stands.
        </p>
      </div>
    );
  }

  return (
    <div>
      <h1 className="m-0 text-[clamp(24px,3vw,32px)] font-semibold tracking-[-0.02em] leading-[1.1] text-[#202223]">
        AI is sending your buyers somewhere else.
      </h1>
      <p className="mt-2.5 text-[14px] text-[#6d7175] max-w-[640px]">
        Because ChatGPT and Gemini guess about your store from the web, and
        they&apos;re getting it wrong. Fix the six answers below and take back
        control of how AI should present your company to your clients.
      </p>
    </div>
  );
}